Favicon Generator

Sixteen pixels is the classic tab size and still what a browser draws in a crowded row of tabs, but it stopped being the only one long ago. Thirty-two is used on high-density screens and by some bookmark and taskbar shortcuts, 48 turns up in shortcut and history views, and 180 is what iOS wants for a home screen icon. Handing over one large PNG and letting every surface resize it does work, but the small end comes out muddy, because a downscale done at render time has no idea which details mattered.

Every current browser reads a PNG named in a link tag, so an .ico is no longer needed for the tab to work. Browsers still request /favicon.ico by default when a page names no icon at all, so a file at the root is a cheap fallback that stops a trickle of 404s in your logs; and the .ico container can hold several sizes in one file, which was the original point of it. Output here is PNG only, so if something in your stack insists on the format, you need a converter that writes .ico.

Favicons are cached harder than almost anything else on a site, and an ordinary reload will often not shift one. Check the path first: the tags copied here point at /favicon-16.png and its siblings at the root of the domain, so if your files sit in an assets folder or the site is served from a subpath, the URLs are wrong and the browser falls back silently. Then open the icon URL directly. If that 404s the problem is deployment rather than caching; if it loads, force a refresh and try a private window.

Tapping Add to Home Screen on an iPhone makes iOS look for a link tag with rel=apple-touch-icon rather than the ordinary favicon, and 180 by 180 covers the largest size recent devices ask for. Treat it as a different design job from the tab icon. It is rendered large, next to real apps, and iOS rounds the corners itself, so anything in the corners gets clipped. Transparency is the other trap: a touch icon is composited onto a solid background rather than left see-through, so a mark relying on the wallpaper showing through arrives on black.

Yes, and it is the quickest way to get an icon that is not a grey square — the text field takes an emoji as readily as a letter. The catch is that it is drawn with whatever emoji font your own operating system provides, and those differ: the same character is one drawing on macOS and another on Windows. Whichever your machine has is baked into the PNG, which is fine — the file is then fixed and every visitor sees the same picture. Choose one with a solid silhouette; fine detail dissolves at 16 pixels.

It depends on what sits behind it, and tab strips are no longer reliably light. A dark glyph on a transparent background disappears against a dark browser theme, which is why most sites ship an icon carrying its own background — a coloured square or circle — rather than a bare logo. Text mode fills the shape you choose behind the character, and the area outside a rounded or circular shape stays transparent, so the icon reads as a badge rather than a rectangle. An uploaded image keeps whatever transparency it arrived with, since nothing is painted behind it.

No, and there is no upload step for it to go through. Each icon is produced by drawing into a canvas in the page and reading the pixels back as a data URL, so what a Download link hands you is a string the browser built locally. A dropped file is read through an object URL made from the copy on your own disk, and that URL is released the moment the image finishes decoding. Nothing is kept between visits, so closing the tab is all it takes to be rid of the lot.

Not for ranking, but they are visible. Google shows a site icon beside results on mobile, and its guidance asks for a square image whose dimensions are a multiple of 48 pixels, reachable by its crawler and stable rather than swapped every week — which makes the 48-pixel file the useful one to point at. The larger effect is on people rather than crawlers. A distinctive icon is what someone scans for among twenty open tabs, in a bookmark list and in history, and a default grey page reads there as unfinished.