You finally got your favicon showing in Google search results, but the edges look chopped off and the mark feels squeezed. That is not a rendering bug on your end. Google displays favicons inside a circular mask, and anything that sits near the corners of your square image gets clipped away. The fix is simple once you know what Google actually wants.
Why the corners disappear
Your favicon file is square, but Google does not show it square. In search results it crops your image into a rounded or circular shape, then drops it into a small container. Any logo, letter, or detail that runs out to the edges of the canvas lands outside that circle and gets cut.
This is why a mark that looks perfect in a browser tab can look cropped in search. The browser tab shows the full square. Google shows a masked circle. Same file, two very different frames.
What Google actually wants
Google has clear requirements for the favicon it pulls for search:
- Square. The image must be a perfect square, not a rectangle.
- A multiple of 48px. Use 48x48, 96x96, 144x144, or 192x192. Google rescales from a multiple of 48, so off-size files can come out blurry.
- Readable on light and dark. The result sits next to your title on backgrounds that vary, so it needs contrast either way.
- A real, consistent icon. Generic or placeholder marks may be ignored.
Hitting these is half the battle. The other half is making sure your artwork survives the circular crop.
The fix: add a safe zone
The cure for cropping is padding. Give your mark a safe zone so it sits centered with breathing room around it, well inside the circular mask. Pull the artwork in from the edges and let the background fill the corners that Google clips anyway.
A good rule of thumb is to keep the important part of your mark within the central area of the canvas and leave a clear margin on all four sides. When the crop happens, only empty background gets trimmed, and your logo stays whole and centered.
Before you ship a change, it helps to see how a live favicon already behaves and to preview your own:
- Open the Favicon Checker.
- Enter a live site URL to see how its favicon looks once Google masks it into a circle.
- Upload or preview your own favicon to spot any artwork that falls outside the safe zone.
- Adjust the padding, re-export at a multiple of 48px, and check again with the Favicon Checker until the mark sits clean inside the circle.
Everything runs in your browser, so the image you preview never leaves your device.
Related tools
- Need to build the icon files in the first place? Use the Favicon Generator.
- Exporting from the wrong format? The Image Converter gets you a clean PNG.
- Sizing to a multiple of 48px? The Image Resizer handles it in seconds.
Center the mark, pad the edges, and Google’s circle will frame it instead of cropping it.