Favicon Generator

What is a favicon and why isn’t a single ICO enough anymore?

The favicon — short for “favorite icon” — is the small image every browser tab, bookmark entry and search result displays next to the page title. Introduced in 1999 by Internet Explorer 5 as a 16×16-pixel ICO file at the site root, it stayed a single image for all platforms for a long time.

With the rise of Retina displays, mobile operating systems, Progressive Web Apps and persistent tab visibility, the picture has changed. Today a fully compatible site needs at least five to seven different image sizes plus a Web App Manifest so every display target is served correctly:

• 16×16 / 32×32 — classic browser tabs, packed inside favicon.ico
• 48×48 — Windows site pinning
• 96×96 — modern Chrome favicon size
• 180×180 — iOS apple-touch-icon (since iOS 7)
• 192×192 / 512×512 — Android home-screen icon and PWA manifest

This tool generates the complete set from a single source — locally in the browser, no server, no upload.

Pipeline overview — what happens in the browser?

Logo (PNG / JPG / SVG)
    ↓
[1] ImageBitmap decode      ─→ read natural size
    ↓
[2] Canvas rasterization    ─→ 7 sizes (16/32/48/96/180/192/512)
                                 optional mask-clip for 192/512
    ↓
[3] PNG encode per layer    ─→ canvas.toBlob('image/png')
    ↓
[4] Custom ICO encoder      ─→ 16/32/48 → favicon.ico (PNG-in-ICO, Vista+)
    ↓
[5] Median-cut quantizer    ─→ theme-color light + dark
    ↓
[6] site.webmanifest        ─→ JSON.stringify with icons array
    ↓
[7] HTML snippet            ─→ <link> and <meta> tags
    ↓
[8] client-zip              ─→ everything in one ZIP

All steps run inside a single browser tab. The ICO encoder is a built-in 2-KB TypeScript module — it writes directly into an ArrayBuffer and packs the PNG layers in the standardised ICO format with the correct header (00 00 01 00), ICONDIRENTRY table and offset arithmetic.

Maskable safe-zone — what is it and why does it matter?

A classic Android launcher icon is a square: 192×192 or 512×512 pixels with content reaching the edges. Since Android Oreo (2017), however, every OS applies its own mask to the icon — Pixel 9 shows circles, Samsung devices show squircles, older Pixels show teardrops. Whoever submits a square icon gets white margins on some devices and cropped logos on others.

The solution is the maskable icon format, anchored in the PWA manifest spec since 2019. It defines an 80% safe-zone in the center of the image:

   192px maskable PNG
   ┌─────────────────────┐
   │     mask zone       │
   │  ┌───────────────┐  │
   │  │               │  │   Inner circle: 80% of the edge
   │  │   safe zone   │  │   length (radius = size × 0.4)
   │  │  (always      │  │   = at 192 px: 76.8 px radius.
   │  │   visible)    │  │   Pixels here are guaranteed
   │  │               │  │   visible — under any mask.
   │  └───────────────┘  │
   │     mask zone       │
   └─────────────────────┘

Everything outside the safe-zone may be clipped on some devices. The tool shows the 80% circle in the live editor as a dashed line. The scale and offset sliders let you position your logo so all brand pixels stay inside.

The four mask shapes in the picker show how the icon looks on the respective devices:

• Circle — Pixel 9, older iOS versions, classic round launchers
• Squircle — iOS 18+ (superellipse approximation), Samsung One UI 6+
• Rounded square — Android Material 3, OnePlus, Realme
• Teardrop — Google Pixel with the teardrop theme enabled

Dark-mode SVG — why, and for which browsers?

If your favicon SVG works well on a light system theme as a dark symbol, it may become hard to read on a dark theme — the dark tab background swallows the dark paths. Solution: a single SVG file with an embedded @media (prefers-color-scheme: dark) rule that automatically swaps its fill colour.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <style>
    path { fill: #0F0F0F; }
    @media (prefers-color-scheme: dark) {
      path { fill: #F5F5F5; }
    }
  </style>
  <path d="…your logo…" />
</svg>

Browser support for SVG favicon with media query:

• Chrome 76+, Edge 79+ — fully functional since 2019
• Firefox 67+ — fully functional
• Safari (all versions) — open WebKit bug since 2020 (#262971); Safari renders SVG favicons with @media as a static image
• Mobile Chrome / Firefox — fully functional

We ship classic PNG favicons alongside so Safari has a clean fallback. In practice a Safari user in dark mode sees the 32-pixel PNG fallback, which is often neutral enough depending on logo design. For full Safari dark-mode support today you would have to host two separate favicons and swap them via JavaScript — we keep the scope minimal and deliver the single-file SVG path, which works cleanly for three of the four major browsers.

What sets this generator apart from online converters?

Most freely available favicon generators follow the same pattern: file upload → server processing → download link. The model has several drawbacks:

1. Privacy — logos are brand assets. A server upload means your brand mark sits at least temporarily on third-party infrastructure. For pre-launch designs, client logos or confidential branding material this is a real concern.
2. No maskable editor — most online tools crop logos without preview of the OS masks. The result: apps with white margins on Pixel phones, cropped logos on Samsung.
3. No dark-mode SVG at all — no free generator ships the single-file dark-mode SVG. The feature has been standardised since 2019 but has not landed in the UI workflows.
4. Manual theme-color — nobody auto-extracts the theme-color from the logo. Users have to guess via a colour picker.

This generator differs on all four:

• Pure-client — the logo stays in the browser tab. Visible in the network panel: no POST, no upload.
• Maskable editor with live preview — the 80% safe-zone circle is always shown, four mask shapes are switchable.
• Dark-mode SVG with embedded @media — one SVG file for both modes (Chrome, Firefox, Edge).
• Median-cut brand-colour extraction — dominant and accent tones land automatically in the theme-color meta tags.

What does the generator deliberately not do?

We build a favicon generator, not a logo maker. Deliberately out of scope:

• AI logo generation — services like iconikai or AutopptAI build logos from text prompts. That belongs to the logo-design workflow before our tool, not inside it.
• Account / save slots / project history — would break the pure-client promise. If you close the tab, the result is gone — that’s a feature, not a bug.
• Microsoft Tile XML (browserconfig.xml) — Edge dropped Live Tiles in Windows 11, the file is obsolete.
• Animated favicons (APNG, SVG SMIL) — browser support is inconsistent and the use case is narrow. If you need animation, host it yourself.
• Branded colour themes / templates — we are a converter, not a logo designer. The theme-color suggestions are algorithmic, not curated.

The tool does one thing well and says clearly where the line is.

Which related tools fit the favicon workflow?

Other tools from the kittokit ecosystem around image processing:

• SVG to PNG — if you only need individual PNG sizes from your SVG, not the full favicon set.
• PNG-JPG to WebP — convert PNG to WebP or AVIF for web delivery; both smaller than PNG at the same quality.
• SVG optimizer — clean up SVG paths and strip metadata before the favicon build.