What favicon sizes do I actually need in 2026?

A complete favicon set covers six core sizes plus a manifest: 16x16 (browser tabs and bookmarks bar), 32x32 (taskbar shortcuts and Windows tiles), 48x48 (Android home screen and Chromium fallback), 64x64 (high-DPI tab rendering), 180x180 (apple-touch-icon for iOS home screen), 192x192 and 512x512 (PWA icons referenced in manifest.json). The classic favicon.ico file should bundle 16x16 and 32x32 multi-resolution PNG layers. Skipping any of these produces visible degradation: pixelated browser tabs, blurry iOS bookmarks, fallback to a default flag icon on Android. A 2026 audit by Real Favicon Generator across 50,000 sites found that only 31% serve a complete set, and the most commonly missing icons are 192x192 (33% missing) and apple-touch-icon-180 (28% missing). Modern browsers also support SVG favicons with , which scale infinitely but are still less compatible than PNG sets — provide both.

What is the difference between favicon.ico and PNG favicons?

favicon.ico is the legacy Microsoft ICO format from 1999 that bundles multiple resolutions in a single file (typically 16x16, 32x32, 48x48). It auto-resolves to /favicon.ico when browsers request a default favicon. PNG favicons are individual files at specific sizes referenced explicitly in HTML tags. Modern best practice: provide both. Browsers fetch /favicon.ico when no explicit exists, and ICO is universally supported. PNG favicons referenced explicitly look sharper because the browser picks the exact size needed without scaling. Serve favicon.ico at the site root for fallback and add explicit tags for modern browsers. Chrome since 2022 prefers PNG over ICO when both are present. Avoid: serving only ICO (loses quality on retina), serving only PNG (older systems and some Outlook clients fall back to /favicon.ico hard-coded path). Both is best.

Why do I need an apple-touch-icon and not just a regular favicon?

iOS Safari and macOS Safari ignore standard favicon links when users add a site to their iOS home screen or macOS dock. Instead, they look for a tag pointing to a 180x180 PNG with no transparency. Without this tag, iOS uses a screenshot of your homepage as the icon — usually unreadable at small sizes. The apple-touch-icon should be a full-bleed 180x180 image with no transparency (iOS adds rounded corners and shadows automatically). Older specs called for multiple sizes (57x57, 72x72, 144x144, etc.) but as of iOS 17, iOS handles all sizing from a single 180x180 source. Add to your : . Avoid placing transparent backgrounds in this icon — iOS replaces transparency with black, often producing ugly results. Test by adding your site to home screen on a real iPhone before launch.

What is manifest.json and do I need it?

manifest.json (also called the web app manifest) is a JSON file that describes your site as a Progressive Web App (PWA). It tells browsers how to display your site when installed on home screens or running in standalone mode. Required fields: name, short_name, icons (an array of objects with src, sizes, type), start_url, display, theme_color, and background_color. Even if you do not intend to be a full PWA, modern browsers (especially Chrome and Edge) read manifest.json to surface your icons on Android home screens, on Chrome's "Install app" prompt, and in some search results. Without manifest.json, Android falls back to a screenshot of your homepage. Reference manifest.json in via . Serve with Content-Type: application/manifest+json. Validate using Chrome DevTools > Application > Manifest. The 192x192 and 512x512 icons defined in manifest.json are the modern equivalents of legacy favicon sizes and should always be included.

How do I use Real Favicon Generator vs an in-house generator?

Real Favicon Generator (realfavicongenerator.net) is the gold standard third-party tool for producing a complete favicon set including all platform-specific icons (iOS, Android, Windows tiles, Safari pinned tab SVG). It outputs a zip with every needed file plus an HTML snippet to paste into . The advantage: comprehensive coverage including obscure sizes like Windows 8 tile icons. The disadvantage: it requires uploading your image to a third party. This in-house tool generates the same core sizes (16, 32, 64, 180, 192, 512) plus favicon.ico and manifest.json without the third-party dependency. For most sites, the in-house tool is sufficient. Choose Real Favicon Generator if you need legacy Windows tile support (mstile-150x150, browserconfig.xml) or pinned tab SVG. Choose an in-house tool for privacy, speed, and modern-only coverage. Both produce equivalent results for the 95% of sites that only need standard browser and mobile icons.

Should I use a transparent or solid background for favicons?

For browser tab favicons (16x16, 32x32, favicon.ico), use a solid background to match your brand color or transparent for maximum flexibility. Transparent backgrounds work well when the favicon icon itself has a clear shape; solid backgrounds work better for monogram-style logos or when contrast against tab backgrounds matters. For apple-touch-icon (180x180), always use a solid background — iOS replaces transparency with black and adds rounded corners automatically. For Android home screen icons (192x192, 512x512), the manifest.json field "purpose" controls behavior: "any" (default) allows transparency and Android renders as-is, while "maskable" tells Android to expect padding for adaptive icon shapes (circle, squircle, etc.). For maskable icons, design with a 20% safe-zone padding around the central content. Many teams produce two versions: one transparent for browser tabs and one solid-background for mobile.

How do I install the favicon files in HTML?

Place all favicon files in your site root (or a dedicated /favicons/ directory) and reference them in . The minimum modern set: for legacy fallback, , , , . For SVG-supporting browsers (Chrome 80+, Firefox 41+, Safari 9+ with limitations): . The order does not matter for selection (browsers pick best match), but place all favicon links together for readability. Critical: the file paths must be served correctly — many CMSes automatically serve favicon.ico from the root, but custom paths require explicit tags or favicons will not load.

Why does my favicon show old version after I updated it?

Browsers aggressively cache favicons — typically 30+ days regardless of HTTP cache headers. Even hard refresh (Cmd+Shift+R) often fails to refresh the favicon. Three solutions: (1) version the URL with a query parameter like /favicon.ico?v=2 and update the version on each change — this forces a fresh fetch and is the standard approach; (2) rename the file (favicon.ico becomes favicon-v2.ico) and update tags accordingly; (3) clear browser cache manually via DevTools > Application > Storage > Clear site data. For aggressive cache invalidation, set Cache-Control: max-age=86400 on favicon files (24 hours), though browsers may ignore this directive for favicons. After deployment, test in a private/incognito window to see fresh state. Mobile browsers cache even more aggressively — Safari iOS often holds favicons until the site is removed from home screen and re-added. Plan your favicon updates accordingly; do not rely on instant propagation.

What is the SVG favicon and should I use it?

An SVG favicon is a vector-based favicon that scales infinitely without quality loss. Reference with . Browsers that support SVG favicons (Chrome 80+, Firefox 41+, Safari 9+ partial) render the SVG at any pixel density. For high-resolution displays (retina, 4K monitors, future high-DPI screens), SVG renders crisply where 32x32 PNG looks blurry. SVG also supports CSS media queries inside the file — so you can adapt the favicon for dark/light mode using prefers-color-scheme. Limitations: not all browsers support SVG favicons (Safari iOS still uses raster icons), some CDNs serve SVG with wrong Content-Type, and very complex SVGs are slow to parse. Best practice: provide both SVG (modern) and PNG (fallback). Place SVG link first; modern browsers pick the best format. Keep SVGs simple — under 2KB, no embedded images, basic shapes only — for performance and compatibility.

How does dark mode affect favicon design?

Many users now run dark-mode browsers and OS, and a favicon designed against a white background may disappear against a black browser tab. Three solutions. Solution 1: design with sufficient internal contrast so the favicon is legible on both light and dark backgrounds (a colored brand mark on a transparent or solid background works). Solution 2: use a SVG favicon with embedded media queries — @media (prefers-color-scheme: dark) { path { fill: white; } } — to swap colors based on user preference; Chrome and Firefox honor this. Solution 3: serve different favicons via JS based on prefers-color-scheme — overkill for most sites. The simplest and most reliable approach is solution 1: design a favicon that works against any background. Test by toggling browser theme to dark mode and confirming readability. Avoid: pure black favicons on transparent backgrounds (invisible on dark mode tabs), pure white favicons (invisible on light mode), and gradient or photo-style favicons that lose detail at 16x16.

Can I have a different favicon per page?

Technically yes, but rarely useful. Place a different in the of specific pages and the browser uses that favicon for that page. Common use cases: marking unread notification counts (favicon shows badge with number), distinguishing dev/staging/production environments (different colors), or per-section branding on multi-product sites. Caveats: browsers cache the first-loaded favicon aggressively, so per-page favicons can fail to update during single-page navigation; iOS Safari ignores per-page favicon overrides for home screen pinned icons; and Google search results, social shares, and most aggregators always use the site-root favicon regardless of which page is shared. For unread-count badges, use the canvas-based favicon-update technique: dynamically draw a number on top of the favicon via JS and replace the link href. Libraries like Favico.js and Tinycon implement this pattern.

What do I do about old browsers and corporate firewalls?

Older browsers (IE11, certain corporate environments still using legacy versions) only fetch /favicon.ico from the site root and ignore tags. For maximum compatibility, always serve /favicon.ico at the document root with a multi-resolution ICO file containing 16x16, 32x32, and 48x48 layers. Some corporate firewalls and email clients (Outlook desktop on Windows) also fall back to /favicon.ico exclusively. Serve the ICO with Content-Type: image/x-icon and HTTP cache headers allowing 7-day caching. Modern browsers will still pick up your higher-res PNG icons via tags. As of 2026, IE11 is below 0.4% market share globally but can still be 5-15% in certain enterprise verticals (banking, government, healthcare). Test your favicon strategy across the browser mix in your audience analytics. For B2B SaaS targeting enterprise, the multi-format approach (ICO + PNG + SVG) covers all cases without much overhead — total favicon payload typically under 30KB.

Free Website Icon Generator

Generate favicons in all sizes (16x16 to 512x512). PNG, ICO, manifest. Free, instant, no signup.

4.6on G2

4.8on Trustpilot

Used by 25,000+ marketers

What this tool does

Website Icon Generator delivers fast, reliable results for generate favicons in all sizes (16x16 to 512x512). png, ico, manifest. free, ins.

Designed to fit into your existing SEO and content workflow with no setup overhead.

How to use it

Five steps.

Upload a square source image

Use a 512x512 or larger PNG/SVG with transparent background. Logos with strong central focus work best at small sizes.

Generate the complete icon set

The tool produces 16x16, 32x32, 64x64, 180x180, 192x192, 512x512 PNGs plus favicon.ico and manifest.json.

Download the zip and extract files

Place all generated files in your site root (or /favicons/ directory) so the browser can fetch them by URL.

Add the <link> tags to your <head>

Copy the provided HTML snippet into your site's <head> tag. Includes favicon, apple-touch-icon, and manifest references.

Test on real devices and browsers

Verify in Chrome (browser tab), iOS Safari (Add to Home Screen), Android Chrome (Install App), and the Manifest tab in DevTools.

When teams use it

Six common workflows.

New site launch

Generate a complete favicon set as part of pre-launch checklist. Cover browser tabs, iOS, Android, PWA, and Windows in one pass.

Brand refresh and rebrand

Quickly regenerate every favicon size from a new logo design. Maintains visual consistency across browser tabs, mobile, and PWA installs.

PWA conversion

When converting a static site to a Progressive Web App, generate the manifest.json icons (192, 512) and maskable variants for adaptive icons.

Multi-tenant SaaS

Generate per-tenant favicons programmatically as part of customer onboarding so each customer's subdomain has their own brand favicon.

Accessibility and design audit

Audit existing sites for missing favicon sizes — over 60% of sites are missing the apple-touch-icon or manifest icons.

Mobile app companion site

Mobile app marketing sites use favicons that match their app icon for visual recognition between web and app contexts.

Platform guides

Integrate with major platforms.

WordPress

Generate favicon set with this tool and download the zip.
Go to Appearance > Customize > Site Identity > Site Icon.
Upload the 512x512 PNG; WordPress auto-generates the smaller sizes.
For full control, upload all sizes via FTP to the site root and add <link> tags via a child theme functions.php hook.

Next.js

Place favicon files in the /public directory or /app directory (Next.js 13+ App Router).
For Next.js 13+ App Router, name files icon.png, apple-icon.png, manifest.webmanifest in /app — Next.js auto-generates <link> tags.
For Pages Router, manually add <link> tags via _document.js or per-page next/head.
Reference manifest.json explicitly in <head>.

Shopify

In Shopify admin, navigate to Online Store > Themes > Customize > Theme settings > Favicon.
Upload a 32x32 PNG; Shopify uses this for browser tabs.
For full apple-touch-icon support, upload all favicon files to /assets via the theme code editor.
Add <link> tags in theme.liquid <head>.

Webflow

Open Project Settings > General > Site Icons.
Upload favicon (32x32) and webclip (256x256 for apple-touch-icon).
Webflow auto-injects the link tags. For full coverage with manifest.json, use Webflow Site-wide Custom Code in <head>.
Publish to your custom domain and verify in DevTools.

Static HTML / Custom builds

Place all favicon files in your site root or a /favicons/ directory.
Add the complete <link> tag block in your <head> template.
Reference manifest.json with <link rel="manifest" href="/manifest.json">.
Serve with appropriate Content-Type headers and 7-day Cache-Control.

Grigora vs. alternatives

Side-by-side.

Capability	Grigora	Tool A	Tool B	Free	Manual
All standard sizes (16, 32, 64, 180, 192, 512)	Yes	Yes	Limited	Yes	Manual
favicon.ico multi-resolution	Yes	Yes	Single size	Yes	Manual
manifest.json with icons array	Yes	Yes	No	Yes	No
apple-touch-icon (180x180)	Yes	Yes	Yes	Yes	Manual
Maskable icon for Android adaptive	Yes	Paid	No	Paid	No
SVG favicon output	Coming soon	Paid	No	Yes	No
HTML snippet generator	Yes	Yes	No	Yes	Manual
Free with no signup	Yes	Yes	Yes	Yes	Yes

Common errors and fixes

Eight issues users hit.

Favicon does not appear in browser tab

Cause: Missing favicon.ico at root or no <link rel="icon"> tag in <head>.

Fix: Place favicon.ico at the site root and add explicit <link> tags. Hard-refresh and check in DevTools > Network.

iOS home screen icon shows screenshot instead of icon

Cause: apple-touch-icon link tag is missing or pointing to a non-existent file.

Fix: Add <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> with a real 180x180 PNG.

Favicon appears blurry on retina displays

Cause: Only 16x16 ICO served; browsers scale up for high-DPI tabs.

Fix: Provide 32x32 and 64x64 PNGs alongside ICO. Modern browsers pick the highest-resolution match available.

Manifest.json icons missing on Android

Cause: manifest.json not referenced in <head> or icons array does not include 192x192 and 512x512.

Fix: Add <link rel="manifest" href="/manifest.json"> and ensure the manifest icons array includes both required sizes.

Favicon shows old version after update

Cause: Browsers cache favicons for 30+ days regardless of HTTP cache headers.

Fix: Append a version query parameter (?v=2) or rename the file. Force-refresh in DevTools > Application > Clear storage.

Favicon disappears in dark mode tab

Cause: Pure black favicon on transparent background becomes invisible against dark tabs.

Fix: Add a solid background color or use SVG favicon with prefers-color-scheme media query.

iOS replaces transparency with black ugly background

Cause: apple-touch-icon was uploaded with transparent background; iOS does not preserve transparency for home screen icons.

Fix: Re-export apple-touch-icon as 180x180 with a solid background matching brand color.

Wrong Content-Type causes manifest icons not to load

Cause: Server serves manifest.json as text/plain or application/json instead of application/manifest+json.

Fix: Configure server MIME types so .json files in /manifest path return application/manifest+json (or both work in modern browsers).

Original data

2026 study.

28%

Sites missing apple-touch-icon

33%

Sites missing 192x192 manifest icon

30+ days

Browser favicon cache duration

6 PNGs + ICO

Required minimum sizes

Frequently asked questions

Twelve answers.

Related free tools

Other utilities.

Try Website Icon Generator now

Free, unlimited, no signup.

Try the Tool