ColorKitFree favicon generator
Favicon generator that emits the whole set
Free and without a signup: upload one square logo and this page writes favicon.ico carrying 16, 32 and 48 px frames, a 32 px PNG, a 180 px Apple touch icon, 192 and 512 px PNGs for the manifest, site.webmanifest itself, and the head markup that ties them together. Every frame is drawn by canvas in this tab and the ZIP is assembled here too, so a 10 MB source file never leaves the machine. The 32 px render is also measured against a light and a dark tab strip, because a dark mark vanishing into Chrome’s dark tabs is the failure nobody notices until the site is live.
- 100% free
- No signup
- 6 to 8 files
- 16/32/48 in the .ico
- Manifest included
A square PNG or SVG of at least 512 px gives every file in the set something to work with. An SVG is also passed through untouched as icon.svg.
Press Ctrl+V anywhere on the page to drop in a logo copied from a design tool — no need to click the field first.
How to generate a favicon set
One upload, two colors, and the files plus the markup are ready to commit.
Upload the largest version of the mark you have
A 512 px square PNG or an SVG gives every file in the set room to work; anything smaller than 180 px will be upscaled for the Apple icon and look soft on a home screen. An SVG is rasterized separately at each target size rather than resampled from one bitmap, and it is also copied into the set untouched as icon.svg. A wide logo is fitted inside the square with the sides left empty, so if your mark is a full lockup, crop the symbol out of it first.
Set the two colors and the two names
The fill color is painted behind the artwork on the Apple touch icon and the maskable icon, and is written into the manifest as background_color; theme_color is the separate value Android paints the status bar with. Manifest name is what an install prompt shows in full, short name is the label under the installed icon and is cut off past about 12 characters on most launchers.
Unzip at the web root and paste the markup
favicon.ico has to end up at the root of the domain, because browsers, feed readers and crawlers request /favicon.ico whether or not any markup points them there. The other files can live wherever you like as long as the href matches. Copy the head snippet last — it is written to match the files that were actually generated, so it gains an SVG line when your source was a vector and never links the 192 and 512 PNGs, which the manifest already declares.
Technical specifications
| Files produced | Six by default, seven with the maskable icon, eight when the source is an SVG. Saved one at a time or as a single stored — not deflated — ZIP |
|---|---|
| Sizes rendered | 16, 32 and 48 px inside favicon.ico; 32, 180, 192 and 512 px as separate PNGs; a second 512 with the artwork held inside the central 410 px for masking |
| favicon.ico layout | Three uncompressed BMP frames — 6-byte header, 48 bytes of directory, then 1,128 + 4,264 + 9,640 bytes of pixels. 15,086 bytes whatever the artwork is |
| Apple touch icon | 180×180, alpha flattened onto the fill color because iOS composites transparency onto black, corners left square for the system mask to round |
| Web manifest | site.webmanifest with name, short_name, display standalone, theme_color, background_color and an icons array of 192, 512 and the maskable 512 |
| Head markup | Five lines, six when an SVG is in the set. The 192 and 512 PNGs are deliberately not linked — Chrome reads those from the manifest |
| Tab-strip check | Alpha-weighted average color of the 32 px render, scored against #ffffff and against Chrome's #202124 dark strip; anything under 3:1 is flagged |
| Source file | PNG, JPEG, WebP, GIF or SVG up to 10 MB, read by FileReader in the tab — no upload endpoint exists on this domain |
Frequently asked questions
Which of these files has to sit at the site root?
Only favicon.ico. It is the one file requested by convention rather than by markup: browsers, RSS readers and crawlers ask for /favicon.ico on their own, so a 404 there shows up in your logs forever. Everything else in the set is found through the href you write, so /assets/icons/apple-touch-icon.png is fine as long as the link tag says so.
Is a .ico still worth shipping when every browser reads PNG?
Yes, and it costs 15,086 bytes. Windows uses it for a pinned shortcut, plenty of feed readers and link-preview services fetch nothing but /favicon.ico, and it is the only file in the set that answers a request no markup made. It is also the one file that carries three sizes at once, so a low-DPI tab gets a hand-sized 16 px frame instead of a downscaled 512.
Why did my Apple touch icon come out as a black square?
Because iOS composites a transparent home-screen icon onto black rather than onto the wallpaper, and a white logo on transparency then becomes invisible. This page flattens the 180 px icon onto the fill color for exactly that reason, so pick a fill that suits the mark instead of leaving it white by default. Do not round the corners yourself either — iOS applies its own superellipse mask and will clip a pre-rounded icon twice.
Android is cropping my icon into a circle and cutting the edges off.
That is a maskable icon being masked, and the fix is the safe zone. Android may apply any shape from a circle to a squircle, and the specification only guarantees the central circle of 80% diameter — 410 px of a 512 px canvas. The maskable file here scales your artwork into that region and fills the rest, which is why it looks smaller than the other icons when you open it in an image viewer and correct once it is on a home screen.
I replaced the file and the old favicon is still showing.
Chrome keeps favicons in a database inside the browser profile, separate from the HTTP cache, which is why a hard reload does not touch it. Shipping the icon under a new filename, or appending a version query to the href, updates it immediately for everyone; clearing it only on your own machine is done from the site data panel rather than from a refresh.
Can I ship one SVG and skip the raster files?
Not yet, though the SVG is worth including. Chrome has read SVG favicons since version 80, Firefox since 41 and Safari since 16.4, but an iOS home screen still needs the 180 px PNG, a Windows shortcut still needs the .ico, and an installed Android app still reads the manifest PNGs. When your upload is an SVG it is copied into the set unchanged and the snippet gains the line for it, which gets you the sharp vector on the browsers that support it and the raster fallback everywhere else.
My logo is wide rather than square. What does the generator do with it?
It fits the whole image inside the square and leaves the sides empty, transparent unless you have turned the fill on. That keeps the artwork intact but wastes most of the canvas, and a wordmark reduced to fit a 16 px tab is a grey smudge in any case. The usual answer is to take the symbol out of the lockup and use that alone.
About the modern favicon set
The favicon is older than most of the web platform: Internet Explorer 5 started asking for /favicon.ico in March 1999, and it asked for a Windows icon container because that was the format Microsoft already had. Everything since has been additions on top — Apple’s touch icon for the 2007 home screen, Microsoft’s start-screen tile, and the web app manifest that finally standardised the rest. The additions accumulated faster than they were retired, which is why so many generators still hand you thirty files: browserconfig.xml and the msapplication tile tags describe a Windows 8 start screen that Windows 11 no longer has, and the 57, 72, 114 and 144 px Apple variants are for iPhones that stopped receiving updates a decade ago. iOS has downscaled a single 180 px icon since iOS 8.
What is left is four consumers with four different appetites, and knowing which is which is the whole job. A desktop browser reads the link tags and prefers whichever it can render at the density it needs. iOS reads apple-touch-icon and ignores the manifest entirely. Android and installed web apps read the manifest and ignore link tags for the large sizes, which is why linking a 192 px PNG in head is markup nothing consumes. Windows reads the .ico when a page is pinned to a taskbar, and the .ico is the only file of the four that holds several resolutions at once — the ICO converter lays that container out entry by entry if you want to see what is inside one. Starting from a photograph rather than a logo is a different problem, and image to ICO has the crop tool for it.
The part that gets skipped is color. A tab icon is displayed at 16 CSS pixels against a strip whose color the user chose, not you: near-white in the light theme, #202124 in Chrome’s dark one. A dark navy mark scores about 1.3:1 against that dark strip and effectively disappears, and a pale mark does the same thing on light. This page reports both ratios from the average visible color of your 32 px render so the problem is visible before the deploy rather than after; if the answer is that the mark needs a different accent, the color wheel is the fastest way to find one that still belongs to the brand. The same reasoning applies one size up to the social card, where the artwork is judged at thumbnail size in a timeline. And when the source artwork is a vector, SVG to PNG is the same rasterizer without the icon-set wrapper around it.
What happens to the logo you upload
Every number on this page is worked out by JavaScript running in the tab you are reading it in. Nothing you type, paste or open is uploaded, logged or kept, which is also why the tools carry on working after you disconnect from the network.
The word upload is a habit rather than a description here: the file control hands the bytes to a FileReader, the canvas draws them, and the ZIP is assembled from the results. There is no endpoint on this domain that could receive an image even if the page tried to send one.