Favicon
Favicon generator
Upload your logo and take away the whole pack: the .ico with 16, 32 and 48 inside the same file, a PNG at every size, the Apple icon, the Android ones, the manifest and the tags already written. With a real-size preview, so you see how it holds up at 16 pixels before you ship it.
Your logo never leaves this page: it is cropped and converted right here.
Why it matters that this is not uploaded
A logo is almost never public material by the time it reaches a tool like this. It is a redesign that has not been announced, a client's identity before launch, or the icon of a product that has not shipped. Uploading it to a stranger's server so it can be shrunk to 16 pixels is a bad trade, and an unnecessary one: cropping an image and writing an .ico file needs no server at all. Here there is nowhere to send it.
How it works, in 3 steps
-
Drag your logo in
PNG, JPG, SVG, WebP or GIF. If it is under 512 pixels you are told which sizes will come out soft, rather than being handed them without a word.
-
Frame it and look at it small
Zoom, padding, rounded corners and background. Beside it, how it really looks in a tab, in dark mode and on a phone home screen.
-
Download and paste
A ZIP with the ten files, the manifest and the tags already written in order. Copy the snippet into your
<head>and you are done.
What people use it for
- Launching a siteIt is one of the last things left before publishing, and the one most often rushed.
- RebrandingRedoing the icons with the new logo, checking first that the shrunk version is still recognisable.
- Making it installable on a phoneThe Apple icon and the Android ones with the manifest, so the site looks right on the home screen.
- An icon without having a logoFor a side project, an internal dashboard or a demo: a letter or an emoji on a colour you pick.
- Turning a PNG into an .icoWithout installing anything, and with all three sizes inside the one file as it should be.
-
Getting the tagsEven if you already have the icons: the full
<head>snippet in order, which is the bit nobody knows by heart.
Why so many sizes are needed
Because every place your icon shows up asks for a different size, and none of them rescales well. Letting the browser shrink a 512-pixel image down to 16 gives a noticeably worse result than preparing that size separately: measured, shrinking in halving steps lands 99% closer to the ideal at 16 pixels than doing it in one jump. And 16 pixels is exactly where it shows.
What each file is
| File | Size | Where it shows up |
|---|---|---|
favicon.ico | 16, 32 and 48 inside | The tab, the bookmarks bar and Windows shortcuts. Many browsers and search engines request it from the site root even with no tag present. |
favicon-16x16.png | 16 px | The browser tab on a normal screen. The smallest size, and the one that decides whether your icon is recognisable at all. |
favicon-32x32.png | 32 px | The same tab on a high-density screen, and the Windows taskbar. |
favicon-96x96.png | 96 px | Shortcuts, some feed readers and certain Linux desktops. |
apple-touch-icon.png | 180 px | The iPhone and iPad home screen when somebody saves your site. iOS rounds the corners itself, so there is no need to round them first. |
android-chrome-192x192.png | 192 px | Android, the home screen and the app switcher. |
android-chrome-512x512.png | 512 px | Android on large screens and the splash screen when the site is installed as an app. |
site.webmanifest | — | Describes your site as an app: name, icons, bar colour. It is what makes the site installable. |
The .ico is a container, not an image
It is the part of the format almost nobody knows and the one most often got wrong. An .ico file does not hold an image: it holds several, at different sizes, inside the same file, with a small table at the start saying where each one begins. Each program takes the one it wants without rescaling anything.
Most online generators put a single image inside and leave it there. The result opens, throws no error, and the browser ends up shrinking it itself in the tab — exactly what you were trying to avoid. The one built here carries all three real sizes: 16, 32 and 48.
A museum detail, in case you ever run into it: in that table at the start, the width and the height take one byte each. Since 256 does not fit in a byte, the format reserves zero to mean 256. A zero that means two hundred and fifty-six.
What is lost at 16 pixels
A 16 by 16 square holds two hundred and fifty-six pixels in total. A logo with its name underneath does not fit in there: the text turns into a grey band and the thin lines vanish or smear.
What does work is keeping the recognisable part — the symbol, the initial, the shape — and dropping everything else. Thick forms, few of them, high contrast. That is why the tool shows the result at real size in the tab and in the size strip: so you decide by looking, not by imagining.
If your logo does not survive that reduction and you have no separate symbol, the second tab builds an icon from a letter or an emoji on the colour you pick. At 16 pixels a well-contrasted initial reads far better than a whole logo squeezed down, and the ink colour picks itself to contrast with the background.
Android's maskable icon
Android does not show icons as they are: it crops them to whatever shape the phone is set to — circle, rounded square, teardrop — and every manufacturer picks its own. That is why the manifest built here includes a version marked as maskable.
The practical consequence is that it pays to leave padding around the artwork: anything near the edge can disappear on one phone and not on another. The padding control in the editor is there for exactly that, which is why it starts with a little already applied.
If you are going to compress the result
The PNGs that come out are already light — the whole pack is around 30 KB — but if your site is tight on weight you can run them through the image compressor. One warning: do not compress the .ico with an image tool, because it is not an image but a container, and it will most likely come out broken.
Frequently asked questions
Why does the browser still show the old favicon?
Because the favicon is not kept in the page's normal cache: it lives in a separate one, and reloading with Ctrl+F5 does not clear it. This is the most common favicon question there is, and it almost never means you did anything wrong.
What works, in this order:
- Open the icon directly in a tab —
yoursite.com/favicon.ico— and reload that address withCtrl+F5(Cmd+Shift+Ron a Mac). - Check in a private window, which does not carry the old copy. That shows you the real one.
- If it persists, in Chrome you can clear it from the site settings (the icon left of the address) and deleting its data.
Updating for every visitor can take days, because each browser keeps its own copy. Meanwhile, a trick that works: add a version number in the tag — favicon.ico?v=2 — and the browser treats it as a different file.
Why are so many sizes needed?
Because every place your icon appears wants it differently and none of them rescales well. The 16 is the tab and bookmarks; the 32, the same on a high-density screen and the Windows taskbar; the 48, desktop shortcuts.
The 180 is the iPhone home screen, and the 192 and 512 are Android's, which also uses the big one for the splash screen when somebody installs the site. The table above breaks it down file by file.
What is favicon.ico and why is it still needed?
It is a container: several images at different sizes fit inside the same file and each program takes the one it wants. The one built here carries the 16, the 32 and the 48.
It is still needed because many browsers and search engines request /favicon.ico from the root even when no tag mentions it, and because it is what older programs understand. Most generators put a single image inside, and then the browser ends up rescaling it in the tab.
Is my image uploaded to a server?
No. Reading the image, cropping it, generating each size, writing the .ico byte by byte and assembling the ZIP all happen inside your browser. There are no accounts, no database, and no request that carries your image anywhere.
It matters because a logo is usually brand material that is not public yet. Once the page has loaded, disconnect from the internet and check: it still works exactly the same.
What size should the image I upload be?
Square, and 512 pixels across or more: that way every size is produced by shrinking, which is what looks crisp. Upload something smaller and the tool warns you and names the sizes that have to be invented by scaling up.
Best of all is an SVG: having no resolution of its own, every size comes out perfect. If the image is not square it is centred inside the square and you adjust the framing with zoom and padding.
Does a logo with text work?
At the large sizes yes; at 16, almost never. A 16 by 16 square holds 256 pixels in total, and a written word turns into a grey smudge.
That is why the tool shows it at real size before you commit. What works is keeping the symbol or the initial and leaving the text out; and if you have no symbol, the second tab builds one from a letter or an emoji, which reads far better at 16 pixels.
Where do the files and the tags go?
The files, usually in the site root, next to the index. The tags, inside the <head>: the tool hands them over written and in order.
If you would rather use another folder, type it in its field and the paths adjust themselves. One exception: favicon.ico is best kept in the root as well, because some programs request it there without looking at the tags.
What is the manifest file for?
It describes your site as if it were an app: name, icons, bar colour and how it opens once installed. Android reads it to put the icon on the home screen at good quality, and it is what makes the site installable.
It also includes a maskable version of the 512 icon, because Android crops to the phone's shape — circle, rounded square, teardrop. Which is why leaving padding around the artwork is a good idea.