Logo

MonoCalc

/

Favicon Generator

Media

Drop an image, paste, or click to browse

PNG, JPG, SVG, WebP, GIF or BMP · up to 10.0 MB · a square source works best

Shape and framing

Contain fits the whole image; cover fills and crops

Colours

iOS drops transparency on home-screen icons

Preview

Rendered at 512 px

Actual size, 1:1 — the honest legibility test

16px

32px

48px

In a browser tab, light and dark

My Site

My Site

On a home screen

iOS · My Site

Android · maskable

Files to generate

16–1024 px, for Electron apps or extensions
Apple and ICO assets always stay PNG

Manifest and paths

Where the icons will be served from

About This Tool

Favicon Generator – One Source Image, the Whole Icon Set

A modern website no longer ships a single favicon.ico. A desktop browser wants a crisp 16 or 32 pixel tab icon, iOS wants a 180 pixel apple-touch-icon, Android and installable web apps want 192 and 512 pixel PNGs listed in a manifest, and Windows shortcuts still reach for a real ICO container. This favicon generator takes one image, letter or emoji and produces every one of those files in your browser, along with the site.webmanifest, browserconfig.xml and the <head> snippet that ties them together.

What the tool actually does to your image

Each output size gets its own canvas at exactly that pixel count — the 16 pixel icon really is drawn as sixteen pixels, not a large icon shrunk with CSS. Before the artwork lands on that canvas it is downscaled in halving steps: 512 to 256, 256 to 128, and so on until it is within twice the target size. That matters more than it sounds. A single 512-to-16 draw discards thirty-one of every thirty-two pixels and turns fine detail into speckle, while repeated halving averages neighbouring pixels at every stage and keeps the shape readable.

SVG sources skip that chain entirely. A vector is re-rasterised at each target size, so a logo drawn from paths stays sharp at 512 and legible at 16 instead of inheriting the artefacts of a single bitmap render.

Why a real ICO still matters

Renaming logo.png to favicon.ico produces a file that many Windows shells and older user agents will not read. A genuine ICO is a container: a six-byte ICONDIR header holding the image count, then one sixteen-byte ICONDIRENTRY per image recording its width, height, byte length and offset, and finally the image payloads themselves. This tool writes that structure directly, embedding PNG data for each resolution, so a single favicon.ico can carry 16, 32 and 48 pixel versions at once and the system picks whichever it needs.

One quirk of the format is worth knowing: the width and height fields are a single byte each, and a value of 0 means 256. That is why 256 pixels is the largest image an ICO can hold.

Which sizes you actually need

The honest short list is smaller than most tutorials suggest. A favicon.ico plus a 32 pixel PNG covers desktop browsers. A 180 pixel apple-touch-icon.png covers iOS home screens. A 192 and a 512 pixel PNG cover Android and installable apps — Chrome looks for icons at both of those sizes before it will offer to install a site. Everything else, including the 96 pixel and Windows tile assets, is an optional extra costing a couple of kilobytes.

Transparency, and where it disappears

Transparency survives in the ordinary PNG set, so a logo sits cleanly on a light or dark tab bar. Two places do not keep it. iOS does not preserve alpha on home-screen icons, so this tool always fills apple-touch-icon.png with the Apple background colour you pick rather than letting the platform decide. Android maskable icons are cropped to a shape the device chooses, so they must be opaque right to the edge, and the guidance for those is to keep the meaningful content inside a centred circle covering about eighty percent of the icon's width. The tool's safe-zone overlay draws that circle for you.

Check the 16 pixel preview, not the big one
Almost every icon looks good at 512 pixels. The actual-size strip renders 16, 32 and 48 pixels at true 1:1 next to a magnified copy, because a logo with thin strokes, small text or a subtle gradient can look perfect in a mock-up and turn to mush in a real browser tab.

Text and emoji icons

No logo yet? Type one to three characters and the tool renders them centred on a coloured tile. Centring uses the measured ink box of the glyphs rather than the font baseline, so letters sit optically centred instead of drifting low, and the glyph shrinks automatically if it would otherwise overflow the padding box. A contrast readout warns when foreground and background fall below a ratio of 3:1, the point at which a shape becomes hard to distinguish at tab size. Emoji work the same way, with one caveat: they are rasterised with the emoji font installed on your machine, so the result is a snapshot of how it looks here, not everywhere.

Installing the files

For Next.js, Vite and most static hosts, copy everything into the public folder so the files are served from the site root, then paste the generated snippet into your <head>. If your icons live somewhere else, set the base path first and every link, plus the manifest entries, is rewritten to match. The snippet only ever references files that were genuinely produced, so switching sizes off cannot leave you pointing at an icon that does not exist.

Everything runs client-side using the File API, canvas and Blob. Your source image is never uploaded, which means the tool works offline and an unreleased brand asset stays on your own machine.

Frequently Asked Questions

Is the Favicon Generator free?

Yes, Favicon Generator is totally free :)

Can I use the Favicon Generator offline?

Yes, you can install the webapp as PWA.

Is it safe to use Favicon Generator?

Yes, any data related to Favicon Generator only stored in your browser (if storage required). You can simply clear browser cache to clear all the stored data. We do not store any data on server.

How does this favicon generator work?

Drop in an image, or type a letter or emoji, and every icon is drawn on an HTML canvas right in your browser. Each size gets its own canvas at exactly that pixel count, the favicon.ico container is assembled byte by byte from the encoded PNGs, and the whole set is zipped locally. Nothing is uploaded, so the tool works offline and your unreleased logo never leaves the machine.

Is the favicon.ico a real ICO file or just a renamed PNG?

It is a real multi-image ICO container. The file starts with a 6-byte ICONDIR header, followed by one 16-byte directory entry per image recording its width, height, byte length and offset, and then the PNG payloads themselves. That means a single favicon.ico can carry 16, 32 and 48 pixel versions at once and the operating system picks whichever it needs. Renaming a PNG to .ico produces a file that many Windows shells and older browsers refuse to read.

Which sizes do I actually need in 2026?

A 32x32 PNG and a multi-size favicon.ico cover desktop browsers, a 180x180 apple-touch-icon.png covers iOS home screens, and 192x192 plus 512x512 PNGs cover Android and installable web apps — Chrome asks for both of those before it will offer to install a site. The 16x16, 48x48, 96x96 and Windows tile sizes are optional extras that cost a couple of kilobytes each.

Why does my transparent logo come out with a white background on iOS?

iOS does not preserve transparency on home-screen icons, so a transparent PNG ends up composited against a flat colour there. Rather than let that happen unpredictably, the tool always fills apple-touch-icon.png with the Apple background colour you choose, while leaving every other PNG genuinely transparent. The same applies to the maskable Android icon, which is cropped to an unknown shape and so must be opaque to its edges.

Will a 512-pixel logo still be readable shrunk to 16 pixels?

Only if it is simple. A single 512 to 16 pixel draw throws away 31 of every 32 pixels and turns fine detail into noise, so this tool downscales in halving steps instead, which averages the pixels properly. Even then, thin strokes, small text and multi-colour gradients disappear at tab size, which is why the tool shows you the 16x16 result at true 1:1 next to a magnified view rather than only a flattering large preview.

Where do the generated files go in my project?

For most static sites and for Next.js, drop everything in the public folder so the files are served from the site root, then paste the generated head snippet into your HTML. If you host icons somewhere else, set the base path before copying the snippet and every link, plus the manifest icon paths, is rewritten to match.