How to Generate Favicons for Every Browser

Favicon Generator is that pack step. SVG to PNG is the raster step when the source is vector. You do not need a brand-PDF upload or an account.

One source, many sizes

Start from a square asset. 512×512 or 1024×1024 is enough. Leave quiet padding - OS masks (circles, squircles) will clip the corners. A full-bleed letter that touches every edge will lose its corners on iPhone.

The 16×16 tab is the design constraint. If the mark is a detailed mascot, draw a simplified glyph for favicons and keep the mascot for the marketing hero. No generator can invent contrast that was not in the source.

Good source traits:

• Two or three shapes, not a landscape photo.
• Strong contrast on both light and dark browser chrome (test a dark tab bar).
• No tiny type. At 16px, letters become noise.

If you only have SVG, rasterize the sizes you need with SVG to PNG or feed the SVG into Favicon Generator when the tool accepts it. Keep the SVG for rel="icon" type="image/svg+xml" in browsers that support it.

ICO, PNG, SVG, and Apple touch

favicon.ico - multi-resolution container. Put it at https://example.com/favicon.ico as well as linking it. Bots and old clients request the root path by convention.

PNG - 32×32, 16×16, 48×48 are the usual tab/taskbar set. 192×192 and 512×512 show up in manifests.

SVG - sharp at any size, small on disk, can include a prefers-color-scheme pair if you author it that way. Not universal.

Apple touch icon - 180×180 PNG, rel="apple-touch-icon". iOS will add its own mask and sometimes a shine; design with that crop in mind. apple-touch-icon-precomposed is legacy.

Android / PWA - manifest.webmanifest icons array pointing at 192 and 512 PNG (and maskable icons if you support them, with extra safe padding).

The generator’s job is files. Your job is to host them on a stable path (/favicon.ico, /icons/…) and not 404 after a redesign.

The HTML and manifest you still have to write

A minimal head:

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

In the manifest, list src, sizes, type, and purpose (any / maskable). theme_color and background_color are separate from the image but affect the install splash.

Cache: hash the filenames or set a long cache on /icons/ and change the path when the mark changes. A year-long cache on /favicon.ico is how users keep the old globe after a rebrand - bust it when you ship a new ICO.

Contrast on a 16×16 tab

Browser chrome is gray, black, or a custom theme. A light-gray mark on a light tab disappears. A yellow mark on a white Windows taskbar disappears. Check:

• Chrome light and dark,
• Safari pinned tab (Safari can use a monochrome SVG / mask),
• a phone home screen on both wallpapers.

If the brand color fails at that size, use a dark tile with a light glyph, or the reverse. Color Studio is useful for picking a tile background that still matches the product.

Do not use the OG share image as the favicon. Different aspect ratio, different job.

How to generate without a brand-kit upload

1. Export a square PNG or SVG of the simple mark.
2. Open Favicon Generator and generate the pack.
3. If you need extra PNG sizes from SVG only, use SVG to PNG.
4. Commit files + link tags + manifest. Load the site, hard-refresh, confirm the tab.
5. Add a home-screen test on iOS/Android if you claim PWA support.

The image processing can stay in the browser. That is the point of these two tools.

What still breaks

Windows shortcuts that cached ICO. Safari’s separate pinned-tab SVG. Electron or in-app browsers that ignore everything but /favicon.ico. Corporate proxies that block SVG but allow ICO.

Ship ICO + PNG + SVG and you have covered the boring cases. Then stop adding sizes nobody requests.

Generate the pack, then write the HTML

Generate the pack in Favicon Generator. Rasterize from vector in SVG to PNG if needed. For the large share card, not the tab icon, use Open Graph Preview.