Which sizes are in the exported zip?

16×16, 32×32, 48×48, 180×180 (Apple touch icon), 192×192 and 512×512 (Android chrome). Plus a two-frame favicon.ico (16+32 px), a 512×512 maskable variant, and a manifest.webmanifest snippet referencing the manifest icons.

What is a maskable icon?

On Android and other adaptive-icon platforms, the OS clips the icon to a shape (circle, squircle, teardrop, …). Maskable icons fill the canvas with background + foreground and keep the meaningful content inside the inner 60% (a 20% safe-area padding on each side) so cropping never removes it.

Does the tool use a real ICO encoder?

Yes — a hand-rolled ~60-line PNG-in-ICO writer. The favicon.ico file is a standard ICO header wrapping the 16×16 and 32×32 PNG blobs as separate frames. Every modern browser reads PNG-in-ICO files; Windows has supported them since Vista.

Why does my emoji look different on different machines?

Emoji are rendered with the user's system emoji font — Apple Color Emoji on macOS/iOS, Segoe UI Emoji on Windows, Noto Color Emoji on Linux/Chrome OS, etc. The PNGs in the zip will look like whatever your browser drew. If you need pixel-identical icons everywhere, drop in an SVG or PNG instead.

Does any of this leave my browser?

No. The image or emoji is rendered to a canvas locally, the PNGs and ICO are generated client-side, and the zip is assembled in your browser. Nothing is uploaded.

⭐ Favicon Generator

Drop any image or type an emoji to generate the full browser favicon set — 16/32/48/180/192/512 PNGs, a two-frame ICO, a maskable variant, and a manifest.webmanifest snippet. Everything packaged as a single zip.

Source

Drop PNG, SVG, JPEG, or WebP — or click

Background

Transparent

Padding

10%

Shape

Affects PNG / ICO output. The maskable variant always renders inside a circle-safe area.

📋 manifest.webmanifest snippet

Preview

Maskable icon

Shape control doesn't apply here. Maskable icons follow the adaptive-icon spec — Android / Chrome apply their own mask (circle, squircle, teardrop, …) on top of your PNG, so the source must be a full-bleed square with content inside the inner 60%. Pre-shaping would double-mask the icon. The transparent-background toggle is also ignored here for the same reason.

512×512 maskable

The shaded ring marks the area Android / Chrome may crop. The icon is centered inside the inner 60% so it stays fully visible at any mask shape — circle, squircle, teardrop, …

In the exported zip the maskable PNG fills the full 512×512 with the background color, so no edge bleed-through.

📦 What's in the zip

favicon.ico — two-frame ICO (16 + 32 px)
favicon-16x16.png, favicon-32x32.png, favicon-48x48.png
apple-touch-icon.png — 180×180 (iOS / iPadOS home-screen)
android-chrome-192x192.png, android-chrome-512x512.png
maskable-icon-512x512.png — for Android adaptive icons
manifest.webmanifest — drop into your site root

About the Favicon Generator

Modern browsers and OSes ask for a surprising number of icon sizes — 16×16 for the tab favicon, 32×32 for high-DPI taskbars, 180×180 for iOS home-screen icons, 192/512 for Android (with a separate maskable variant for the adaptive-icon shape). This tool renders one source — an image or an emoji — into every size, plus a multi-frame ICO and a manifest.webmanifest snippet, all bundled in a single zip.

How to use

Drop an image (PNG / SVG / JPEG / WebP) or switch to Emoji and type a glyph.
Pick a background color (or transparent for SVG-style icons), a padding %, and a shape.
Check the preview grid — every export size renders live.
Click Download all (zip) to grab the full set.
Drop the contents into your site root and paste the manifest snippet into manifest.webmanifest.

HTML snippet

After unzipping into your site root, reference the icons from <head>:

<link rel="icon" href="./favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png">
<link rel="manifest" href="./manifest.webmanifest">

Tips

SVG inputs scale crisply at every size — start from a vector if you have one.
The 16×16 tile is what most users actually see in browser tabs; check it carefully — fine detail vanishes at that resolution.
Maskable icons should fill the canvas (background + icon together). Don't add transparent edges or Android will pad them.
The same emoji renders differently on different OSes. If consistency matters, use an SVG asset instead.

⭐ Favicon Generator

Preview

Maskable icon

About the Favicon Generator

How to use

HTML snippet

Tips

FAQ

More tools

JSON

Code

Ornaments

Image

Web / SEO

Generators

PDF