Favicon Generator

Q: Do I still need favicon.ico?

Yes, as a fallback. Browsers and other tools request /favicon.ico from the site root regardless of what your HTML declares, and returning a 404 for it clutters your logs.

Favicon Generator at a glance

What it does: Turn a square image into every favicon size a modern site needs, packaged as a ZIP, with the exact HTML to add. Processed locally in your browser.
Where it runs: Entirely in your browser — no data is uploaded
Works offline: Yes, once the page has loaded
Cost: Free, with no account and no usage limit
Category: Design & Colors

How to use the favicon generator

Choose a square image, ideally 512 × 512 or larger. Non-square images will be distorted or cropped.
Generate the icon set and download the ZIP.
Upload the files to your site's root directory.
Add the link tags to your <head>.

The sizes and what uses them

Size	Used by
16 × 16	Browser tab and bookmark bar on standard displays.
32 × 32	Tabs on high-density displays, and Windows taskbar shortcuts.
180 × 180	Apple touch icon - iOS home screen.
192 × 192	Android home screen and PWA install prompt.
512 × 512	PWA splash screen and app listings.
favicon.ico	Legacy fallback. Browsers request `/favicon.ico` whether or not you declare it.

The HTML to add

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">

Modern browsers prefer the SVG when one is offered and fall back to the ICO otherwise. The Apple touch icon must be a PNG at 180 × 180; iOS ignores SVG here. Android reads its icons from the web app manifest rather than from link tags.

A minimal manifest:

{
  "name": "Your Site",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Designing an icon that works at 16 pixels

Sixteen pixels is roughly the size of a full stop in this paragraph. Almost nothing survives that reduction intact.

One shape or one letter. A full wordmark becomes an illegible smear. Take the initial, or the single most recognisable element of the logo.
High contrast, few colours. Two or three at most. Subtle gradients disappear entirely.
Fill the frame. Padding that looks balanced at 512 pixels leaves almost nothing visible at 16.
No thin lines. Anything under about 1/16th of the width vanishes or aliases into grey.
Check on both themes. Browsers show tabs on light and dark backgrounds, so a dark icon on a transparent background disappears in dark mode. An SVG with prefers-color-scheme can adapt.

Test by shrinking your design to 16 pixels on screen and stepping back from the monitor. If you cannot identify it, simplify further.

When the favicon will not update

Browsers cache favicons unusually aggressively, and a changed icon can persist for days. To force it: hard-refresh the page, then load the icon URL directly in a tab and refresh that. Adding a query string such as ?v=2 to the link tag reliably breaks the cache.

If it never appeared at all, check the basics: the file is at the path you declared, the server returns 200 rather than 404, and the content type is correct. A common failure is an SVG served as text/plain, which browsers refuse to render as an image.

Frequently asked questions

512 × 512 or larger, square, with the design filling most of the frame. Everything smaller is generated by downscaling, so starting large keeps the small sizes sharp.

Yes, as a fallback. Browsers and other tools request /favicon.ico from the site root regardless of what your HTML declares, and returning a 404 for it clutters your logs.

Favicon caching is stubborn. Hard-refresh, then open the icon file directly and refresh it, or add a version query string to the link tag.

Yes, and it is the sharpest option on modern browsers - it can even respond to dark mode. Provide PNG and ICO alongside it for iOS and older browsers.

No. Resizing and packaging happen in your browser using canvas and a local ZIP library, so an unreleased logo never leaves your device.

Nothing you enter here leaves your browser

Favicon Generator does its work in JavaScript running on your own device. The page loads once, and after that there is no upload step and no server involved — which matters here because images carry metadata, and unreleased artwork should not be uploaded to convert it.

You can verify this rather than taking our word for it: load the page, disconnect from the internet, and the tool keeps working. Our privacy policy sets out what is and is not collected, and this guide explains why the distinction matters.