Favicon Generator

What is a favicon?

A favicon is the small icon shown in browser tabs, bookmarks, search results, and mobile home screens. It is the smallest piece of branding your site has - and it measurably affects click-through rate from search results.

Recommended favicon set in 2026

• favicon.svg - Used by modern browsers (Chrome 80+, Safari 12+, Firefox 41+). Scales without quality loss, and a single SVG can carry a dark mode variant via CSS media queries.
• favicon-32x32.png / 16x16.png - Standard browser tab fallback for environments without SVG support.
• apple-touch-icon-180x180.png - Used when iOS / macOS Safari users add your site to the home screen. The system rounds the corners automatically.
• android-chrome-192x192.png / 512x512.png - Referenced from your PWA manifest, used on Android home screens and splash screens.
• site.webmanifest - PWA (installable web app) metadata. This generator creates it automatically and bundles it in the ZIP.

HTML embed snippet

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

Browser & Platform Support

See which file is used where at a glance. ✅ Default / Fallback / ❌ Ignored.

Ship SVG as the default and PNGs as fallback and you're covered across every platform. You only need apple-touch-icon separately when users add your site to their iOS home screen.

Design principles for a favicon that actually reads

The hardest constraint is 16×16 pixels. Every design decision should be made at that size first, then scaled up - not the other way around. Detail that looks beautiful at 512×512 collapses into visual mush at 16×16.

• One idea, not three - A full logomark (wordmark + symbol + gradient) almost never survives scaling. Keep the single most recognizable element: a letter, a symbol, or a silhouette.
• Optical weight matters more than literal size - Thin strokes (1px at 32×32) disappear. Use at least 2 "pixels" of stroke width when designing at 16×16, or start from a rounded, filled shape instead of outlined.
• High contrast against both light and dark tabs - Chrome's active tab is light gray, Safari's tab group bar is nearly white, and dark-mode browsers invert that. A favicon with a white background disappears on dark mode tabs. Either use the dark mode SVG variant this tool generates, or choose a shape with strong outline contrast.
• Avoid thin text - Two letters is typically the readable limit at 16×16. Three characters will only work if they are extremely wide (H, M, W) and sit on a solid background.
• Test on a cluttered tab bar - Open 15 tabs and see if your favicon is findable at a glance. This is the real-world scenario that determines whether users recognize your site.

Common mistakes to avoid

• Shipping a low-res PNG only - Retina displays will blur it. Always provide either SVG or a 2x-resolution raster (e.g. 32×32 intended for 16×16 display).
• Forgetting apple-touch-icon - iOS falls back to a blurry screenshot of your homepage when users "Add to Home Screen". Provide a 180×180 PNG to prevent this.
• Relying on favicon.ico alone - Modern browsers support it, but you gain nothing (and lose SVG scalability, dark mode support, and crisp Retina rendering).
• Not declaring a MIME type - Some CDNs serve .svg as text/plain, which Safari refuses to use. Always set type="image/svg+xml" on the <link> tag, and verify your server responds with the correct Content-Type.
• Shipping a manifest without testing PWA install - A malformed site.webmanifest quietly disables Add-to-Home-Screen on Android Chrome. Use Chrome DevTools → Application → Manifest to validate.

Accessibility and dark mode

Browsers now increasingly render tabs in dark mode. A favicon that works only on white backgrounds becomes invisible to roughly one-third of users. Two strategies work:

• SVG with prefers-color-scheme media query - A single file that swaps fill colors automatically. Supported by Chrome, Edge, Firefox, and Safari 12.1+. This tool produces such an SVG when you toggle the "Dark mode SVG variant" option.
• Neutral-contrast design - Use shapes that read on both backgrounds: a colored disc with a transparent or dark center, a thick outline, or a solid block with an inverted letter. This avoids the need for a second file entirely.

To complete your site's SEO setup, add structured data with the JSON-LD Generator and configure crawler access with the Robots.txt Generator.

Favicon Troubleshooting Checklist

1. Browser cache

Favicons are cached very aggressively. Force-refresh with Ctrl+F5 (Windows) or Cmd+Shift+R (Mac), or open the page in an incognito window. In Chrome you can also enter chrome://favicon/your-site-url in the address bar to inspect it directly.

2. File path & 404

Open DevTools > Network, reload the page, and confirm that requests for favicon.svg / favicon-32x32.png return 200 OK. A 404 means the file isn't uploaded or the path is wrong. Files must sit at the site root (e.g. https://yourdomain/favicon.svg).

3. Declared correctly inside <head>

<link rel="icon" href="/favicon.svg" type="image/svg+xml"> must live inside <head>, and the type and href must match the actual file type and path. Use a root-absolute path (/favicon.svg).

4. Deployment delay

GitHub Pages, Vercel, and Cloudflare Pages can take a few minutes to propagate through their CDN cache after you deploy. Wait 5-10 minutes or manually purge the CDN cache.

5. iOS home screen icon looks wrong

Without an apple-touch-icon, iOS falls back to a screenshot of the page. Make sure you ship a 180×180 PNG at the root and declare it with <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png">. iOS rounds the corners automatically, so just provide a square image.

6. Not showing up in Google search results

Google can take days or even weeks to crawl and index a new favicon. Resubmitting your sitemap in Search Console can speed it up slightly, but ultimately you just have to wait.

FAQ

Are images uploaded here sent to any server?

No. This page (the spemer-utils favicon generator) does not send any uploaded image to a server. Every step runs locally in your browser via the Canvas API - images, generated PNG/SVG/ZIP files, and any other data never leave your device.

Which sizes do I actually need?

At minimum, ship favicon-32x32.png (browser tabs), apple-touch-icon-180x180.png (iOS home screen), and an SVG favicon. For PWAs, add the 192 and 512 sizes for the manifest.

Why is there no .ico file?

Modern browsers (Chrome, Safari, Firefox, Edge) all support PNG and SVG favicons. ICO is a legacy format for old IE; since 2020, PNG/SVG is sufficient.

Can I use non-Latin characters in text mode?

Yes. CJK characters, Latin letters, and emoji are all supported. We recommend 1-2 characters since longer strings lose readability at 16×16.

How are uploaded SVG files handled?

Uploaded SVGs are preserved as favicon.svg with zero quality loss. At the same time, we rasterize them on Canvas to generate all 6 PNG fallbacks (16/32/48/180/192/512) side by side.

How does the dark mode SVG variant work?

When you tick "Dark mode SVG variant" in text or emoji mode, we generate a single SVG file with an embedded @media (prefers-color-scheme: dark) CSS block. The colors switch automatically based on the user's OS / browser dark mode preference.