⭐ Favicon Generator

One image in — a complete kit out: favicon.ico, every PNG size, manifest.json and the link tags. Nothing is uploaded.

About the Favicon Generator

A "favicon" stopped being one file years ago. A site that looks right in every tab, bookmark list, home screen and PWA install sheet needs six raster sizes, a multi-entryfavicon.ico, a web-app manifest and a handful of <link> tags — and getting one of them wrong fails silently on somebody else's device. This tool takes one image and produces the whole kit, with the wiring written down.

Everything is rendered in your browser: your logo — possibly an unreleased brand asset — is never uploaded anywhere. The ZIP contains the icons, manifest.json,link-tags.html to paste, and a README with the three-step install.

How to use it

Drop your logo — square, 512×512 or larger, transparency welcome.
Set the app name and theme colour (they go into the manifest), and pick a tile background — iOS shows transparent icons on black, so a solid tile is often the better choice there.
Check the previews, especially 16px: if the mark is unreadable, simplify it and re-drop.
Download the kit, copy the files to your site's public root, and paste the link tags into your <head>.

Frequently Asked Questions

What sizes does a favicon actually need in 2026?

Six cover everything that matters: 16 and 32px for browser tabs, 48px inside favicon.ico for desktop shortcuts, 180px for the iOS home screen (apple-touch-icon), and 192 + 512px for Android and PWA installs. This tool generates all of them, plus the .ico and the manifest that ties the set together.

Do I still need a favicon.ico file?

Yes — browsers request /favicon.ico on their own when no explicit link is present, old bookmarks reference it, and some tooling (RSS readers, corporate proxies) never learned anything newer. The .ico produced here embeds 16, 32 and 48px PNG-compressed entries, which is how modern icons ship.

What image should I start from?

A square image of at least 512×512 pixels with a simple, bold shape. Detail that reads at 512px vanishes at 16px — if your logo has fine text, consider a simplified mark for the favicon. PNG or SVG-exported-to-PNG with transparency works best; the tool letterboxes non-square input rather than stretching it.

Is my logo uploaded anywhere?

No. The resizing, the .ico packing and the ZIP are all produced by JavaScript in your browser — the file never leaves your machine. For a brand asset that may be unreleased, that matters more than convenience.

Where do I put the generated files?

Copy every PNG, favicon.ico and manifest.json into your site's public root (the directory served at /), then paste the contents of link-tags.html into your <head>. If your site is served from a sub-path, prefix each href with it. The README in the ZIP repeats these steps.

Why is there a manifest.json in the kit?

Android and installable web apps (PWAs) read the icon list from the web-app manifest, not from <link> tags. Without it, an installed shortcut falls back to a screenshot or a letter tile. The generated manifest declares the 192 and 512px icons and the theme colour you chose.

The complete favicon kit, explained

The favicon stopped being a single file years ago. A site that looks right everywhere — browser tabs, bookmark lists, iOS home screens, Android launchers, PWA install sheets, desktop shortcuts — needs half a dozen raster sizes, a multi-entry favicon.ico, a web-app manifest declaring the large icons, and the <link> tags that tie it together. Miss one and the failure is silent, on somebody else's device, in a context you never test.

Braxik's favicon generator takes one image and produces the entire kit: favicon.ico with 16, 32 and 48-pixel entries, PNGs at every size that matters (16, 32, 48, 180, 192, 512), a manifest.json wired to the Android icons, the exact link tags to paste into your <head>, and a README with the three-step install — all packed into one ZIP.

Rendering happens in your browser, which matters more here than for most tools: the input is usually a logo, and logos are often unreleased brand assets. Nothing is uploaded; the resizing, the ICO packing and the ZIP assembly are all local JavaScript.

The generator letterboxes non-square input rather than stretching it, offers a solid tile background for the sizes where transparency backfires (iOS renders transparent touch icons on black), and shows you the 16-pixel result honestly — because if your mark is unreadable at 16px, the fix is a simpler mark, not a different generator.

How it works

Your image is decoded once and drawn onto a canvas at each target size with high-quality resampling, centred and contain-fitted with optional padding, over either transparency or a solid tile colour. Each size is exported as a PNG.

The favicon.ico is assembled byte-by-byte in the ICO container format: a six-byte header, a sixteen-byte directory entry per image, then the image data — which since Windows Vista may be PNG-compressed, and is how every modern favicon.ico ships. The 16, 32 and 48-pixel renders go inside.

The manifest.json declares the 192 and 512-pixel icons with your app name and theme colour — Android and PWA installs read icons from the manifest, not from link tags — and everything is zipped with the icons stored uncompressed, since PNGs don't compress twice.

Common uses

Ship a complete, correct favicon set for a new site or side project in under a minute.
Replace a legacy 16×16-only favicon.ico with a kit that looks sharp on high-DPI tabs and mobile home screens.
Generate the icon assets a PWA needs to pass an installability audit (Lighthouse checks for 192 and 512-pixel manifest icons).
Produce apple-touch-icon variants with a solid background so iOS bookmarks don't render your transparent logo on black.
Create per-environment favicons (a red-tinted tile for staging is a classic) by running the generator twice with different tile colours.
Get the exact <link> markup for the <head> without re-deriving it from three conflicting blog posts.
Check what your current logo actually looks like at 16 pixels before committing to it.

Before you rely on the result

Start from a square image of at least 512×512 — the generator letterboxes non-square input rather than distorting it, but a square source uses the space best.
Look hard at the 16 and 32-pixel previews: fine detail and thin strokes vanish at tab size, and the fix is simplifying the mark.
Pick a solid tile background for the apple-touch-icon unless your logo genuinely works on black — iOS composites transparent icons onto black.
Copy ALL the files to the site root: favicon.ico at the root specifically, because browsers and old tooling request /favicon.ico unconditionally.
If your site lives under a sub-path, prefix every href in the link tags and manifest accordingly.
After deploying, hard-refresh and check a private window — favicons are cached aggressively, and a stale one survives ordinary reloads.
Verify the manifest with your browser's application panel: it should list both Android icons without warnings.