Favicon Generator

What is a favicon?

A favicon is that tiny icon you see in browser tabs, in bookmarks and on shortcuts. The sizes that come up most are 16×16 (tab) and 32×32 (bookmarks), plus 192×192 and 512×512 for PWA and Android.

Here you generate all of those sizes in one go, starting from a piece of text or an emoji. For a more elaborate icon, the way to go is to supply an SVG image.

Generation happens in your browser through Canvas.

What is a favicon and where does it appear

A favicon (short for favorite icon) is the small graphic that represents a website in the browser chrome and across the operating system. It shows up in the browser tab, the bookmarks list, browsing history, tab-group previews, new-tab thumbnails, pinned tabs, OS task switchers, mobile home-screen shortcuts, PWA install banners, and the share sheet. Whenever a site is identified visually outside its own content, the favicon does the work.

The format was introduced by Microsoft in March 1999 with Internet Explorer 5. The original implementation looked for a file literally called favicon.ico at the site root. Other browsers adopted the convention, and to this day every browser requests /favicon.ico implicitly even when no <link> is declared. Over 25 years later, that single 16-pixel file grew into a layered ecosystem covering Retina, Android home screens, dark mode, PWAs, and maskable adaptive icons.

A missing or low-quality favicon makes a site look broken: the empty placeholder leaks attention, the bookmark list becomes a wall of generic globes, and Android refuses to create a sharp home-screen shortcut. Treating it as a real branding asset is one of the cheapest wins in web polish.

Modern sizes that actually matter

Old tutorials list dozens of dimensions inherited from a time when every device shipped a different icon convention. In 2026 the practical baseline is much smaller. The dimensions you should generate are:

• 16x16 — classic browser tab on standard-DPI desktop displays. Still rendered when the user is in a heavily pinned tab strip.
• 32x32 — the dominant desktop tab size today; what Chrome, Edge, Firefox and Safari actually downscale from for most surfaces.
• 180x180 — Apple Touch Icon for iOS Safari "Add to Home Screen". A single 180-pixel PNG covers every iPhone and iPad; the legacy 152, 167 and 120 variants are no longer required for modern iOS.
• 192x192 — Android Chrome home-screen icon declared in the web app manifest. Without this size, Android falls back to the Apple Touch Icon (acceptable) or a blurry upscale (ugly).
• 512x512 — Android splash screen for PWA launch and the largest source the OS can pull from. It is also the canonical maskable icon size, where Android crops a circle/squircle/teardrop out of the artwork.
• SVG (any) — a single scalable vector that browsers can render perfectly at every pixel ratio. Modern Chrome, Firefox, Edge and Safari Technology Preview accept it directly via type="image/svg+xml".

Sizes that used to be common but no longer earn their bytes include 48, 64, 96, 128, 144 (Windows tile), 152, 167 and the long list of Apple Touch Icon variants between 57 and 144 pixels. They were workarounds for browsers and devices that retired or learned to downscale properly.

Choosing a format: ICO, PNG or SVG

ICO — the multi-resolution legacy container

ICO is a Windows-native container that holds multiple raster bitmaps at different sizes inside a single file. A well-built favicon.ico embeds 16x16, 32x32 and sometimes 48x48; the browser picks whichever resolution is closest to the surface. ICO remains the most compatible format and the universal fallback at the document root.

PNG — one file per size

PNG is the universal raster format. Each dimension is a separate file, which means more requests but much better control: you can hand-tune the 16x16 to stay readable instead of trusting an automatic downscale. PNG is mandatory for the 180, 192 and 512 surfaces; iOS and Android refuse to consume an ICO container there.

SVG — scalable and dark-mode aware

SVG is the most modern option. One vector renders crisply on a 4K monitor and on a 16-pixel pinned tab; the file is often smaller than a 32x32 PNG; and the SVG can carry its own CSS, swapping colors via prefers-color-scheme without a second file. Chrome, Firefox and Edge support it; Safari ignores it and falls back to the next icon.

The Web App Manifest

The manifest.webmanifest is the JSON document that turns a site into an installable PWA. Even if you have no PWA intent, the manifest is where Android Chrome looks for the home-screen icon. The minimum useful manifest declares name, short_name, an icons array with the 192 and 512 PNGs, a theme_color, and a background_color used as the splash background. Load it with one <link rel="manifest"> tag.

Each icon entry can carry a purpose field. The values any and maskable are the relevant ones. Maskable icons must place their artwork inside a 409-pixel safe area centered in the 512-pixel canvas, because Android crops them into the platform shape (circle, squircle or teardrop). Without a maskable PNG, Android adds white padding around the normal icon.

HTML markup that works everywhere

A modern favicon block has three or four lines and lives inside <head>. The order matters: browsers walk the list and use the first usable match. Declare the SVG first so modern browsers prefer it; the ICO last as the universal fallback.

<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#6366f1">

The theme-color meta does not contribute an icon, but it is part of the same identity surface: it tints the address bar on Android Chrome and the title bar on installed PWAs. Pair it with the dominant color of the favicon for a consistent feel.

Dark mode favicons

A favicon designed for white tab backgrounds disappears against the dark tabs of macOS, Windows 11, and most browsers in dark theme. The first robust fix is an SVG with an embedded @media (prefers-color-scheme: dark) rule that swaps the fill; modern browsers respect it on the favicon surface.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .glyph { fill: #111827 }
    @media (prefers-color-scheme: dark) {
      .glyph { fill: #f9fafb }
    }
  </style>
  <path class="glyph" d="..."/>
</svg>

The second option is two separate ICO/PNG files declared with media="(prefers-color-scheme: dark)" on the <link>. Chrome and Firefox honor it; Safari ignores it and falls back to the unconditional declaration.

Common mistakes

• A single-size legacy ICO. 16x16 looks blurry on Retina tabs. Embed at least 16 and 32 inside the ICO.
• Forgetting the 192x192 manifest icon. Android falls back to the Apple Touch Icon and upscales it, producing soft edges.
• Cache after a redesign. Rename the file or attach ?v=2 when changing the artwork.
• Designing for 512 and downscaling to 16. Tiny dimensions need hand-tuned outlines; what reads at 512 turns into mud at 16.
• Wrong content type. Serving favicon.ico as text/html renders a broken icon. Send image/x-icon.
• Skipping maskable icons. Without purpose: "maskable", Android cuts the home-screen icon awkwardly.

FAQ

Do I still need favicon.ico at the root?

Yes. Browsers request /favicon.ico implicitly even when your HTML declares only PNG and SVG icons. Returning a real file avoids a 404 in the network log.

Is SVG enough on its own?

For desktop tabs yes, but iOS Safari does not consume SVG for the Apple Touch Icon and Android expects PNGs in the manifest. The safe minimum in 2026 is SVG plus 180x180 plus 192/512 plus the ICO fallback.

Why does my new favicon not show up?

Almost always cache. Force a hard reload and bump the URL with a query string if the file shares its name with the previous version.

Should the apple-touch-icon have rounded corners?

No. Provide a square 180x180 PNG; iOS applies the rounded mask automatically. Baking corners into the PNG causes double-rounding and a smaller-than-expected icon.