Favicon Generator
Turn your logo into the little icon that shows on a browser tab. One image in, every size out — zipped, with the HTML to paste into your site.
How to Turn a Logo Into a Favicon
Drop in your logo — PNG, JPG, WebP or HEIC — and it's resized to every size a browser or phone asks for. Start from something square and at least 512×512 if you can. Small sources get blown up, and it shows at 32 pixels.
Everything happens in this browser tab. The image isn't uploaded, and nothing is stored.
You get a zip with all five PNGs and a snippet of HTML to paste into your
<head>, with the filenames already matching what's in the zip.
What Size Should a Favicon Be?
Short answer: there isn't one size, there are five, and they're all in the zip.
| Size | Filename | What it's for |
|---|---|---|
| 16×16 | favicon-16x16.png | The icon on a browser tab, and in your bookmarks list |
| 32×32 | favicon-32x32.png | The tab icon on a high-resolution screen — most of what people actually see |
| 180×180 | apple-touch-icon.png | iPhone and iPad, when someone adds your site to their home screen |
| 192×192 | favicon-192x192.png | Android and Chrome home screen icons |
| 512×512 | favicon-512x512.png | The large icon Android and app manifests ask for |
If a build tool or a Lighthouse report told you an icon was missing, the number it gave you is almost certainly 192×192 or 512×512. Both are in the set.
Why Your Favicon Isn't Showing Up
- The old icon is still showing. This is nearly always the browser cache rather than anything you did wrong. Browsers hold onto favicons far longer than other files. Do a hard refresh, and if it's still stubborn, open the icon file directly in a tab and reload that.
- You get a blank page or a globe icon. That's the browser failing to
find the file. Check that the path in your link tag matches where the file actually
sits — if the tag says
/favicon-32x32.pngthe file has to be at the root of your site, not in an images folder. - The link tags never got added. Uploading the files isn't enough on
its own. The snippet above goes in your
<head>, and the filenames have to match. - Starting from a small image. Anything under 512×512 has to be stretched to fill the larger sizes, and it comes out soft on a home screen.
- Using a photo or a detailed logo. At 16 pixels there's room for a letter or a simple shape. Wordmarks and photos turn into a smudge — crop to the one recognisable part of your logo instead.
- It's not showing in Google results. Google looks for it separately and on its own schedule, so that lags well behind your browser tab. Nothing to fix as long as the tags are right.
What is a favicon?
It's the little icon next to your site's name on a browser tab, in a bookmarks list, and on a phone home screen. WordPress calls it a site icon and other builders call it a browser icon — same thing.
Do I need an .ico file?
Not any more. PNG icons work in every browser in current use, and every one of the link
tags in the snippet points at a PNG. The .ico format hangs around from an era
of Internet Explorer that nobody is supporting now.
How do I turn my logo into a favicon?
Drop the logo file in above. Square works best — if yours is a wide wordmark, crop it down to the symbol or the first letter first, because at 16 pixels wide text is unreadable.
Why is my website icon showing as a globe?
The browser looked for your icon, didn't find it, and fell back to a default. Nine times out of ten the file isn't where the link tag says it is. Load the icon's URL directly in a tab — if that 404s, you've found it.
Why won't my favicon update?
Cached. Favicons are cached harder than almost anything else on a page, and it's normal to keep seeing the old one for a while after you've replaced it. Hard refresh first, and try a private window to see what a first-time visitor gets.
What size is the WordPress site icon?
WordPress asks for at least 512×512 and makes the smaller versions itself, so hand it the 512×512 PNG from the zip.
Can I use a JPG or a PNG as my favicon?
Upload either one — the tool converts to PNG on the way out. Use a PNG as the source if you have one, since a transparent background sits properly against a dark browser theme and a JPG's white box will not.
Where do the files go on my site?
The root, matching the snippet. If yours live somewhere else, edit the href
in each link tag to match — the paths just have to agree.