Generate a Favicon
Turn any logo into a favicon.ico plus every PNG size a site needs.
How to use the Favicon Generator
Upload your logo
Drop in a square PNG or SVG, ideally 512x512 or larger. Simple, high-contrast marks read best at 16 pixels.
Set the background
Keep it transparent, or pick a solid colour if your logo needs one behind it to stay legible on light and dark tabs.
Download and install
Save favicon.ico and the PNG sizes into your site root, then paste the HTML block into the head of your pages.
About the Favicon Generator
A favicon is the smallest piece of branding a site has and the one people use most: it is how a tab is identified among thirty others and how a bookmark is recognised in a list. A site without one shows a blank sheet of paper, which reads as unfinished no matter how good the rest of the design is.
The awkward part has always been that one file is not enough. Browsers want a favicon.ico at the site root, high-DPI tabs want a 32px PNG, iOS wants a 180px apple-touch-icon for the home screen and Android wants 192 and 512px versions for install prompts and splash screens. This tool renders all of them from a single image and packages the 16, 32 and 48px versions into a genuine multi-resolution .ico — not a PNG with the extension changed, which is what trips up the file when something old tries to read it.
Your logo is fitted inside each square rather than cropped to fill it, so nothing gets clipped off the edges, and you can keep a transparent background or set a solid colour behind it. The HTML block underneath is the exact set of link tags to paste into your head. Everything is rendered in your browser, so an unreleased logo never leaves your device.
Frequently asked questions
- What size should a favicon be?
- Start from at least 512x512 so every size is downscaled rather than blown up. This tool then produces 16, 32, 48, 180, 192 and 512px versions plus a multi-size .ico.
- Is this a real .ico file?
- Yes. It is a genuine multi-resolution ICO containing the 16, 32 and 48px images, not a renamed PNG.
- Where do I put the favicon files?
- In your site root, so favicon.ico sits at yoursite.com/favicon.ico, then add the link tags shown here to your head. Frameworks like Next.js can also pick up files placed in the app or public directory.