First CHToolsFree web tools

FIRST CH TOOLS / Images / 82 ICON PREVIEW

Profile Icon Preview: Old vs New

Before you switch your profile icon, put the current one and the new one side by side inside the same list screen. The parts a circle crop will hide are tinted red, so you can see straight away whether text or a logo gets cut off. Your images never leave your device.

Current iconSAMPLE
Tap or drop an image here

New iconSAMPLE
Tap or drop an image here

  • Red = hidden when cropped to the selected shape
  • Dashed line = 10% in from the edge (this tool’s own rule of thumb, not any service’s official safe area)
SHAPE
BACKGROUND
OTHER ICONS
Before 3rd row is the current icon
Inbox
    After 3rd row is the new icon
    Inbox
      96px
      40px
      96px
      40px
      Show all sizes (24, 32, 40, 64, 96, 160px)
      Comparison sheetRebuilt each time you let go after adjusting
      Preview of the comparison sheet showing the before and after lists side by side
      Save comparison sheet (PNG 1200×630) Save new icon (PNG 1000×1000)

      The square PNG is not cropped to a circle. To export images at each platform’s post size, use the Social Media Image Resizer.

      How to Use

      1. Add your imagesDrop an image onto the “Current icon” and “New icon” boxes, or use “Choose image”. Sample images are loaded at first; while a sample is showing, tapping the box also opens the file picker.
      2. Line them upDrag inside a box to move the image and use the slider to zoom. Red marks what will be hidden. Switch the shape, background and colours of the other icons to see how each one looks in the list.
      3. ExportSave the comparison sheet (1200×630 PNG) or the new icon as a 1000×1000 square PNG. The sheet works as-is for asking colleagues or followers which one they prefer.

      About This Tool

      Social networks, LINE official accounts and chat apps usually crop your square image to a circle, so anything near the corners disappears. In a list the icon also shrinks to around 40px, and a design that looked great on its own can get lost among the icons around it. This tool places the current and the new icon in the third row of the same list screen and lets you compare them while switching the colours of the other icons, a light or dark background and the shape. The other icons come in two sets — mixed colours, or colours close to the average colour of your new icon — so you can check that it still stands out when surrounded by similar colours.

      The red area in each box shows what the selected shape hides. The dashed line sits 10% in from the edge; it is this tool’s own rule of thumb, not a safe area defined by any service. Whether the important parts survive is for you to judge by eye — there is no automatic pass or fail. The list screen does not imitate any particular app, and each service displays icons a little differently. 40px and 96px are always shown as typical sizes; open “all sizes” to see six steps from 24 to 160px.

      There are two exports. The comparison sheet (1200×630 PNG) puts the “Before” list on the left and the “After” list on the right, each with the icon alone at 40px and 96px, and adds the date and an “approximate preview” note along the bottom. The new icon as a square PNG (1000×1000) is not cropped to a circle, so you can upload the result of your positioning and zoom to each service directly. Transparency is kept, and a warning appears if the source resolution is too low. To make a favicon, try the Favicon Generator; to remove a white background, use the White BG Remover.

      Everything runs on a Canvas in your browser and the images you choose are never uploaded. PNG, JPEG, WebP, AVIF and SVG can be loaded. Select a box and use the arrow keys to move (hold Shift for bigger steps), + and - to zoom and 0 to reset. Copy an image and paste it on this page to drop it into the new icon box.

      Other Tools