A real .ico file, not a renamed PNG
A favicon is the small icon a browser shows in the tab, in bookmarks and in history. The classic container for it is the .ico format, which is not a single image at all but a tiny archive: a six byte header, a directory describing each icon, and then the image data itself. This tool builds that structure properly, packing three PNG compressed versions of your image at 16, 32 and 48 pixels into one favicon.ico. Browsers then pick whichever size fits best, so the tab icon stays crisp instead of being a blurry shrink of one big image.
Simply renaming a PNG to favicon.ico sometimes appears to work, because modern browsers are forgiving, but plenty of software is not. A genuine .ico is the version that works everywhere, including older browsers, Windows shortcuts and pinned sites.
Why three sizes, plus one for Apple
At 16 pixels there are only 256 pixels to play with, so the browser tab needs an image drawn for that size rather than scaled on the fly. The 32 pixel version covers high density displays and task bars, and 48 pixels covers desktop shortcuts. Alongside the .ico, the tool produces a separate 180 pixel PNG named apple-touch-icon.png, which iPhones and iPads use when someone saves your site to their home screen. iOS ignores .ico files for this, so the extra PNG is not optional if you care how the shortcut looks.
Non square images are cropped to their largest centred square first, because every icon slot is square. The preview shows the exact crop before you download anything.
Installing the favicon on your site
Upload both files to the root of your site, so they are reachable at /favicon.ico and /apple-touch-icon.png, then paste the two link tags from the tool into the head of your pages. Browsers will usually probe the root for favicon.ico even without the tag, but declaring it removes the guesswork and lets caches behave predictably. If you ever change your icon, keep the same file names and paths; browsers cache favicons aggressively, so a hard refresh or a short wait may be needed before the new one shows.
Design wise, favicons reward simplicity. A single bold shape or letter on a plain background reads clearly at 16 pixels, while thin strokes, gradients and small text dissolve into mush. If your logo is detailed, consider a simplified mark just for the favicon, exactly as most major sites do.
Generated on your device, never uploaded
Everything happens in your browser. The image is read locally, resized on an invisible canvas, and the .ico bytes are assembled by JavaScript on your own machine, then offered back as a download. Nothing is sent to a server, nothing is logged and nothing is stored, so the tool is safe for unreleased logos and client work. Close the tab and every trace is gone.
Because the work is local it is also instant: you can try different source images as many times as you like and download only the version you are happy with. If your source image is huge, resize it down first with the image resizer for a faster preview, although the favicon output will be identical either way.
Frequently asked questions
Is my image uploaded anywhere?
No. The .ico file is assembled byte by byte by JavaScript running on your own device. Your image never travels over the internet, nothing is logged or stored, and closing the tab removes everything.
What sizes does the favicon contain?
The .ico file contains three versions of your image at 16, 32 and 48 pixels square, which covers browser tabs, bookmarks and desktop shortcuts. You also get a separate 180 pixel PNG for the Apple touch icon that iPhones and iPads use when a site is saved to the home screen.
What happens if my image is not square?
Favicons are always square, so the tool crops your image to its largest centred square before resizing. If your logo sits off centre, crop the image yourself first so the important part survives. The preview shows exactly what will be used.
Where do I put the files on my site?
Upload favicon.ico and apple-touch-icon.png to the root of your site, then paste the two link tags from the tool into the head of your pages. Most browsers will also find favicon.ico at the root automatically, but declaring it is the reliable route.
What kind of image works best?
A simple, high contrast mark on a plain or transparent background. At 16 pixels there is no room for fine detail, thin lines or small text, so favicons work best when the shape reads clearly even as a thumbnail. Start from a square image of at least 180 pixels if you can.