Favicon generator online: ICO, PNG and manifest

Q: What size should a favicon be?

The favicon.ico contains 16, 32 and 48 px. You’ll also want a 180 px PNG for iPhone and 192 and 512 px ones for Android. This tool generates all of them.

Q: Why won’t my favicon update?

Browsers cache it for a long time. Add ?v=2 to the link, or open the site in a private window to check the new one.

Q: Why does the iPhone icon have a background?

Because iOS doesn’t support transparency in apple-touch-icon and would paint the background black. The tool uses your background colour, or white if you chose a transparent background.

Which files a website needs today

You no longer need twenty sizes. These five files cover every browser, the phone home screen and Google search results:

favicon.ico with 16, 32 and 48 px inside: older browsers, RSS readers and Google ask for it, and Google looks for it in the root even if you don’t link it.
icon.svg: a single vector file that stays sharp at any size. Only generated in text mode.
apple-touch-icon.png at 180 px, for the iPhone home screen. It has no transparency, because iOS fills the background with black.
icon-192.png and icon-512.png, linked from site.webmanifest for Android and installable web apps.

How to install it

Download the ZIP, copy the files into the root of your site (where index.html lives) and paste the HTML into the <head>. If you change the icon later, the browser may take a while to notice because it caches it: renaming the file or adding ?v=2 to the link sorts it out.

Design tips

At 16 px you can’t make out detail: a letter, a symbol or the most recognisable stroke of the logo works better than the whole logo.
Check the icon in both tabs of the preview: a dark favicon disappears in the browser’s dark theme.
Each size is drawn at its real resolution rather than scaled down from the 512, so the 16 px one comes out as sharp as possible.

A placeholder favicon in one line

If you just need something while you build, the ximg.es generator already serves a square image with a letter, with nothing to download:

<link rel="icon" href="https://ximg.es/32x32/2563eb/fff.png?text=X">

Frequently asked questions

What size should a favicon be?

The favicon.ico contains 16, 32 and 48 px. You’ll also want a 180 px PNG for iPhone and 192 and 512 px ones for Android. This tool generates all of them.

Do I need favicon.ico if I already have the SVG?

Yes. Safari and some tools still don’t use the SVG, and Google and RSS readers request /favicon.ico directly.

Are my images uploaded to a server?

No. The icons are drawn with canvas in your browser and the ZIP is built there too.

Why won’t my favicon update?

Browsers cache it for a long time. Add ?v=2 to the link, or open the site in a private window to check the new one.

Why does the iPhone icon have a background?

Because iOS doesn’t support transparency in apple-touch-icon and would paint the background black. The tool uses your background colour, or white if you chose a transparent background.

What is site.webmanifest?

A JSON file that describes your site as an app: name, icons and colours. Android uses it when the site is added to the home screen.

Favicon generator

HTML for the <head>

Which files a website needs today

How to install it

Design tips

A placeholder favicon in one line

Frequently asked questions

More tools