Favicon Generator
Turn one picture into the full set of favicon sizes plus a .ico file, generated on your device.
Processed on your device — no upload
How to use it
- Choose a square image, ideally 512px or larger.
- Press generate — every size is produced at once.
- Download the .ico and the PNG sizes you need.
How it works
Each size is produced by drawing your image onto a square canvas of that size. The source is scaled to fit rather than to fill, and centred, so a non-square picture keeps its proportions with transparent padding instead of being stretched into something distorted.
The .ico file is assembled by hand. ICO is a container format: a six-byte header, then a sixteen-byte directory entry per image giving its dimensions and where its data begins, then the image payloads. Modern browsers accept PNG payloads inside it, so the tool packs the 16, 32 and 48 pixel PNGs into one file that browsers pick the right size from automatically.
The sizes are not arbitrary. 16 and 32 are the browser tab at standard and high-DPI. 48 is used by Windows shortcuts. 180 is Apple's home-screen icon. 192 and 512 are what a web app manifest asks for on Android, the 512 being used for the splash screen.
Detail disappears fast at 16px. That is 256 pixels in total. A logo with fine lettering becomes an unreadable smudge. Icons that work at that size are simple shapes with strong contrast, which is why so many are a single letter or mark.
A worked example
You have logo.png, 1024×1024 with a transparent background, for a site you are launching.
Choose it and press generate. Six PNGs and one favicon.ico appear. The small previews are rendered without smoothing so you see the 16px icon as a browser actually shows it — which is the moment most people discover their logo does not survive at that size.
Download favicon.ico, apple-touch-icon.png, icon-192.png and icon-512.png, put them in your site root, and add:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Your site.webmanifest then points at the 192 and 512 PNGs for Android.
If your source is a wide wordmark rather than a square, the icons will contain the whole wordmark shrunk into a square with padding — legible at 512px, illegible at 16px. The fix is editorial rather than technical: crop to just the symbol or the first letter, and generate from that.
Questions
Which icon sizes does a website need?
The classic 16 and 32 pixel icons, a 180 pixel apple touch icon for iOS home screens, and 192 and 512 for Android. All of them come out of one source image here.
Is my logo uploaded to generate the icons?
No. Every size is drawn on a canvas in your browser and the .ico is assembled in memory on your device. Nothing is transmitted.
What size should my source image be?
Square and at least 512px. Smaller sources have to be upscaled for the large icons and look soft. A 1024px original is ideal.
Which files do I actually need?
favicon.ico covers browsers broadly, apple-touch-icon.png covers iOS home screens, and icon-192 with icon-512 cover Android through a web manifest. The 16, 32 and 48 PNGs are already inside the .ico.
Why does my logo look bad at 16 pixels?
Because 16×16 is 256 pixels in total. Fine lettering and thin lines cannot survive it. Icons that work at that size are simple, high-contrast shapes — often a single letter or mark.
What if my image is not square?
It is centred with transparent padding rather than stretched, so it keeps its proportions. For a better result, crop to a square first.
Does the .ico contain more than one size?
Yes — 16, 32 and 48 pixels in a single file. Browsers and Windows pick whichever fits the context they are drawing.
Is transparency preserved?
Yes. All the icons are PNG, including the payloads inside the .ico, so transparent backgrounds carry through.
Where do the files go?
The root of your site, alongside index.html, then reference them from the head of your pages. favicon.ico at the root is also found automatically by most browsers even without a link tag.
Related Image tools
Compress Image
Shrink the file, keep the picture
open$termiva convert photo.png --to webpConvert Image
JPG, PNG and WebP, both ways
open$termiva resize photo.jpg --width 1200Resize Image
Set exact pixel dimensions
open$termiva crop photo.jpg --ratio 1:1Crop Image
Cut to a shape or a selection
open