Favicon Generator

About Favicon Generator

How the Generator Works

The tool renders each favicon size independently on an HTML canvas, then exports the result as a PNG via canvas.toDataURL('image/png'). In image mode, your uploaded file is drawn with aspect ratio preserved and centered in the square frame. In text mode, the background colour fills the canvas and the characters are drawn on top using the system emoji fonts (Segoe UI Emoji on Windows, Apple Color Emoji on macOS/iOS, Noto Color Emoji on Android and Linux) so emojis render in full colour.

Worked example: A 32x32 favicon with a blue background and a white "A" at 70% font size means the canvas is filled with #3B82F6, then the letter is drawn at roughly 22px bold (32 × 0.70 = 22.4, rounded), centred at coordinates (16, 17). The 16x16 version uses the same percentages scaled down, so the relative proportions stay identical across every size. This is why the tool generates separate PNGs for each size rather than resizing one master file - pixel-level rendering at the target size keeps small icons crisp.

Favicon Sizes and Where They Are Used

Different browsers, operating systems, and devices request different favicon sizes. The W3C HTML spec and MDN both recommend shipping multiple sizes so each consumer can pick the one that matches its display density.

Size	Where It Appears	Notes
16x16	Browser tabs, URL bar on older browsers, desktop shortcuts	The classic favicon size, still the most commonly displayed in Chrome and Firefox tabs
32x32	Browser tabs on high-DPI/Retina displays, Windows taskbar shortcuts, search result snippets	Google uses a 32x32 minimum for favicons shown next to search results
48x48	Windows pinned sites, some bookmarking tools and RSS readers	Required by the Windows Tile API for older IE versions
64x64	Chrome bookmark manager, certain Linux desktop environments (GNOME, KDE)	Also used as a fallback when a larger icon is not available
180x180	iOS home screen bookmark icons (iPhone, iPad) via apple-touch-icon	Apple's recommended size since iOS 7, filled to the edges (no transparency)

For Android Chrome home screen icons (192x192 and 512x512) and PWA manifests, you generally use a full-size logo and let the device resize it. This tool focuses on the standard favicon sizes that go directly in your HTML head plus the Apple Touch size.

How to Add Favicons to Your Website

After downloading the PNG files, place them in your site's root or public directory and add link tags to your HTML head. The link tag order matters: browsers pick the first one they can use, so list the smallest sizes first for compatibility.

Tag	Purpose
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">	Base favicon for browser tabs
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">	Retina/high-DPI tabs and Google Search
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">	Windows pinned sites
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">	iOS home screen bookmark
<link rel="manifest" href="/site.webmanifest">	PWA manifest pointing to 192x192 and 512x512 icons

The tool's "Copy HTML" button gives you the full block ready to paste. If you want the cleanest setup, drop the PNGs into your /public directory and leave the href paths as absolute (/favicon-32x32.png) so they resolve correctly from every page.

What Makes a Good Favicon?

A favicon is readable at 16x16 pixels, instantly associated with your brand, and legible on both light and dark browser backgrounds. That is a surprisingly tight brief - most detailed logos fall apart at that size.

Design Rule	Why It Matters
Use a square source image	Non-square images get scaled to fit with empty space around them, which can crop important details or leave awkward whitespace
Keep it simple	At 16x16 only ~256 pixels are available. Bold shapes, a single letter, or one recognisable symbol work. Full wordmarks become unreadable noise
Test on light and dark tabs	Chrome, Firefox, and Safari all support a dark theme. Black-on-white logos disappear on dark tabs. A subtle outline or two-tone design solves this
Avoid thin lines and gradients	Anti-aliasing blurs sub-pixel detail. Use 2-3px minimum stroke widths in your source at 1x scale
Use transparency carefully	PNG supports alpha, but iOS home screen icons fill the background with white. Always check how your icon looks with a solid backdrop
Match your overall brand	The favicon often appears next to your name in search results and pinned tabs - consistency builds recognition

PNG vs ICO Format

Modern browsers all support PNG favicons linked via a standard <link rel="icon"> tag, which is why this tool generates PNG rather than the legacy ICO container format.

Format	Browser Support	Advantages	Disadvantages
PNG	Chrome, Firefox, Safari, Edge, all mobile browsers (IE11 only via the icon link tag)	Simple, standard format, supports transparency, easy to generate client-side	IE10 and earlier required ICO (negligible traffic today)
ICO	Every browser ever made, including legacy IE	Bundles multiple sizes in one file, the implicit fallback when you have /favicon.ico at the root	Complex binary format, larger file size, fewer client-side generators
SVG	Chrome 80+, Firefox 41+, Safari 16.4+, Edge 80+	Scales to any size with no quality loss, CSS can apply dark mode variants via prefers-color-scheme	Not supported by older Safari versions, ignored by some search crawlers

According to StatCounter data from Q1 2026, Internet Explorer holds under 0.5% of global browser share, which means PNG favicons work for >99% of real traffic. If you want belt-and-braces coverage, ship both /favicon.ico (for the implicit request that every browser makes to the site root) and the sized PNGs linked in your HTML head.

SVG and Dark Mode Favicons

Modern browsers support SVG favicons via <link rel="icon" type="image/svg+xml" href="/favicon.svg">. The killer feature is dark mode: you can include a @media (prefers-color-scheme: dark) block inside the SVG that swaps fill colours automatically when the user's browser is in dark mode. Here's the pattern:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
  <style>
    path { fill: #000; }
    @media (prefers-color-scheme: dark) {
      path { fill: #fff; }
    }
  </style>
  <path d="..."/>
</svg>

Ship the SVG as the primary favicon and a 32x32 PNG as the fallback - browsers that don't understand SVG favicons will use the PNG. For full dark mode support across your whole site, pair the favicon with the colour converter to translate your brand palette into matching light/dark hex values.

Common Mistakes

Favicons look simple, but five small mistakes cause most of the "why isn't my favicon showing?" posts on Stack Overflow.

• Browser cache: Browsers cache favicons aggressively - Chrome can hold a stale icon for weeks. Hard refresh with Ctrl+F5 or test in an incognito window before assuming your deploy is broken.
• Missing root /favicon.ico: Every browser makes an implicit request to /favicon.ico at the site root even if your HTML doesn't reference one. Missing file = 404s in your logs. Ship at least a placeholder ICO or redirect.
• Wrong MIME type: Serving a PNG with Content-Type: image/x-icon confuses some crawlers. Make sure your server returns image/png for .png files.
• Forgetting Apple Touch: iOS ignores regular favicons when adding a site to the home screen. Without apple-touch-icon, iOS generates a screenshot of your page instead, which looks unprofessional.
• Too much detail in a 16x16: The single most common mistake is shipping a 512x512 corporate logo as the favicon. At 16x16 it renders as mud. Start the design at 16x16 and scale up, not the other way round.

If you need to prepare a square source image before generating the favicon, the image resizer and image cropper handle the prep work. For colour pairing, the colour picker helps you choose background and text colours that meet WCAG contrast at small sizes.

Sources

• MDN Web Docs - HTML link element (icon and apple-touch-icon)
• WHATWG HTML Living Standard - rel="icon" specification
• Google Search Central - Favicon guidelines for search results
• Apple Human Interface Guidelines - App icons and touch icon sizes
• web.dev - Adding a web app manifest with icon sets
• Can I use - SVG favicons browser support
• StatCounter - Global browser market share statistics