Favicon Generator
Turn one square image into favicons at every size, a real multi-size favicon.ico, and the HTML to add - all in your browser.
HTML to add to your <head>
How to use it
- Drop a square image - a logo or mark works best, ideally 512 pixels or larger so every size stays crisp.
- Download the sizes you need, plus the multi-size
favicon.ico. - Put the files in your site root.
- Copy the HTML snippet into your
<head>.
What it does, and what it does not
It does: generate PNG favicons at every size that matters (16 to 512), a real multi-size favicon.ico containing the 16, 32 and 48 pixel versions, and the exact HTML to reference them - all in your browser.
It does not: upload your image or add rounded corners and effects. Give it a clean square and it produces sharp icons from it.
Reference
The favicon is the small icon in the browser tab, the bookmark, and - importantly for SEO - next to your listing in Google's mobile search results. Google shows a favicon beside every mobile result, so a crisp, recognisable one is a small but real branding and click-through advantage. The catch is that "favicon" now means a whole set of files at different sizes for different places, and getting the set right is fiddly to do by hand.
The workhorse is still favicon.ico at the site root - a single file that can hold several sizes, traditionally 16, 32 and 48 pixels, which this tool builds for you as a genuine multi-size ICO. On top of that, modern browsers and Google prefer a PNG: Google specifically wants one that is a multiple of 48 pixels (48, 96, 144 and so on) and at least 8 pixels, referenced with a rel="icon" link. Apple devices use a 180 pixel apple-touch-icon for the home screen, and Android and PWAs use 192 and 512 pixel icons. This tool produces all of these from one source image so you are covered everywhere.
A few tips for a sharp result. Start from a square image at 512 pixels or larger; scaling down stays crisp, scaling up does not. Use a simple, high-contrast mark rather than a detailed logo with small text, because at 16 pixels fine detail turns to mush - many brands use just their symbol or a single letter for the favicon. Keep a little padding so the icon is not clipped. Once the files are in your site root and the snippet is in your <head>, remember that Google caches favicons and only refreshes them when it recrawls your homepage, so a change can take a little while to show in search. Everything here is generated locally, so your logo never leaves your machine.
Questions
Do I still need a favicon.ico?
Yes. The .ico at your site root remains the most broadly compatible favicon and can hold several sizes. This tool builds a real multi-size ICO alongside modern PNG icons.
What size does Google want?
Google wants a favicon that is a multiple of 48 pixels - 48, 96, 144 and so on - and at least 8 pixels, referenced with a rel="icon" link. It shows this beside your mobile search results.
Why does my favicon look blurry?
Usually because the source was too small or too detailed. Start from a 512 pixel or larger square and use a simple, high-contrast mark - fine detail disappears at 16 pixels.
My favicon changed but Google shows the old one.
Google caches favicons and only updates them when it recrawls your homepage. Allow some time after publishing the new files.
Is my image uploaded?
No. Every icon, including the ICO, is generated in your browser. Your image never leaves your device.