How this favicon generator works
Drop a logo and you get four files: favicon.ico, apple-touch-icon.png, icon-192.png and icon-512.png. Your browser does the drawing. The first click pulls the icon code from this site, and after that your logo stays on your own machine.
favicon.ico is the strange one. Since Windows Vista an .ico is allowed to carry PNG data, so the file is really three PNGs at 16, 32 and 48 pixels behind a short index: six bytes of header, then sixteen bytes per entry giving a size, a byte length and an offset. This site's own favicon.ico is built that way and comes to 1,583 bytes for its three sizes. Writing that index takes a DataView and about a hundred lines, so no library gets downloaded to help.
The three swatches above the buttons hold the real icons at their real pixel counts, painted by the same code that writes your download. Sixteen pixels is not much room. A mark with two shapes in it goes to mush there, and you get to see that before you paste anything into a template.
From the 512 × 512 test logo the whole set weighs 17,978 bytes: 1,943 for favicon.ico, 3,597 for apple-touch-icon.png, 3,731 for icon-192.png and 8,707 for icon-512.png. A 1200 × 900 photograph took 119 milliseconds from the button to four download rows.
Whole logo or middle crop
Square logos need no decision. A wide one does, and the two buttons say which way it goes. Whole logo shrinks the picture until all of it sits inside the square and leaves the rest clear, which suits a wordmark you want to keep readable. Middle crop takes the center square and blows it up to the edges, which suits a photo or a badge whose subject sits in the middle. The 480 × 120 test wordmark keeps its yellow left cap and its black right cap under the first button. Under the second, the icon comes back flat green at its corner and at its middle: the caps sit outside the middle 120 × 120 and they are gone.
Nothing here gets enlarged
The set stops where your logo stops. A 128 px picture reaches 48 and no further, so you get favicon.ico on its own and the line above the button names the sizes that dropped out. A 512 built out of 128 pixels still holds 128 pixels of your logo, in a heavier file, and is soft everywhere it counts. The crop changes that ceiling too: fitted whole, the 480 × 120 wordmark reaches 192, and cropped to its middle it stops at 120.
Paste this into your page
The four files go in your site's root folder. Then four lines in the <head>:
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon-192.png" type="image/png" sizes="192x192">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
And site.webmanifest, with your own name in it:
{
"name": "Your site",
"short_name": "Your site",
"icons": [
{ "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
]
}
That last file is the one thing this page does not write for you, because it needs your site's name and this tool never asks you to type anything.
When you'd reach for it
- A site going live this afternoon. One logo, four files, no account and no email address.
- Replacing an ancient favicon. The 16-pixel bitmap somebody made in 2011 still works in a tab and looks terrible on a phone home screen. The 180 and 512 files fix that half.
- Checking a new mark before you commit to it. Drop the candidate, look at the 16 px swatch, then decide whether the shape survives.
- A logo you were sent as an SVG. Vector art gets redrawn at every size instead of scaled up, so a 64-unit drawing produces a genuine 512 × 512 PNG.
What this tool cannot do
It never invents pixels. A 128 px logo comes back as favicon.ico and nothing else. Start from 512 px or drop an SVG, which the browser redraws at each size instead of stretching. Vector art has one ceiling of its own: past about 16:1, drawing the short edge at 512 would want a canvas wider than 8192 px, so a 4000 × 100 banner comes off the browser 8192 × 204 and its middle crop stops at 204. The line above the button names that number when you hit it.
Nothing over 20 MB goes in. A logo weighs kilobytes, so the file that trips this is a photograph off a phone. Crop it down to the mark before you drop it, which is what the icon needs anyway.
It cannot draw an icon for you. No text-to-favicon, no emoji, no shape library, no color picker. Bring a picture.
It cannot read an old favicon.ico. The tool takes PNG, JPG, WebP, GIF, BMP and SVG. Last year's icon file will not go in one end and come out modernized.
apple-touch-icon.png arrives on white. iOS throws away the alpha channel and composites what is left onto black, so a transparent logo would land as a black tile on somebody's home screen. The tool fills white first. On the 64 px test mark, the corner of that file reads 255,255,255 while the same corner of icon-192.png stays at zero alpha. A white logo on a transparent background is the case this hurts, because it will vanish into that fill.
It writes no site.webmanifest. See the JSON above, and put your site's name in it.
Nothing above 256 fits inside the .ico. A directory entry stores width and height in one byte each, with zero standing in for 256, so the 512 you asked for lives in icon-512.png and cannot live in the container.
Animated GIFs contribute frame one. There are no animated favicons here.
No rounded corners, no maskable padding. Android's maskable icons want a safe zone inside the square and this tool does not add one, so a full-bleed logo may get its edges shaved on some launchers.
One logo per run. The output filenames are fixed, so a second picture would only overwrite the first one's files.
Windows XP and Internet Explorer 10 will not show it. They predate PNG inside .ico and want a bitmap entry instead. Chrome, Edge, Firefox, Safari and every Windows since Vista read this file.
Frequently asked questions
Which sizes do I actually need in 2026?
The four files above cover it. Browsers read favicon.ico for the tab and the bookmark bar, iOS reads apple-touch-icon.png when someone saves your site to a home screen, and the two PNGs are what a web app manifest asks for.
Why does the 16 px swatch look soft on my phone?
Each swatch holds exactly that many pixels, and a high-density screen stretches them to fill the space. A real tab on that phone would reach for the 32 px copy instead. Judge the shapes there, not the sharpness.
Is my logo uploaded anywhere?
No. The conversion runs in your browser tab. Nothing is sent to this site and nothing is stored.
Can I get 64 px or 128 px in the .ico?
Not from this page. Browsers pick 16 or 32 for a tab and Windows picks 48 or 256 for its shell, so the extra entries would add weight nobody reads.
Why does the download row show one number instead of a percentage?
Because the two weights have nothing to say to each other. The 512 × 512 test logo is 3,663 bytes and its favicon.ico is 1,943; a 240 × 160 test picture of 751 bytes produced a 742-byte icon, near enough a wash. Neither run compressed anything. Both threw away resolution, and a percentage would take credit for the wrong thing.
Does transparency survive?
In favicon.ico, icon-192.png and icon-512.png, yes. apple-touch-icon.png is the exception described above.
My logo is a screenshot with a white background. Will it work?
It will produce icons, and they will be a white square with something small in the middle. Trim the picture down to the mark first, or key the background out, then come back.