Skip to main content

Favicon Generator

Drop a logo and get every file a site needs for its icon: the PNGs browsers ask for, the 180-pixel icon iOS puts on a home screen, the 192 and 512 Android wants, a multi-size favicon.ico for the requests that still go to the site root, and a web manifest tying them together. There is a preview of how the icon actually reads at 16 pixels, which is the size that decides whether a favicon works. Every file is rendered in this browser tab, written into the .ico container byte by byte, and zipped on your own machine — an icon set is a few kilobytes of PNG, and none of those kilobytes need to travel anywhere to be made.

Drop your logo or icon

A square PNG at 512px or larger works best, up to 50.0 MB. Every size is rendered from that one source here on your machine, so the logo never has to leave it.

Nothing generated yet. Drop a logo above and you get the whole set — PNGs, a multi-size .ico, and a web manifest — rendered in this browser tab and packaged as a zip without ever uploading your file.

Need the logo itself?

Design a mark on a Moda canvas, export it square, and bring it straight back here.

Try Moda free →

What an .ico file actually is

An ICO is not an image format so much as a container: a six-byte header, a sixteen-byte directory entry per image, and then the images themselves concatenated on the end. Each entry records a size and where in the file that image starts, which is why one .ico can hold 16, 32, and 48-pixel versions at once and let the operating system pick. The embedded images used to be a Windows bitmap variant; since Internet Explorer 11 they can be ordinary PNGs, which is what this tool writes — smaller files, alpha channel included. That structure is why an .ico is worth generating rather than renaming a PNG: a renamed PNG is not an ICO and some consumers will reject it.

Which browsers still want favicon.ico

Every modern browser reads a PNG favicon from a link tag and prefers it. What keeps favicon.ico alive is that browsers, crawlers, RSS readers, link-preview bots, and chat clients also request /favicon.ico from the site root without being told to — no markup involved. If it is not there you serve a 404 to that traffic forever, and some of those consumers show nothing rather than falling back. Putting the .ico at the root costs a few kilobytes and closes that off, which is why the set includes it even though the head snippet does not link to it.

Designing for 16 pixels

A favicon is read at about the size of a word’s letter. Wordmarks disappear, thin strokes vanish into the background, and gradients turn to mud — the icons that survive are a single shape, one or two colors, and generous margins. Start from a square image at 512 pixels or larger so every size downscales cleanly from one source rather than being enlarged from a small one, and check the 16-pixel preview above before shipping: if you cannot tell what it is there, neither can anyone scanning a row of tabs. A non-square source is squeezed to a square rather than cropped, so crop it to square first if the shape matters.

The manifest, and transparency on iOS

site.webmanifest gives Android and installed web apps a name, the two icon sizes they use, and the theme and background colors for the browser chrome and splash screen. It is short on purpose. The one platform quirk worth knowing is Apple’s: iOS ignores transparency on a home-screen icon and composites it onto black, so a dark transparent mark becomes a dark square. Keeping transparency is right for a browser tab and wrong for iOS — if your mark is dark, give it a background color here and both cases look intentional.

Frequently asked questions

Is my logo uploaded to generate the icons?

No, and for a brand mark that has not launched yet that is often the deciding factor. The image is decoded once, redrawn at each size, encoded as a PNG per size, assembled into the ICO container, and zipped — every one of those steps inside the page. An unannounced logo can go through this tool without ever being handed to a third party. Two pieces of code arrive on demand rather than up front — the zip writer, and a HEIC decoder if that is what you dropped — and neither one carries your artwork back out.

What files are in the zip?

Six PNGs (16, 32, and 48 pixels for browser tabs and Windows shortcuts, 180 for the iOS home screen, 192 and 512 for Android and PWA installs), a favicon.ico holding the 16, 32, and 48 versions in one file, site.webmanifest, and head-snippet.html containing the same markup shown on this page. Unzip them into your site's root directory so they resolve at /favicon.ico, /apple-touch-icon.png, and so on.

Do I still need all those sizes?

This set is deliberately much shorter than the forty-file packs older generators produce. Those existed for Windows tiles, old Android versions, and a decade of iOS devices that each wanted a bespoke size — none of which are worth maintaining now. The six PNGs plus the .ico cover browser tabs, both mobile home screens, and the bots that ask for the root icon; anything more is files to keep in sync for no visible gain.

Why does my new favicon not show up?

Favicons are cached unusually aggressively — often past a normal hard refresh, and sometimes in a separate store from the page cache. Check the file loads directly at its URL, then try a private window, which is the quickest way to see the truth. It is also worth confirming the files really are at the site root: a favicon linked as /favicon-32x32.png that actually sits in /assets/ fails silently, showing the default globe rather than an error.

Can I use a photo as a favicon?

You can, and it will work, but it will not read. At 16 pixels a photograph becomes an indistinct smudge of averaged color — there is no detail budget for a face or a scene. If a photo is all you have, crop hard to one high-contrast element before generating, or use a letter on a solid background instead. The preview on this page is there to make that call before you ship it.

Related tools

← All tools