Question 1

Do I still need favicon.ico in 2026?

Accepted Answer

Yes, but not for the reason people assume. Every current browser prefers the PNG or SVG you declare with a link tag, so the .ico is not what shows in a modern tab. It stays because anything that was not given a link tag falls back to requesting /favicon.ico from the site root by name: RSS readers, link previews in chat apps, crawlers, older browsers, and any page of yours that ships without the head snippet. It costs a few kilobytes and removes a class of missing-icon bugs, so it is in the package.

Question 2

Why does one .ico contain three sizes?

Accepted Answer

ICO is a container rather than an image format, and that is the whole point of it. A single file holds several complete images, and each consumer picks the entry closest to the size it needs instead of resampling. 16 covers a browser tab, 32 covers the bookmark bar and a tab on a high-density screen, and 48 is what Windows uses for a desktop shortcut and the taskbar. A 16 pixel icon stretched to 48 by Windows looks exactly as bad as it sounds, which is why the entry is there.

Question 3

What size should my source image be?

Accepted Answer

512 pixels on the short side or more, and square if you can manage it. The largest file produced is 512 × 512 for the Android splash screen, so a source below that is being enlarged and will look soft in that one place, which the tool tells you about. Vector is better still: an SVG is redrawn at each output size, so every file is as sharp as the geometry allows and there is no upper limit to worry about. If your image is not square, choose whether it is cropped to fill or fitted whole with space at the sides.

Question 4

Should the background be transparent?

Accepted Answer

For the tab icon, usually yes: it sits on the browser's own tab color, which differs between light and dark themes and between browsers, so a baked-in white square is visible as a square. iOS is the exception and it is the reason for the extra checkbox here. A home-screen icon on iPhone is composited onto black rather than onto your page, so a transparent apple-touch-icon arrives as artwork floating on a black tile. Leaving the fill ticked gives that one file a solid background while the rest stay transparent.

Question 5

What is site.webmanifest for?

Accepted Answer

It is what Android and Chrome read when someone adds your site to a home screen: which icons to use at 192 and 512, the name to print under them, the color of the status bar, and whether it opens in a browser frame or standalone. Without it, Android takes a guess from the page and usually gets the name wrong. The file in your package is filled in from the site name and theme color you set here, and it is plain JSON, so anything else you want to add later goes straight in.

Question 6

Why does my icon look like a smudge at 16 pixels?

Accepted Answer

Because 256 pixels is not much room for a drawing. Detail that reads at 512 — thin strokes, an outline, a tagline, a gradient, anything with more than two or three shapes — dissolves into grey at 16, and no rendering trick recovers it. The fix is editorial rather than technical: crop to the single strongest element of your logo, usually one letter or one symbol, and let the shape carry it. The tab mockups are there so you find this out before you ship rather than after.

Question 7

Do I need a separate SVG favicon?

Accepted Answer

It is worth having, and if you upload an SVG the package includes it, with the link line added to the snippet. A vector favicon is drawn at whatever size the browser needs and never gets a resampled edge, which is the one thing PNG cannot promise across screen densities. Firefox, Chrome and Edge all support it; Safari does not, which is why the PNG and ICO files stay in the set as the fallback rather than being replaced by it.

Question 8

Where do the files go?

Accepted Answer

In the folder your site is served from, so that each one answers at the root: /favicon.ico, /favicon-32x32.png, /apple-touch-icon.png, /site.webmanifest and the rest. That is what the paths in the head snippet point at, and it is also where a browser looks for favicon.ico with no help from you. On most frameworks that folder is public, static or www. If you serve the site from a subfolder, change the leading slash in the snippet to match, or the links resolve to the wrong place.

Question 9

I replaced my favicon and the old one is still showing.

Accepted Answer

Favicons are cached harder than almost anything else a browser stores, and a plain reload usually will not clear one. Open the file directly — yoursite.com/favicon.ico — and reload that, which fetches it outside the page cache, then reload the page. Failing that, add a query string to the link in your head, as in /favicon.ico?v=2, which makes it a new URL as far as the cache is concerned. Google's crawler is slower still and can take days to update the icon in search results.

tooldura

Favicon Generator

About Favicon Generator

How to use Favicon Generator

Frequently Asked Questions