Why Your Favicon Looks Blank or Cropped on Some Devices

A missing favicon doesn't announce itself. The site still works, every page still loads, and nothing in the console complains. What actually happens is quieter and worse: a blank gray square or the browser's default globe icon sits in the tab, in the bookmarks bar, in browser history, and on a phone's home screen if someone saves the site there - a small, constant signal that says "unfinished" to anyone who notices, which is more people than you'd expect.

Why one image file isn't enough

A single favicon.ico used to be the whole job. It isn't anymore. A modern site's icon set covers a browser tab (typically 16 and 32 pixels), an iOS home-screen shortcut (180 pixels, and it needs an opaque background - iOS renders transparent pixels as black), and the two sizes Android and progressive-web-app installs pull from a site.webmanifest file (192 and 512 pixels). Skip any one of these and the gap shows up in exactly the context that piece was meant for: fine in the browser tab, blank on an iPhone home screen; fine on desktop, missing from the Android app drawer after someone installs the site as an app.

Why it's invisible until someone hits it

Nobody checks their own site's favicon after the first week it's live - it sits in a part of the browser chrome people stop consciously looking at once it's familiar. The person who does notice is a visitor seeing the site for the first time, on a device or browser you didn't personally test on, at the exact moment a missing or wrong-sized icon reads as "does this site actually work." A blank tab icon on a search results page, sitting next to five competitors that all have one, is a small but real signal before anyone has read a word of the page itself.

The specific 180-pixel problem

Apple's touch icon is the one size in the whole set that behaves differently from every other. Every other slot - the browser tab, the Android icons - happily keeps a transparent background if the source has one. iOS does not: a transparent pixel in the 180-pixel slot renders as solid black on an iPhone or iPad home screen, not as see-through. A logo built with a transparent background - the normal, sensible way to build a logo - needs that one size specifically composited onto an opaque color before it's usable there, and it's the one detail that's easy to miss entirely if you're resizing by hand and testing only in a desktop browser, where transparency behaves exactly as expected everywhere else.

Why hand-resizing six images is worse than it sounds

Getting all of this right by hand means opening an image editor, resizing to each of six specific pixel dimensions, remembering which one needs an opaque background and which can stay transparent, packing three of them into a legacy multi-resolution .ico container (a binary format, not just a resized PNG with a different extension), writing a site.webmanifest file by hand, and then writing five separate <link> tags into the page's <head> in the right order with the right sizes attributes. Every one of those steps is a place to get a pixel dimension or a filename slightly wrong, and the failure mode - as above - is silent.

The .ico format is still real, not legacy cruft

It's tempting to assume a format from the Windows 3.1 era is dead weight in 2026, but favicon.ico is still what browsers request by default at a site's root before they've even parsed the page's <link> tags - a fallback that predates any of the manifest-driven icon systems and still runs first. A real .ico isn't a renamed PNG; it's a small binary container - a header naming how many images it holds, one directory entry per image recording that image's size and where its bytes start, followed by the images themselves back to back. Getting that structure right by hand, without a library, means writing raw bytes in the right order - the kind of detail that's easy to get subtly wrong (the wrong byte order, a miscounted offset) and see nothing about it until a browser silently refuses to render the icon at all.

What a generator actually saves you

The value isn't the resizing itself - any image editor can resize a PNG. It's doing all six sizes consistently from the same source, building the binary .ico container correctly, generating a manifest that actually references the right files, and handing back the exact HTML to paste rather than making you remember five separate tag formats and which one is deprecated. This site's favicon generator does the whole set in one pass, entirely in your browser - the source image is never uploaded anywhere, and the output is a zip you can drop straight into your site's root.