NearIMG

2026-10-02

Why your favicon doesn't show up in Google Search — or gets cropped into a circle on Android

A favicon is one small square image doing three unrelated jobs at once: it sits in the browser tab, it shows up next to your site's listing in a Google search result, and if someone saves your site to their phone's home screen, that same artwork becomes the app icon they tap every day. Each of those three places enforces its own separate rules about shape, size, and file format — documented in three different places — and an icon built to satisfy one of them can simply fail to appear, or get badly cropped, in the other two.

What Google Search actually requires — and the one modern default that breaks it

Google's own Search Central documentation for favicons is specific about the numbers. It requires the image to be square (a 1:1 aspect ratio) and at least 8×8 pixels, and recommends going larger than 48×48 pixels “so that it looks good on various surfaces.” It also lists exactly which file formats Google Search will accept for a favicon: BMP, GIF, ICO, PNG, JPEG, PPM, and TIFF.

WebP is not on that list. That matters because WebP is the format most other image-optimization advice now pushes you toward for ordinary web photos — smaller files, same visual quality. If you apply that same default to your favicon, Google's own documentation says it won't be indexed for search results, even though it will keep showing up perfectly fine in the browser tab, because browsers and Google Search read the file through two completely separate systems. The same page adds two more easy-to-miss rules: Google Search only supports one favicon per site (where a “site” is defined by hostname), and the favicon's URL has to stay stable — changing it frequently, or letting it sit behind a path your robots.txt blocks, can also keep it from appearing.

Why the same icon can come out as a cropped circle on Android

Since Android 8.0, Android renders app icons in a mix of shapes — circle, rounded square, squircle — depending on the device and launcher, a system it calls adaptive icons. The Web App Manifest specification (the standard behind “Add to Home Screen” for websites) gives a site two ways to supply that icon. A regular icon, marked with purpose: "any", just gets resized and placed on a plain background box by Android — which is why a favicon reused as a home-screen icon can end up looking like it's sitting inside a little white card. A maskable icon, marked purpose: "maskable", removes that background box and lets Android crop the artwork directly into its native shape instead — but only safely if the important part of your logo stays inside a defined safe zone. The specification (documented by web.dev) draws that safe zone as a circle centered on the icon with a radius equal to 40% of the icon's width; content in the outer ring beyond that — roughly the outer 10% on each edge — can get clipped off entirely depending on the mask shape the device applies.

In practice, that means a logo designed to fill its square edge-to-edge — which looks correct as a plain favicon — is exactly the shape most likely to lose its corners the moment someone adds your site to their Android home screen as a maskable icon.

One icon file, two very different outcomes The artwork never changes — only whether format and safe zone were checked first One icon file (e.g. logo.png) Browser tab shows the icon either way Google Search result not indexed if saved as WebP, or if the URL keeps changing Android home screen icon edges clipped if the logo fills the whole frame Crop true square, logo inside the center ~80% Resize Favicon (512×512) / App icon (192×192) preset Convert PNG — not WebP Shows correctly in the browser tab, Google Search, and the Android home screen
The same source artwork either fails Google's format rule or loses its edges on an Android home-screen icon when exported without checking format and safe zone — or passes all three destinations when cropped with margin, resized to the right preset, and converted to PNG.

The sizes in practice

IconSizeFormatWhy
Browser tab / general favicon32×32, larger than 48×48 recommendedPNG or ICOGoogle: “larger than 48×48px so it looks good on various surfaces”
Google Search result iconsame file, square, ≥8×8PNG, ICO, GIF, BMP, JPEG, PPM, TIFF — not WebPGoogle Search Central's documented supported-format list
Apple touch icon (iOS home screen)180×180PNGLong-standing convention (60pt home-screen slot × 3x Retina) from Apple's archived Safari Web Content guide — Apple's current, actively maintained guidelines no longer publish this pixel table
Android / PWA manifest icon192×192 and 512×512, purpose: "any"PNGWeb App Manifest specification
Maskable Android icon512×512, logo inside the inner ~80%PNG, purpose: "maskable"Safe-zone spec: 40%-radius circle from center; outer ~10% may be cropped

Building the set with nearIMG

  • Start from a square source. If your logo isn't already 1:1, crop it to a true square first — feeding a non-square image straight into a fixed-size resize stretches it instead of cropping it.
  • Leave margin for the mask. If the output will ever be used as a maskable home-screen icon, keep the logo's main shape inside roughly the center 80% of the frame, per the 40%-radius safe zone above, so Android's circular or squircle mask doesn't cut into it.
  • Use the presets nearIMG already ships. The Social tool's preset list includes a “Web / Blog” group with a Favicon (512×512) preset and an App icon (192×192) preset built in, so you don't have to type the pixel numbers by hand for those two sizes; Resize covers the rest (32×32, 180×180) directly.
  • Convert to PNG explicitly, regardless of what format your source file started in. PNG is accepted by Google Search, by every browser's <link rel="icon">, and by the Web App Manifest spec — while WebP, the one format Google's own documentation leaves off its favicon list, is exactly what a lot of general image-export advice defaults to.
  • Because nearIMG runs this entirely in your browser, the source file — which may be an export from a brand kit you'd rather not upload anywhere — never leaves your device.

What this doesn't do

  • It doesn't package a multi-resolution .ico container. The old Windows-style .ico format can bundle several sizes (16/32/48px) into one file; nearIMG exports plain PNGs instead. That's sufficient for Google Search and for every modern browser's <link rel="icon" type="image/png">, but if your specific CMS insists on a single .ico, you'll still need a separate icon-packing tool for that one file.
  • It doesn't write the HTML or manifest entries for you. You still need to add the <link rel="icon">, <link rel="apple-touch-icon">, and the manifest's icons array yourself (or let your site builder do it) once the image files exist.
  • It doesn't preview the mask on a real device. To see exactly how your maskable icon will be clipped before you publish it, a dedicated previewer like the free maskable.app is the standard way to check.

The short version

Google's own Search Central documentation names exactly which favicon formats it indexes — BMP, GIF, ICO, PNG, JPEG, PPM, and TIFF — and WebP, the format most other image-optimization advice now recommends by default, isn't one of them. Separately, the Web App Manifest's maskable-icon specification requires a logo's important content to sit inside a safe zone equal to 40% of the icon's width from center, or risk losing its edges when Android crops it into a home-screen icon shape. Apple's 180×180 touch-icon convention, meanwhile, survives only in an archived developer guide, not Apple's current one. Cropping to a true square with margin, resizing with nearIMG's built-in Favicon and App icon presets, and converting explicitly to PNG covers all three destinations with the same source file.

Sponsored
← NearIMG

This page shows ads only if you consent.