ZeroTool Workbench
Favicon Generator
Make a full favicon set from emoji, text, image, or SVG — ICO, multi-size PNG, apple-touch-icon, and webmanifest. 100% browser-based, no upload.
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 maskable Android icons.
How to use
- Pick a source. The four tabs accept an emoji (preset or pasted), 1–4 typeset characters, an uploaded PNG/JPG/SVG image up to 10 MB, or pasted SVG markup.
- Choose a background and shape. Transparent for masked designs, a solid color for branded marks. Square, rounded (12.5 % corner radius), or circle. The padding slider keeps your content out of the safe-area edges.
- Watch the live preview render at the four crucial sizes — 16, 32, 64, and 180 pixels. The 16 and 32 px tiles tell you whether your mark survives the tab bar; the 180 px tile is the iOS home-screen icon.
- Click Generate package. The browser produces eleven files in roughly one second. Download ZIP saves them; Copy HTML snippet gives you the
<link>tags to paste into your<head>.
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 parsefavicon.icofirst.<link rel=“icon” type=“image/png” sizes=”…”>at 16, 32, and 48 — modern browsers prefer the PNG with a matchingsizesattribute and skip the ICO.<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 atsite.webmanifest, which advertises the 192 and 512 PNGs withpurpose: “any maskable”.<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.
- Tracking-pixel free. We log a single
generateanddownloadevent to count usage; the events carry only the tool name.
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.
FAQ
What's in the generated package?
Eleven files: favicon.ico (16, 32, and 48 multi-size, PNG-compressed), six raw PNGs (16, 32, 48, 64, 96, 128), apple-touch-icon.png at 180×180, two android-chrome PNGs at 192 and 512, and a site.webmanifest. Drop them into your site root, paste the HTML snippet into your <head>, and you have full coverage for browsers, iOS, Android, and PWA installs.
Are my files uploaded to a server?
No. Everything runs in your browser through the Canvas API — image decoding, multi-size resampling, ICO and ZIP packing, all in JavaScript. Open DevTools → Network and you will see zero upload requests when you click Generate.
Why does my emoji look different on Windows than on macOS?
Each operating system ships its own color emoji font (Apple Color Emoji on macOS, Segoe UI Emoji on Windows, Noto Color Emoji on Linux/Android). The generator renders via the system font on the machine you run it on. If you need pixel-identical output across platforms, switch to the Image or SVG tab and supply your own bitmap or vector mark.
Does the ICO use PNG or BMP entries?
PNG-compressed entries. Each ICO frame is a self-contained PNG, supported by every browser since IE 11 and the Windows Vista shell. This keeps file sizes small, preserves alpha transparency, and avoids the legacy DIB/BMP encoding that older Windows tooling required. Older systems that can only read DIB frames are out of scope by design.
Can I generate maskable PWA icons?
Yes. The 192 and 512 PNGs are listed in the manifest with `purpose: "any maskable"`, so they cover both standard and maskable rendering. Use the Padding slider to keep your mark inside the safe zone — at least 10% padding is recommended when you choose the Circle shape, which is what Android applies as a maskable mask.