Drag & drop your image here
Supports: JPG, PNG, SVG, WebP, GIF, BMP, ICO
No image selected
Size: 32×32 pixels
Quick answer: To create a favicon for free, upload a square image (512×512px or larger works best) to an online favicon generator, pick the sizes you need 16×16, 32×32, and 180×180 cover most cases download the files, drop them into your website’s root folder, and paste the generator’s HTML code into your site’s <head> section.
That covers the basics. But if you’ve ever uploaded a favicon and had it come out blurry, cropped weirdly, or just refuse to show up at all, you know there’s more to it than that one paragraph suggests. Let’s go through it properly.
A favicon is that tiny icon sitting in your browser tab. It shows up in bookmarks too, and lately Google has started displaying it right next to your page title in mobile search results — which is a bigger deal than most people realize.
Here’s the thing: when a browser can’t find a favicon, it just shows a blank generic page icon instead. It’s a small detail, but it’s the kind of small detail that makes a site feel unfinished. I’ve seen plenty of otherwise well-built websites lose a bit of credibility just because of this one overlooked file.
A few reasons it’s worth fixing:
Most favicon problems don’t start at the generator — they start with the image you feed it. Fix this step and everything downstream gets easier.
You want a square image, ideally 512×512 pixels or bigger (an SVG is even better if you have one). Rectangular images get stretched or cropped in ways you won’t like. Keep the design simple and high-contrast — fine text, gradients, and busy detail all disappear once the image shrinks down to 16 pixels.
One thing beginners get wrong constantly: they try to use their full logo, text and all. Don’t. If your logo has a symbol and a wordmark together, pull out just the symbol. Text becomes an unreadable smudge at favicon size, no matter how good it looks on your homepage.
favicon.ico, a few PNGs, apple-touch-icon.png, and sometimes a site.webmanifest.<head> tag.
PNG is the more common starting point because it supports transparency — your icon can blend into a dark tab bar instead of sitting on an ugly white box. (Already have an image in the wrong format? Our free Image Converter handles PNG, ICO, and a dozen other formats in a couple of clicks.) But a lot of browsers and older platforms still expect a proper .ico file, which has one advantage PNG doesn’t: it can pack several sizes (16×16, 32×32, 48×48) into one file, and the browser just grabs whichever it needs.
Converting PNG to ICO isn’t complicated:
favicon.ico<link rel="icon" href="/favicon.ico" type="image/x-icon">
This trips people up more than anything else. Here’s what each size is actually for:
| Size | Used For |
|---|---|
| 16×16 px | Standard browser tab |
| 32×32 px | Taskbar icons, bookmarks, high-DPI/Retina displays |
| 48×48 px | Legacy Windows shortcuts |
| 180×180 px | Apple touch icon (iOS home screen) |
| 192×192 px | Android Chrome home screen |
| 512×512 px | PWA splash screens, app icon displays |
If in doubt, go bigger on the source image. You can always scale down cleanly — scaling up a small image never looks good, no matter which tool you use.
Here’s something a lot of people miss entirely: when someone saves your site to their iPhone home screen, iOS doesn’t touch your regular favicon at all. It specifically looks for a 180×180 Apple touch icon. No icon there, and iOS just grabs a screenshot of your page and slaps it on the home screen instead — not exactly the branding you were going for.
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">index.htmlIf you’re coding a site by hand, this is roughly what the full head block looks like:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Almost every time someone runs into this, it’s not actually broken. It’s just cache. Browsers hang onto favicons more stubbornly than they hang onto almost anything else on a page.
Work through this in order and it’ll usually sort itself out:
Honestly, if you don’t want to fuss with resizing and renaming files by hand, this favicon generator above does the whole set ICO, PNG, Apple touch icon from one upload. No signup, no watermark on the output.
Upload a square image to a free favicon generator, pick your sizes (16×16, 32×32, and 180×180 cover the basics), download the files, and add the HTML snippet to your site’s <head>.
PNG, in most cases — it supports transparency so your icon works on light and dark tab bars alike. If you have an SVG, even better, since it scales without any quality loss.
Start with a source image at least 512×512 pixels. From there you can generate the full set: 16×16, 32×32, 180×180, 192×192, and 512×512.
Nine times out of ten, it’s browser caching. Hard-refresh, clear your cache, and check that your HTML is pointing to the correct file path.
Yes — that’s the Apple touch icon, 180×180, no transparency. Skip it and iOS falls back to a generic screenshot instead of your actual branding.