How to Generate a Favicon from a Logo (The Right Way)

For related fixes and guides, see our troubleshooting hub.

Favicons used to be one file: a 16×16 pixel favicon.ico. In 2026, doing it right means generating six different files plus an HTML snippet plus a webmanifest. The good news: it's still a one-step job if you use the right tool.

Here's the full modern favicon setup.

What You Actually Need in 2026

A complete favicon set covers:

File	Sizes	Used by
`favicon.ico`	16, 32, 48 (multi-size)	Legacy browsers, IE, Windows
`favicon-16x16.png`	16×16	Modern browsers (tab icons)
`favicon-32x32.png`	32×32	Modern browsers (high-DPI tabs)
`apple-touch-icon.png`	180×180	iOS home screen
`icon-192.png`	192×192	Android, PWA
`icon-512.png`	512×512	PWA splash screens
`site.webmanifest`	(config)	Progressive Web Apps

That's the full set. Skipping any of them creates visible bugs:

No apple-touch-icon.png → blurry icon when iOS users save your site to home screen
No 192/512 PNGs → no PWA installation prompt
No favicon.ico → broken icon in older browsers
No webmanifest → "Add to Home Screen" doesn't show your site name and theme

Step 1: Start with the Right Source

The source image determines quality. Best results come from:

A square image non-square gets centred or stretched
At least 512×512 pixels anything smaller gets blurry when scaled up
SVG or high-resolution PNG both scale down cleanly
Simple design favicons render at 16 pixels; intricate detail disappears

Logos with text often don't favicon well the text becomes unreadable at 16px. Consider using just the symbol or initial.

Step 2: Use a Favicon Generator

Manually creating six PNG sizes plus a multi-size ICO is technically possible but tedious. The favicon generator does the whole thing in one upload:

Upload your source image (PNG, JPG, or SVG)
Click Generate
Download each PNG and the favicon.ico individually, or grab the lot

The tool runs entirely in your browser. Your logo never gets uploaded to a third-party server (which matters for unreleased branding).

Step 3: Add the HTML to Your `<head>`

Paste this into the <head> of your HTML (the favicon generator gives you this snippet automatically):

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Place the files at the paths shown typically directly in your web root (/).

Step 4: Create the Web Manifest

The site.webmanifest file tells browsers and PWAs how to handle your site when installed:

{
  "name": "Your Site Name",
  "short_name": "YourSite",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000"
}

Customise name, short_name, background_color, and theme_color to match your brand. Save as /site.webmanifest in your web root.

Step 5: Test Your Favicon

After deploying:

Browser tab. Open your site in a fresh tab. Refresh hard (Ctrl+Shift+R) to bypass cache. Check the icon shows.
iOS home screen. On an iPhone, open the site in Safari, tap Share → Add to Home Screen. The 180px icon should appear.
Android home screen. Same flow on Android Chrome.
Different browsers. Test Chrome, Firefox, Safari, Edge different browsers cache favicons differently.

If the icon doesn't update after a deploy, browser caching is almost certainly to blame. A hard refresh fixes it for you; for users, the cache will expire eventually.

Common Mistakes

Using a PNG instead of an ICO for the .ico file

Some old generators serve a renamed PNG as favicon.ico. This works in modern browsers (which are forgiving) but breaks in older browsers and Windows shortcuts that need a real ICO file. The favicon generator creates a proper multi-size ICO.

Single-size ICO

A favicon.ico containing only a 16×16 image looks blurry on retina displays. A multi-size ICO (16, 32, 48) lets the browser pick the appropriate size. This is what proper generators produce.

Forgetting the apple-touch-icon

If iOS users add your site to their home screen and you didn't provide an apple-touch-icon.png, iOS uses a screenshot of your site usually unreadable at icon size.

Wrong manifest path

The <link rel="manifest" href="..."> path must be correct, and the manifest itself must be served with Content-Type: application/manifest+json (or application/json works too in most browsers).

Designing for desktop only

A favicon that looks good at 32×32 might be unrecognisable at 16×16 on a busy tab bar. Always check how your icon renders at the smallest size.

Optimization Tips

Keep file sizes small

Favicons load on every page. A 50 KB apple-touch-icon is wasted bandwidth on every page view. Aim for:

favicon.ico: under 20 KB
16×16 / 32×32 PNG: under 2 KB each
180×180 apple-touch-icon: under 15 KB
192×192 PWA icon: under 20 KB
512×512 PWA icon: under 50 KB

The JPG compressor and WebP converter can help if your icons are oversized after generation.

Use SVG when possible

Modern browsers support SVG favicons:

<link rel="icon" type="image/svg+xml" href="/favicon.svg">

A single SVG scales perfectly to any size and is usually smaller than the PNG equivalent. Combine with the PNG fallbacks for older browsers.

Use the favicon generator to produce the full set in one upload. Drop in your source image, download every file, paste the HTML snippet. Five minutes of setup that makes your site look professional everywhere.