Favicon Generator

Which Favicon Sizes You Need

Sixteen and thirty two cover the browser tab. Sixteen is the classic tab icon on a standard display and thirty two is what a retina screen uses for the same space, as well as what Windows shows in taskbar shortcuts.

One hundred and eighty is the iOS home screen icon. Safari looks for the apple touch icon at that size when someone adds your site to their home screen, and it is the one size where a transparent background is a genuine problem.

One hundred and ninety two and five hundred and twelve serve Android. The smaller one is the home screen icon and the larger one drives the install prompt and the splash screen, which is why a low resolution original shows up so obviously there.

Forty eight and ninety six fill in the gaps. Windows site shortcuts and older Android versions reach for these, and since they cost nothing to generate they are included rather than left out.

How to Use This Generator

Start with the largest source you have. An SVG is ideal because every size is rasterised cleanly from vectors. Failing that, a square PNG of at least five hundred and twelve pixels avoids the upscaling warning shown above.

Set the framing before you download. Padding, background colour and rounded corners apply to every size at once and the previews update immediately, so you can judge the sixteen pixel version rather than guess at it.

Take the ZIP unless you only want the ICO. The archive contains every PNG, the multi resolution ICO, the manifest and a short readme with the exact HTML, which is everything needed to finish the job.

Drop the files at your public root. They belong beside your home page, not in an images folder, because several clients request the paths directly regardless of what your HTML says.

Why the ICO File Still Matters

Browsers request it whether you link to it or not. A request for /favicon.ico is made automatically, and so is one from many feed readers, link previewers and crawlers. Not having the file means a stream of 404s in your logs.

An ICO is a container, not a single image. It holds several resolutions at once so the operating system can choose the one that matches the surface it is drawing, which is the whole reason the format outlived its era.

Renaming a PNG is not the same thing. Browsers are forgiving enough that it often appears to work, but you lose the multiple resolutions and some Windows contexts refuse it outright. The file produced here is a real ICO with three images inside.

PNG compression inside the container keeps it small. Storing each image as PNG rather than an uncompressed bitmap makes the file a fraction of the size, and has been supported since Windows Vista.

Designing for Sixteen Pixels

A shrunken logo is rarely a good favicon. Two hundred and fifty six pixels of detail become mud at sixteen. Take the single most recognisable element, usually one letter or one shape, and use that alone.

Contrast beats detail. At this size the eye reads a silhouette rather than a picture, so a bold shape against a plain field is legible where a delicate one disappears.

Remember the icon sits on two backgrounds. Browsers offer light and dark tab bars, so an icon that relies on white showing through vanishes for half your visitors. A solid background colour avoids the problem entirely.

Check the preview above, not your design file. The sixteen pixel version shown here is the real rendering, and it is the only reliable way to know whether your idea survives the reduction.

Apple Touch Icons and Transparency

iOS composites transparency onto black. A logo designed for a white page with a transparent background becomes an invisible mark on a black tile, which is the single most common favicon complaint.

Set a solid background before you download. The colour option above fills the whole square, so the touch icon has a deliberate ground rather than whatever the platform picks.

Do not round the corners yourself. iOS applies its own mask, so a pre rounded icon ends up with the rounding applied twice and a visible fringe. Leave the corner option off unless you are targeting a surface that does not mask.

Android Maskable Icons and Padding

Android crops your icon to whatever shape the launcher uses. Circle, squircle or rounded square, the outer region is discarded, and only the middle eighty percent or so is guaranteed to survive.

That is what the padding control is for. Ten to twenty percent keeps the logo inside the safe zone so no part of it is sliced off by the mask.

Padding costs you size in the tab. The same padding applies to the sixteen pixel icon, where every pixel counts, so it is a trade between the two surfaces rather than a free improvement.

The Web Manifest Explained

It tells the browser how to install your site. The manifest names the icons, the display mode and the colours used when your site is added to a home screen, and without it an install prompt will not appear at all.

The theme colour paints the browser chrome. On Android it tints the address bar and on installed apps it tints the title bar, so it should match your header rather than being left at a default.

The short name is what fits under the icon. Around twelve characters is the practical limit before truncation, which is why the manifest above trims it for you.

Serve it with the right type. A manifest should be served as application/manifest+json. Most servers get this right, but a misconfigured one leads to an install prompt that silently never appears.

Installing and Testing

Upload every file to the public root. That is the folder that serves your home page. Paths in the HTML and the manifest above all start with a slash on that assumption.

Favicons cache aggressively. A browser can hold an old icon for a long time, so test in a private window or append a query string such as ?v=2 to the link tags when replacing an existing icon.

Check more than your own tab. Look at a bookmark, a home screen shortcut on a phone and a link preview, since each uses a different file from the set and each can fail independently.

Common Mistakes to Avoid

Only providing one PNG. It covers the tab and nothing else, so the home screen icon falls back to a screenshot or a letter on both major mobile platforms.

Transparent apple touch icons. The result is a logo on a black square. Always give that one a solid background.

Putting the files in a subfolder without linking them. Automatic requests go to the root, so an unlinked icon in an assets folder is never found.

Generating from a small original. Upscaling to five hundred and twelve pixels produces a soft PWA icon that looks worse than having none. Start large, or start with vectors.

Frequently Asked Questions