One image is enough. Get favicon.ico, PNGs in every size, and a ready-to-paste HTML snippet — all as a ZIP.
Click to choose a file Drag an image here
Square PNG recommended (512px or larger)
How to use it
- 1Drag in the image you want as an icon, or click to upload it (a square PNG, 512px or larger, is recommended).
- 2As soon as it’s uploaded, the favicon.ico and PNGs in several sizes are generated automatically.
- 3Copy the HTML snippet shown alongside and paste it into your site’s <head>.
- 4Hit Download ZIP, drop the files into your site folder — that’s it!
Handy tips
- Upload a square image so it doesn’t get squished — non-square sources can end up stretched.
- Icons display tiny, so a simple, bold shape reads better than thin lines or small text.
- Keep the files from the ZIP at your site’s root so the paths in the snippet (/favicon.ico, etc.) line up right away.
What's in the ZIP — favicon formats at a glance
The ZIP you get contains a single favicon.ico that stacks 16, 32, and 48px images inside it. The browser picks whichever size fits the moment, so one file keeps the tab, bookmarks, and address bar looking sharp. Alongside it are standalone favicon-16x16.png and favicon-32x32.png files, which stand in as PNGs where the ico format is read poorly.
The apple-touch-icon.png — used when someone adds your site to the home screen on an iPhone or iPad — is built at 180px. For Android and PWAs there are 192px and 512px PNGs, plus a site.webmanifest that ties those two together. In short, the set covers everything from a desktop browser tab to a home-screen icon on a phone.
Making a source that renders well — simple, high-contrast, square
A favicon shows up very small on screen, around 16 to 32px. That means fine text and thin lines turn to mush and become unreadable. It's best to keep it as simple as possible — leave just the one key symbol from your logo large, or pull out the first letter of your company name. The stronger the contrast between the symbol and its background, the more it stands out at tiny sizes.
Prepare the source as a square. If the width and height differ, it can look squished or stretched once it's forced into a square icon. A little breathing room around the symbol also helps, so it doesn't crowd the edges when shrunk way down. Upload a square PNG of 512px or more and every size comes out crisp.
Applying the files to your site
Unzip the archive and put the PNG, ico, and webmanifest files at your site's top-level folder (the root). Then copy the HTML snippet shown on screen and paste it inside the page's <head> tag. That snippet acts as a signpost, telling the browser which icon to use in which situation.
The paths in the snippet are written from the root, like /favicon.ico. So as long as the files sit at the root, it works right away with no path editing. On services where you can't touch the <head> directly — WordPress, Notion, or a hosted blog — use that platform's own "favicon setting" and upload the favicon.ico or the 512px PNG there instead.
Frequently asked questions
A favicon.ico, PNGs in several sizes like favicon-16x16.png and favicon-32x32.png, an apple-touch-icon.png for Apple devices, 192 and 512px PNGs, a site.webmanifest, and the paste-ready HTML snippet (snippet.html).
Copy the snippet shown on screen and paste it into your site’s <head>. As long as the ZIP files sit at your site’s root, the paths in the snippet work right away.
Any image like PNG, JPG, or WebP works; a square PNG (512px or larger) with a clean transparent background is recommended. The result is built as a favicon.ico plus a set of PNGs.
No. Everything runs inside your browser, so your original logo never leaves your device. The ZIP is built right in the browser too.
Because icons appear at different sizes in different places. A browser tab is around 16–32px, bookmarks and shortcuts are bigger, and a phone's home-screen icon is much larger. Having the right size ready for each spot means it stays crisp everywhere, instead of one file being stretched or shrunk into a blur. Even the single favicon.ico bundles 16, 32, and 48px so the browser can pick for itself.
Browsers often cache the old favicon and keep showing it. Try a hard refresh (Ctrl/Cmd+Shift+R), open the page in a private window, or check again after a little while. It also helps to confirm the file paths match the snippet and that the files really landed at your site's root.