Favicon Generator
Build a favicon.ico from any image, with every size a browser asks for packed into one file.
Make a Favicon Without Uploading Anything
A favicon is the small image a browser shows in the tab, in bookmarks and beside a shortcut. The classic file for it is favicon.ico, which is not really one image: the ICO container holds several square frames, and the browser picks the size it needs. This page opens the Image Converter with ICO output and the usual four frames selected, so you can drop a logo in and get that file straight back.
Everything happens in your browser. The frames are drawn on a canvas and the container is assembled byte by byte in the page, so your logo never leaves the machine — worth knowing if the design is not public yet.
What goes in the file
| Frame | Where the browser uses it |
|---|---|
| 16 px | The tab, and the bookmark list |
| 32 px | High-density screens, the address bar, pinned tabs |
| 48 px | Windows shortcuts and some desktop contexts |
| 256 px | Large shortcut icons, and anything that scales the icon up |
The Icon sizes menu also offers the classic three-frame set, or a single 256 px or 32 px frame when you know exactly what you need. Because the frames are fixed squares, the quality slider and the resize options do not apply here and the page hides them.
Start from the right image
- Square beats wide. A non-square image is fitted inside the square with transparent padding, so a wide logo ends up small in the middle. Crop it to a square first, or use just the mark rather than the full wordmark.
- Simple beats detailed. At 16 px a line of text is a grey smudge. Most recognisable favicons are one letter, one shape or one silhouette.
- Give it some contrast. The icon sits on the browser's own background, which is light in one theme and dark in the other. A shape that only works on white disappears in dark mode.
- Start large. Feed in at least a 256 px image so the biggest frame is not upscaled; the smaller frames are produced by scaling down, which is where detail is lost gracefully.
Putting it on your site
Dropping favicon.ico in the site root is enough for every browser, because they all look there by default. To be explicit, or to serve a PNG alongside it, add a link tag in the page head: <link rel="icon" href="/favicon.ico" sizes="any">. Many sites pair the .ico with a 180 px PNG for apple-touch-icon, which you can produce here too by switching Output back to PNG and resizing.
If the old icon keeps showing after you replace the file, that is caching rather than a bad file: browsers hold favicons for a long time. A hard reload, or adding ?v=2 to the link tag, settles it.
Other formats from the same tool
The converter also writes PNG, JPG and WebP, and can compress to a target size in KB. If you came here for a plain conversion rather than an icon, PNG to JPG and PNG to WebP start on those instead.