Favicon Generator
One image in, the whole set out: favicon.ico, the small PNGs, the phone home-screen icons, and the exact HTML that links them.
What each file is for
- favicon.ico — the classic. Browsers still ask for it at the root of your site whether or not you link anything, so having one there stops a stream of failed requests in your logs. It holds 16, 32 and 48 pixel versions in one file.
- 16 and 32 pixel PNGs — what a browser tab and a bookmark bar actually draw. Two sizes because a high-density screen wants the bigger one squeezed into the same space.
- apple-touch-icon (180) — what an iPhone or iPad uses when someone adds your site to their home screen.
- 192 and 512 — what Android and installable web apps use for the home screen and the loading screen.
Why the tiny ones look rough
A favicon is sixteen pixels across. That is two hundred and fifty-six dots in total, and no amount of clever shrinking makes a detailed logo readable in it. Designers hand-draw the small sizes for exactly that reason.
What this page does is shrink in stages, halving repeatedly rather than jumping straight down, which avoids the jagged edges you get from one giant step. It cannot decide what to leave out. The single most useful thing you can do is start from something simple — a bold letter or a plain shape — and let the fine print go.
Square or not
Icons are square and most images are not. You choose what happens: keep the whole picture with space around it, or fill the square and lose the edges. Empty space is transparent unless you ask for a colour, and transparent is usually right for a tab, where the browser draws its own background, and wrong for a home screen, where some phones fill it with black.
One honest limit
A favicon that looks fine on a light tab can vanish on a dark one, and browsers now switch between the two automatically. Check the small previews against both backgrounds before you decide, especially if your icon is mostly dark.
Frequently asked questions
Do I still need favicon.ico?
Yes, put one at the root of your site. Browsers request it automatically even when you link a PNG, so having it there avoids a stream of missing-file errors. It also covers older browsers and some feed readers.
Why is my favicon blurry?
Because sixteen pixels is very little space. A detailed logo cannot survive it. Start from something simple - a bold initial, a plain shape - or draw the small sizes by hand. The larger sizes here will look fine.
What is in the favicon.ico?
Three images, at 16, 32 and 48 pixels, each stored as a PNG inside the ICO container. Every current browser reads that form. Very old software from before the mid-2000s may not, and it is not a concern for a website.
Why does the icon have a black background on my phone?
Transparent areas are filled by the phone. Turn on the background colour box and pick one, and the home-screen icons will be filled with it instead.
Is my image uploaded?
No. Every size is drawn by your own browser, packed into the zip on your machine, and never sent anywhere.
Is my text sent anywhere?
No. Everything happens in JavaScript inside your own browser. Nothing is uploaded and nothing is saved - close the tab and it is gone.