Favicon Generator

A favicon is the tiny icon a browser shows next to your page title — in the tab, in bookmarks, in the history list, and on the new-tab page. It is the smallest piece of branding on the web, and also one of the most visible: a recognizable favicon makes your tab findable in a sea of twenty others. The catch is that a modern favicon is not one file. Browsers, iOS, Android, and installable web apps each want their own sizes and formats, and getting them all right by hand is fiddly. This guide explains what you actually need and how to produce the whole set from a single image.

What files make up a modern favicon

For years a single favicon.ico at the root of your domain was enough. It still matters, but on its own it leaves gaps on phones and high-resolution screens. A complete, current setup is:

• favicon.ico — a multi-size icon file containing 16×16, 32×32, and 48×48 pixels. The .ico container holds several resolutions in one file, and browsers pick the sharpest one for each context. This is the universal fallback that even old browsers understand.
• PNG favicons — standalone favicon-16x16.png, favicon-32x32.png, and larger sizes up to 512×512. Modern browsers prefer crisp PNGs referenced explicitly, and search engines can use a larger icon next to your result.
• apple-touch-icon.png — a 180×180 PNG that iOS uses when someone adds your site to their home screen. iOS ignores transparency here and applies its own rounded mask.
• Android / PWA icons — 192×192 and 512×512 PNGs referenced from a web manifest. These are used when your site is installed on Android or runs as a Progressive Web App.
• site.webmanifest — a small JSON file that names your app and points to the 192 and 512 icons (including a maskable variant for adaptive icons).

That sounds like a lot, but it is all generated from the same source image. The only real decision you make is how the artwork should sit inside the icon.

Start from the right source image

The single most important rule: design for the smallest size. At 16×16 a detailed logo with thin text turns into an unreadable smudge. Favicons that work use a bold, simple mark — a single letter, a monogram, a recognizable shape — with strong contrast against both light and dark tabs.

Practical tips for the source file:

• Use a square, high-resolution image. A 512×512 (or larger) PNG, or better yet an SVG, gives the cleanest result because there is more detail to downscale from. Upscaling a tiny image never looks good.
• Mind the transparency. A transparent background lets the icon blend into light and dark browser themes. Keep it transparent unless thin strokes disappear on certain backgrounds.
• Leave a little breathing room. Browsers and operating systems often clip icons into rounded squares or circles. A small amount of padding keeps your mark from being cut off at the corners.

If your image is not square, the generator centers it and letterboxes it into a square frame. Adding a background color and a touch of padding usually makes a non-square logo look intentional rather than cramped.

Transparent vs. solid background

This trips people up, so it is worth being explicit. For a website favicon, transparent PNGs generally look best — they adapt to whatever the browser puts behind them. For app icons, the rules differ:

• iOS app icons must be fully opaque. Transparency is not allowed; the system rounds the corners for you. Always set a solid background before exporting an iOS set.
• Android adaptive icons are masked into different shapes by different launchers, so a solid or padded background and a centered mark are the safe choice.

When in doubt, preview both. The generator shows your icon at several sizes against the chosen background so you can judge readability before downloading.

From PNG to .ico: what is really happening

A .ico file is just a small directory header followed by several embedded images. Converting a PNG to ICO means downscaling your image to 16, 32, and 48 pixels and packing those frames into one file. Because icons are tiny, downscaling a larger source actually improves sharpness — you are throwing away nothing important and letting the browser render a clean, small image. The .ico itself is lossless; the only thing that affects clarity is how simple and high-contrast your source art is.

Adding the favicon to your site

Once you have the files, two steps remain:

1. Copy the files to your site root (the same folder as your home page), so they live at yoursite.com/favicon.ico, yoursite.com/apple-touch-icon.png, and so on.
2. Paste the HTML snippet into your <head> — ideally in a shared layout so every page is covered. A typical snippet looks like this:

<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="/site.webmanifest" />

The favicon.ico line covers older browsers, the PNG lines cover modern ones, the apple-touch-icon line covers iOS home screens, and the manifest line covers Android and installable PWAs.

App icons for the stores

Shipping a native app means exporting your icon at a dozen-plus sizes. iOS (through Xcode) expects sizes from 40 up to the 1024×1024 App Store marketing icon. Android uses launcher icons at several screen densities — mdpi, hdpi, xhdpi, xxhdpi, and xxxhdpi — plus a 512×512 icon for the Play Store listing. Switching the tool to App-icons mode produces all of them at once, sorted into ios/ and android/ folders so you can drag them straight into your project.

A note on privacy

The generator runs entirely in your browser using the Canvas API, so the icons are created on your own device. How any data associated with the tool is handled is described in our privacy policy. If you are working with something highly sensitive, an offline desktop tool is always the most private option — but for a logo destined to sit in a public browser tab, generating it in the browser is fast, free, and convenient.

The short version

Use a bold, square, high-resolution source. Keep website favicons transparent and give app icons a solid background. Generate the whole set — favicon.ico, PNGs, apple-touch-icon, Android icons, and a manifest — in one step, drop the files at your site root, and paste the HTML snippet into your <head>. That is a complete, modern favicon, done in a couple of minutes.