favicon generator

How to use the favicon generator

  1. Upload a source image — SVG is ideal, PNG at 512×512 works too. Avoid JPG for favicons because of compression artifacts.
  2. Preview how the icon looks at 16×16 (browser tab), 32×32 (bookmarks bar), 180×180 (iOS home screen), 192×192 and 512×512 (Android home screen and PWA).
  3. Adjust padding, background color, and whether to mask the icon with a circle (iOS) or rounded square (Android adaptive).
  4. Download a zip containing every required file: favicon.ico, favicon-16x16.png, apple-touch-icon.png, site.webmanifest, and browserconfig.xml.
  5. Upload the zip contents to your site's root and paste the provided <link> tags into <head>.

When to use it

Generating a single favicon.ico from an image used to be enough, but modern browsers and mobile OSes want 6-10 separate files at specific sizes and formats. Hand-generating them is error-prone; the generator covers every current requirement automatically. Use RealFaviconGenerator for the absolute maximum platform coverage (Opera Coast, Yandex Tableau) if your analytics show traffic from those sources. Alternative: favicon.io handles the same baseline but doesn't generate the iOS mask variants.

Example

A 512×512 PNG input produces:

favicon.ico (multi-res: 16, 32, 48), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180×180), android-chrome-192x192.png, android-chrome-512x512.png, and a site.webmanifest with PWA icon references.

Frequently asked questions

Do I still need favicon.ico?
Yes — older browsers, email clients, and feed readers default to /favicon.ico. Keep it even if you also have PNG versions.
What's the difference between apple-touch-icon and android-chrome-192x192?
iOS uses the Apple touch icon for home-screen bookmarks. Android Chrome uses the 192×192 PNG. Both need to be ~180-192 CSS pixels and pre-composited (no transparency) for clean home-screen rendering.
SVG favicons — should I use them?
Yes for modern browsers. Add <link rel="icon" type="image/svg+xml" href="/favicon.svg"> alongside the PNG and ICO fallbacks. SVG scales crisply at any DPI.
Do favicons support dark mode?
Yes — use a single SVG with @media (prefers-color-scheme: dark) inside the SVG's <style> block. The icon adapts to the browser's theme.
How do I update a favicon after changing it?
Browsers cache favicons aggressively — up to 7 days. Force a refresh by appending a version query string (/favicon.ico?v=2) in the <link> tag.

Related tools

Last updated: 2026-04-22