Favicon Generator
Generate favicons
Generate favicons Runs locally in your browser
About the
The Favicon Generator takes an image, crops it to a square from the centre and produces a 64 by 64 icon file you can drop into a site root. The crop matters more than it sounds: browsers render favicons square, so a wide logo squeezed into a square looks wrong, while a centre crop usually keeps the recognisable part. The image is processed on a canvas in your browser, so nothing is uploaded.
Where people use the
- Generating a favicon from a logo before a site launch.
- Producing a quick icon for a prototype or an internal tool.
- Replacing a placeholder icon left over from a template.
- Making a square version of a wide logo for use in a tab.
How to use the
- 1
Upload an image
Pick the logo or image you want to use. A square source image gives the best result because nothing is cut off.
- 2
Let it crop and resize
The shortest side is used as the crop square, taken from the centre, and the result is drawn at 64 by 64.
- 3
Compare the two previews
The original and the icon are shown side by side so you can see what the crop removed.
- 4
Download the icon
Save the file as favicon.ico and place it in your site root, or upload it wherever your framework expects static assets.
Tips and best practices
- Upload a square image to avoid losing the edges of a wide logo.
- Give the icon a plain background if it will be shown on both light and dark tabs.
- Hard reload after uploading; browsers cache favicons aggressively.
Frequently asked questions
Why is my logo cropped?
Because favicons are square. The tool takes the largest square that fits, from the centre. A square source image avoids cropping altogether.
What size should I upload?
At least 64 by 64, and square if you can. Larger images are simply scaled down; smaller ones will look soft.
Do I need more than one size?
For most sites one icon is enough, because browsers scale a 64 pixel icon down for tabs. If you want crisp results everywhere, generate 16, 32 and 180 pixel versions separately.
Where does the file go?
In the site root as favicon.ico, which browsers request by convention. If your framework serves static files from a directory such as public, put it there instead.
Why does the tab still show the old icon?
Because it is cached. Hard reload the page, or open it in a private window, and the new icon appears.