Favicon Generator

Why a multi-file favicon set still matters

A site’s favicon is more than a tab icon. It shows up in search results next to your domain, in browser bookmarks, on the home screen when an iOS user adds your site to the dock, and inside Android’s PWA install card. Each of those surfaces wants a different size, and a few of them want a slightly different format. Shipping a single favicon.ico and hoping for the best leaves visible rough edges on retina screens and on installable PWAs.

This tool produces the full modern set in one click — ICO for legacy compatibility, multiple PNG sizes for the contemporary <link rel=“icon”> stack, an apple-touch-icon for iOS, and a webmanifest with your site name, start_url, display and the 192 and 512 icons, which is what Chrome checks before it offers to install the site.

The HTML snippet, explained

The generated snippet covers every modern surface in roughly seven lines:

• <link rel=“icon” type=“image/x-icon” href=“/favicon.ico”> — fallback for older browsers and bookmarks that still parse favicon.ico first.
• <link rel=“icon” type=“image/png” sizes=”…”> at 16, 32, and 48 — the HTML Standard leaves the choice to the browser. In a 2026-10-02 test, Chromium 152 on a 2× screen fetched only favicon.ico while the ICO link was present, and favicon-32.png when only the PNG links were.
• <link rel=“apple-touch-icon”> at 180×180 — Safari on iOS uses this when a user adds the page to the home screen.
• <link rel=“manifest”> — points Android Chrome and PWA installers at site.webmanifest, which lists the site name from the Site name field, “start_url”: ”/”, “display”: “standalone” and the 192 and 512 PNGs with purpose: “any”. With the Site name field empty, name and short_name are left out and Chrome does not offer to install the site.
• <meta name=“theme-color”> — colors the address bar on mobile and the title bar on installed PWAs.

How the package is built

The renderer creates a fresh canvas at each target size, applies the chosen background and shape mask, draws the source content centered with the padding offset, and asks canvas.toBlob(‘image/png’) for a compact PNG. The 16, 32, and 48 PNGs are then packed into a single favicon.ico using the modern PNG-compressed entry format — three PNG payloads concatenated behind an ICONDIR header and three 16-byte ICONDIRENTRY records.

The ZIP packer writes everything with the STORED method (no DEFLATE) because PNG is already compressed and re-deflating the bytes saves less than 1 % at the cost of an extra 5 KB of code. Filenames are flagged as UTF-8 in the general purpose bit field so non-ASCII names — should you ever rename the package — survive cleanly.

Privacy and offline notes

• The page never uploads your files. Open the browser’s network panel and watch — Generate does not fire a single request.
• The tool works offline once the page is cached. The Canvas API, ZIP, and ICO writers are all in the page bundle.
• Usage counting only. Like other tool pages, this page loads Google Analytics; the tool logs one generate and one download event, which carry only the tool name and action, never your image.

Common pitfalls

• SVG with external images. When an SVG references <image href=“https://…”> the browser refuses to read the canvas back as a blob (cross-origin taint). Inline the image as a Data URI before pasting.
• Empty emoji on a corporate Linux box. Some IT-managed Linux distros ship without a color emoji font. The preview will show empty boxes; switch to the Text or Image tab to bypass the issue.
• Tiny details on the 16 px tile. Lines thinner than 1.5 px disappear at 16×16. If your mark looks crisp at 32 but vanishes at 16, simplify the design or lean on the background color for separation.