Favicon Generator

Favicon Generator: Create Complete Browser Icon Sets for Every Platform

A favicon "” short for "favorite icon" "” is the small image that appears in browser tabs, bookmark lists, address bars, and increasingly in mobile home screens, app launchers, and operating system UI. What started as a single 16×16 pixel ICO file has evolved into a complex ecosystem of sizes, formats, and manifest declarations that span desktop browsers, iOS, Android, Windows, and macOS. Our Favicon Generator handles this complexity for you, creating a complete icon set and the necessary HTML declarations from a single source image.

Getting favicons right matters more than many developers realize. A missing or low-resolution favicon shows as a broken icon or a generic browser icon in bookmarks and pinned tabs. An improperly sized icon appears blurry or poorly cropped on high-DPI displays. An incomplete manifest means your site won't have a proper icon when added to a mobile home screen. Our tool generates all required sizes and formats from your source image, outputting everything you need for a complete, professional favicon implementation.

The History of Favicons: From 16×16 ICO to PWA Manifests

The favicon was introduced by Internet Explorer 5 in 1999. The original mechanism was simple: place a file named favicon.ico in the root of your web server and the browser would automatically request it. The ICO format was chosen because it could contain multiple image sizes in a single file "” originally just 16×16 pixels at 256 colors.

The W3C standardized the favicon in HTML 4.01 via the <link rel="shortcut icon">element, allowing any image format (PNG, GIF, ICO) to be specified with a custom path. Over time, the shortcut keyword was removed from the standard "” modern HTML uses rel="icon" "” but browsers continue to support the old form for backward compatibility.

As retina displays became common starting with the iPhone 4 in 2010 and MacBook Pros in 2012, the 16×16 favicon became visibly blurry on high-DPI screens. Developers began providing larger sizes "” 32×32, 48×48 "” via the sizes attribute on the link element. Apple simultaneously introduced the "Apple Touch Icon" for websites added to the iOS home screen, requiring 57×57, then 60×60, 72×72, 76×76, 120×120, 152×152, and eventually 180×180 pixel versions in PNG format. Android Chrome followed with its own requirements via the Web App Manifest. Windows 8 and 10 added tile icons. The result: a modern complete favicon set easily requires 10-15 separate image files.

What Image Files Does a Complete Favicon Set Need?

A production-ready favicon implementation requires the following files:

• favicon.ico: A multi-size ICO container typically including 16×16 and 32×32 images. This is the universal fallback read by all browsers, even without a <link> element. Place it at the root of your domain.
• favicon-16x16.png: Used by browsers that prefer PNG over ICO for tab favicons. Chrome and Firefox use this size for standard-density displays.
• favicon-32x32.png: Used for high-DPI tab favicons and taskbar shortcuts on Windows. Chrome's new tab page uses this size.
• apple-touch-icon.png: 180×180 PNG used by iOS when the user adds the site to their home screen. Without this file, iOS uses a screenshot of the page. The icon should have a white or colored background "” iOS does not apply a background automatically.
• android-chrome-192x192.png: Used by Android Chrome when the site is added to the home screen or installed as a PWA. Referenced in the Web App Manifest.
• android-chrome-512x512.png: Used in the Android app drawer and splash screens for PWAs. Referenced in the Web App Manifest. Google requires a 512×512 icon for PWA installability.
• mstile-150x150.png: Used by Windows 8/10 when the site is pinned to the Start menu. Referenced in browserconfig.xml or the <meta name="msapplication-TileImage"> tag.
• safari-pinned-tab.svg: A monochrome SVG icon used by Safari on macOS for pinned tabs. Must be a single-color SVG "” Safari uses it as a mask, ignoring colors and applying the user's chosen accent color.

The Web App Manifest (site.webmanifest)

The Web App Manifest is a JSON file that provides information about your web application to the browser, enabling progressive web app (PWA) features including home screen installation, splash screens, and app-like display modes. It must be referenced in your HTML:

<link rel="manifest" href="/site.webmanifest">

A minimal site.webmanifest for favicon purposes:

{
  "name": "My App",
  "short_name": "App",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

The theme_color controls the browser UI color on Android Chrome (the address bar color), and the background_color is used for the splash screen background when the PWA is launched. display: standalone removes the browser chrome when the app is launched from the home screen.

HTML Link Tags for Favicon Implementation

The complete set of <link> and <meta> tags for cross-browser, cross-platform favicon support:

<!-- Standard favicon -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">

<!-- PNG favicons for modern browsers -->
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

<!-- Apple Touch Icon for iOS -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- Safari pinned tab -->
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">

<!-- Web App Manifest -->
<link rel="manifest" href="/site.webmanifest">

<!-- Windows tile -->
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="theme-color" content="#ffffff">

The order matters: browsers read link elements top to bottom and use the most specific match. More specific entries (with explicit sizes and type) should come after the generic favicon.ico fallback so browsers that support specific sizes use the best available image.

SVG Favicons: The Future of Browser Icons

All modern desktop browsers (Chrome 80+, Firefox 41+, Safari 12+, Edge 80+) support SVG favicons via <link rel="icon" type="image/svg+xml" href="/favicon.svg">. SVG favicons are resolution-independent "” they look perfect at any size and on any display density. They also support CSS, including @media (prefers-color-scheme: dark), enabling automatic dark mode variants without serving separate files:

<!-- In favicon.svg -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    circle { fill: #0066ff; }
    @media (prefers-color-scheme: dark) {
      circle { fill: #66aaff; }
    }
  </style>
  <circle cx="50" cy="50" r="50"/>
</svg>

Despite excellent browser support, SVG favicons should not completely replace the ICO fallback because older browsers, some email clients, and bookmarking services still requestfavicon.ico. The recommended modern implementation uses SVG as the primary icon with ICO as a fallback:

<link rel="icon" href="/favicon.ico" sizes="any"><!-- fallback -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml"><!-- preferred -->

Favicon Design Best Practices

Simplicity Above All Else

At 16×16 pixels, a favicon has only 256 pixels to work with. Complex logos, thin lines, and fine details become unrecognizable at this scale. The most effective favicons use:

• A single letter or monogram from the brand name.
• A simple geometric icon or logo mark (not the full logo).
• High contrast between foreground and background.
• Bold, thick strokes that remain visible at small sizes.
• Maximum 2-3 colors for clarity.

Design for the Smallest Size First

The 16×16 favicon is the hardest design constraint. Start there "” if it's recognizable at 16×16, it will look great at 32×32, 192×192, and beyond. If you start at 512×512 and scale down, fine details will turn into an unrecognizable blur. Consider pixel art techniques for the 16×16 version: deliberate pixel placement on whole-pixel boundaries eliminates anti-aliasing blur.

Background Color and Transparency

The ICO and PNG formats support full transparency. Whether to use a transparent background depends on context:

• Browser tabs: transparent backgrounds adapt to the browser's theme (light or dark). A logo mark without a background looks modern and integrates well with both themes.
• Apple Touch Icons: iOS does not apply a background to app icons "” what you provide is what appears on the home screen. Use a solid background color that represents the brand for touch icons.
• Windows Tiles: Windows applies its own background color (specified via msapplication-TileColor), so tile images should use a transparent background to let the tile color show.

Dark Mode Awareness

A favicon with a white or very light design will be invisible on a browser with a dark tab bar. Options: (1) use an SVG favicon with a @media (prefers-color-scheme) query to switch colors; (2) use a colored background that is visible on both light and dark themes; (3) provide separate favicons for light and dark via JavaScript that swaps the link element'shref based on window.matchMedia('(prefers-color-scheme: dark)').

Animated Favicons

Animated ICO files (using multiple frames like an animated GIF) are technically supported in some browsers, though support is inconsistent and performance is poor. A better approach uses JavaScript to cycle through a series of favicon images for notification-style animations:

let step = 0;
const frames = ['/favicon-1.png', '/favicon-2.png', '/favicon-3.png'];
setInterval(() => {
  document.querySelector('link[rel=icon]').href = frames[step % frames.length];
  step++;
}, 200);

Canvas-based dynamic favicons can display real-time data like unread notification counts, progress bars, or live data visualizations. Libraries like Favicon.js and Tinycon simplify this pattern.

Emoji Favicons

A simple trick for quick, unique favicons: use an emoji as an SVG favicon. This requires no image file at all:

<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🚀</text></svg>">

This technique works in modern browsers and renders the emoji at whatever resolution the browser needs. It is not suitable for professional branded products but is useful for development tools, internal dashboards, and personal projects where a branded favicon is not required.

Favicon Caching and Cache Busting

Browsers cache favicons aggressively "” often indefinitely. When you update a favicon, many users will continue seeing the old one for days or weeks. To force the new favicon to load:

• Add a version query string: href="/favicon.ico?v=2". The browser treats the URL as a new resource and fetches it fresh. Users who already have the page open need to refresh, but new visits will get the latest icon.
• Change the filename: favicon-v2.ico. Less elegant but absolutely guaranteed to bust the cache.
• In development, use hard reload (Ctrl+Shift+R / Cmd+Shift+R) to force all cached resources including favicons to be reloaded.

Favicon for Progressive Web Apps (PWA)

PWAs have stricter icon requirements than standard websites:

• A 192×192 icon is required for Android home screen installation.
• A 512×512 icon is required for the PWA splash screen and the Chrome app store.
• Icons should be defined in the Web App Manifest's icons array.
• For maskable icons (icons that can be safely cropped to different shapes by Android), the design should have a safe zone in the center 80% of the image with at least a 10% padding on all sides. Specify purpose: "maskable" in the manifest icons array.

{
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ]
}

Testing Your Favicon Implementation

After implementing favicons, verify the complete implementation:

• Browser tab: Open the page in Chrome, Firefox, Safari, and Edge. Check the favicon appears in the tab and matches your design at small sizes.
• Bookmarks: Bookmark the page and verify the icon appears in the bookmarks bar.
• iOS home screen: Use "Add to Home Screen" in Safari on an iPhone or iPad. The apple-touch-icon should appear as the app icon.
• Android home screen: Add to home screen in Chrome on Android. The android-chrome-192x192 icon should appear.
• RealFaviconGenerator validator: The RealFaviconGenerator website includes a favicon checker that fetches your site and reports missing icons, incorrect sizes, and broken manifest declarations.
• Google Search Console: The Rich Results Test and URL Inspection tools show how Google renders your favicon for search results.

Common Favicon Mistakes and How to Avoid Them

• Serving favicon.ico with wrong MIME type: Ensure your server sends Content-Type: image/x-icon or image/vnd.microsoft.icon for ICO files. Some servers default to application/octet-stream, which causes browsers to reject the file.
• Missing favicon in SPAs: Single-page apps built with webpack or Vite sometimes forget to copy static assets including the favicon to the output directory. Verify favicon.ico is at the root of your deployed site.
• Using a JPEG for touch icons: Apple Touch Icons must be PNG. JPEG is not supported.
• Forgetting the manifest: Many developers add the favicon files but forget to reference the site.webmanifest with a link element, preventing PWA installability.
• Low-contrast designs: Dark logos on dark tab bars (or light logos on light tab bars) become invisible. Test on both light and dark browser themes.

How to Use This Favicon Generator

Upload your source image "” ideally a high-resolution PNG (512×512 or larger) or an SVG for maximum quality. The generator produces all required sizes and formats: favicon.ico (16×16 and 32×32 embedded), PNG files at every standard size, and the site.webmanifest JSON file. Copy the generated HTML snippet directly into your page's <head> section. The tool also provides a preview of how your favicon will appear at each size so you can verify legibility before downloading.