Skip to main content

Favicon Generator

What it does

The Favicon Generator turns one source image (PNG, JPG, or SVG) into the set of resized PNGs every modern browser, iOS device, Android home screen, and PWA manifest expects. It outputs six standard sizes — 16, 32, and 48 for browser tabs and bookmarks; 180 for the Apple Touch icon; 192 and 512 for Android and PWA — plus copy-ready HTML link tags and a web-app manifest icons fragment. Fit modes (cover or contain) and an optional background colour handle the awkward case of non-square logos that need a frame.

Common situations

You’re launching a new site and the favicon work has been delayed because nobody on the team feels confident handling the matrix of sizes and platform conventions. The site shipped with the default browser globe icon for a week before anyone noticed. Generating the proper set takes ninety seconds; matching the brand to every browsing surface from one source removes the awkward “we’ll fix it next week” backlog item.

You’re rebranding and the favicon is one of the small details that tends to lag the rest of the launch. The new logo lives on the homepage; the old logo lives in browser tabs, bookmarks, iOS home screens, and PWA installations of users who installed the site months ago. Replacing the favicon set produces immediate cohesion across all those surfaces.

You’re building a PWA-first product where the home-screen icon is functionally equivalent to the app icon for users who install via “Add to Home Screen”. The 180×180 Apple Touch icon and 192/512 Android icons matter as much as the iOS App Store icon would for a native app — they are the brand mark users see when they reach for the app.

You’re auditing a multi-tenant SaaS where each customer can configure their own brand. Each tenant’s favicon set needs to be generated from the customer’s logo upload; doing that manually does not scale. The generator answers per-customer; the bigger question is automating the generation as part of the customer onboarding flow.

You’re producing brand documentation that needs to specify exactly which favicon sizes the brand provides. A handover deliverable that includes the six PNGs plus the HTML and manifest snippets is more useful to the receiving developer than “use the logo as the favicon”.

What you need to know

A modern site needs more than one favicon. Browsers tabs use 16×16 or 32×32 (32 on retina displays). Bookmark exports often use 48×48. iOS Safari’s “Add to Home Screen” uses Apple Touch icon at 180×180. Android home screens and PWA installations use 192×192 and 512×512. The total set of six covers every typical use case; missing any of them produces fallback behaviour that is rarely the brand wanted.

The legacy .ico format is no longer required. Modern browsers accept <link rel="icon" type="image/png"> and prefer the larger PNG over a multi-resolution .ico. Some legacy systems (older Outlook, ancient corporate proxies) still expect favicon.ico at the document root; if you need one, ImageMagick can bundle the 16 and 32 PNGs into one with convert favicon-16.png favicon-32.png favicon.ico. The tool does not generate .ico directly because it is rarely necessary in 2026.

SVG favicons (specified via <link rel="icon" type="image/svg+xml">) are supported by every modern browser. They render at any size, scale crisply, and can adapt to dark mode using CSS media queries inside the SVG itself. For sites with a logo that already exists as SVG, the SVG-favicon-plus-PNG-fallback approach produces sharper output at unusual zoom levels than rasterised PNGs. The tool generates PNGs only; SVG favicons are typically the original logo file copied to /favicon.svg rather than a derived asset.

For PWA installation, the maskable icon convention adds 10% safe-zone padding so platforms can crop the icon into different shapes (circle, squircle, rounded rectangle) without losing the visible mark. The tool’s “cover” fit mode plus 10% padding produces maskable-safe output; “contain” mode with brand background also works.

Apple’s Touch icon at 180×180 has historically been the most under-specified — even sites with full favicon sets often omit it. Many homescreen-installed iOS sites display the default screenshot or a generic icon because of this. Including the 180px size in every favicon generation removes the issue.

Browser caching is aggressive on favicons — sometimes painfully so. Updating a deployed favicon may not appear in browser tabs for days. Hard-refresh, cache-clear, or version the filename (favicon-v2.ico) to force the update.

Frequently asked questions

What favicon sizes do I need in 2026?

Six sizes cover all modern surfaces: 16×16 and 32×32 for browser tabs, 48×48 for bookmarks, 180×180 for Apple Touch (iOS home screen), 192×192 and 512×512 for Android and PWA. Beyond these, the legacy .ico is no longer required for modern browsers.

Do I still need favicon.ico?

Generally no. Modern browsers prefer <link rel="icon" type="image/png"> and accept any size you specify. The legacy .ico is only relevant for very old systems; if you need one, generate it via ImageMagick from your 16 and 32 PNGs.

What’s the difference between a favicon and an Apple Touch icon?

Favicon is the generic browser-tab and bookmark icon. Apple Touch icon is iOS Safari’s home-screen icon — what users see if they “Add to Home Screen”. Both should match the brand; both should be specified separately because iOS does not fall back gracefully from one to the other.

Can a favicon be an SVG?

Yes — modern browsers support <link rel="icon" type="image/svg+xml">. SVG favicons scale to any size and can adapt to dark mode via CSS media queries inside the SVG. PNG fallback is still recommended for browsers that haven’t shipped SVG-favicon support.

Why isn’t my favicon showing in Chrome?

Chrome caches favicons aggressively. Try a hard refresh (Cmd/Ctrl+Shift+R), or visit the favicon URL directly to confirm the file is reachable, or version the filename to force a refresh. The cache can persist for days even after deploys.

How do I add a favicon to a WordPress site?

Most modern WordPress themes have a “Site Icon” setting in the Customiser. Upload a 512×512 PNG; WordPress generates the rest automatically. For complete control over every size, the WP Beacon Plugin handles favicon and icon-set generation alongside its other features.

What size should my source logo be?

512×512 minimum, square. The tool downscales — never upscales — so a smaller source produces softer output at the larger sizes. SVG sources produce the sharpest output at every size because vector data has no native resolution.

Should the favicon include text or just a symbol?

Symbol-only at small sizes. Text at 16×16 is unreadable; even 32×32 is borderline. Use a recognisable mark, monogram, or symbol for the favicon set; save the wordmark for places it has room to be readable.

What’s a maskable icon?

A PWA icon variant with 10% safe-zone padding so the platform (Android launcher, iOS home screen) can crop into a circle, squircle, or other shape without losing the visible logo. Specify with purpose: "maskable" in the manifest’s icons array.

Common problems

Problem: Updated the favicon, browser still shows the old one.

Browser caching. Hard-refresh (Cmd/Ctrl+Shift+R), clear cache, or version the filename. Some browsers cache favicons for days; the cache is more aggressive than for any other asset on the page.

Problem: The favicon looks fine on desktop but pixelated on mobile.

Mobile devices use higher-DPI screens that need the 32 or 48 size, not the 16. Make sure the HTML specifies both sizes (<link rel="icon" sizes="16x16"> and <link rel="icon" sizes="32x32">) so the device picks the right one.

Problem: “Add to Home Screen” on iOS shows the default browser icon, not my favicon.

iOS Safari requires the Apple Touch icon specifically (180×180), referenced via <link rel="apple-touch-icon" sizes="180x180">. The standard favicon does not fall back. Generate and link the Apple Touch icon explicitly.

Problem: My logo has fine details that disappear at 16×16.

The favicon is sixteen pixels. Almost any detail finer than the brand mark itself will be lost. Use a simplified version of the logo for the favicon set — the strongest, most recognisable shape, not the full-detail version. Some brands maintain a separate favicon-optimised mark for exactly this reason.

Problem: PWA installation produces an icon that gets cropped weirdly on Android.

Android launchers crop installed-app icons into different shapes (circle, squircle) depending on the device and theme. Use the maskable variant with 10% safe-zone padding to ensure the visible mark survives any crop.

Quick guides

WordPress: Theme Customiser → Site Identity → Site Icon. Upload a 512×512 PNG. WordPress generates the rest. The WP Beacon Plugin provides finer control if needed.

Next.js: Place favicon.ico and icon.png (512×512) in the app/ directory. Next.js’s app router generates the right <link> tags automatically. For finer control, place files at app/icon-16.png, app/icon-32.png, etc., and Next.js wires them up.

Plain HTML: Drop the generated PNGs at the document root, paste the HTML snippet from the generator into <head>. Browsers pick the right size for the surface.

Tips

  • Logos with text rarely render well at 16×16. The browser tab favicon is sixteen pixels — text legibility at that size is essentially zero. Use a mark, monogram, or symbol for the favicon set; save the wordmark for places it has room.
  • For non-square logos, contain mode plus a brand background colour beats cover mode plus aggressive cropping. Cover crops the logo; contain frames it.
  • 180×180 (Apple Touch icon) is the most-shared size for “add to home screen” flows. Make sure it looks deliberate — iOS does not round the corners, you can ship a square or rounded source as you prefer.
  • For PWA installation, the 192 and 512 sizes need to be defined in the web manifest with the correct purpose: any (or purpose: maskable for masking-aware versions). The generated manifest snippet covers this; review it before deploying.
  • The generated .ico file format is not produced by this tool — modern browsers do not require it. If you need an .ico for legacy reasons, a one-line ImageMagick command can bundle the 16 and 32 PNGs.
  • Version the filename (favicon-v2.png) when updating to force browser cache invalidation. Otherwise users may see the old favicon for days.

Related tools in this suite

The natural pairing is the Image Cropper — for non-square logos, crop to a square first if cover-mode framing is what you want, then generate the favicon set. The Icon Set Generator in the developer suite is the heavier-duty version of this tool, covering Chrome extensions, Electron apps, iOS/Android app icons, and Open Graph images alongside the web favicons covered here.

What this looks like at scale

Site-wide brand asset consistency is a system concern, not a one-off task. The systems we build absorb favicon generation into the build pipeline — change the source logo file in one place, the deploy script regenerates every variant. Doing it manually is fine when the brand is stable; making it automatic is the difference between “we updated the logo” and “we updated the logo everywhere”.

Take it further

For multi-tenant SaaS, white-labelled products, or any system where brand assets vary per customer, manual favicon generation does not scale. Talk to us about scoping the upload-to-favicon pipeline that turns customer-uploaded logos into complete favicon sets automatically.