Skip to main content

Favicon Generator

Turn any image into a complete favicon set: a real .ico, every PNG size, a manifest and the HTML to paste in.

HOW TO

How to make a favicon

A favicon is the small icon in a browser tab, a bookmark and a phone home screen. Each of those wants a different size, which is why one file is rarely enough and why a favicon maker produces a set instead of a single image.

  1. 1

    Upload a square image

    Drag in a logo or graphic. PNG to favicon, JPG or SVG all work, and at least 512 pixels square gives the best results across every size.

  2. 2

    Check the previews

    Every size is generated instantly, including a tab-sized preview so you can see whether the design still reads at 16 pixels.

  3. 3

    Download the set

    Take the whole package as a ZIP with the .ico, the PNGs, a manifest and the HTML, or grab individual files if you only need one.

USE CASES

Where your icon shows up

The same small graphic ends up in a surprising number of places.

Browser tabs

The 16 and 32 pixel versions identify your site among a row of open tabs.

Bookmarks

Saved links show your icon, making the site recognisable in a long list.

Phone home screens

Larger PNGs are used when someone adds your site to their home screen, which is the webclip part of a favicon and webclip generator.

Search results

Mobile search listings display a favicon next to the result on many engines.

Browser history

Icons make your site easier to spot when someone is looking back through history.

Pinned tabs and tiles

Desktop browsers and Windows tiles pick up the larger sizes for their own displays.

A new project

Create a favicon early so a site never ships with the browser default globe.

A rebrand

Regenerate the whole set from a new mark so every size updates together.

BACKGROUND

What a favicon is and which sizes you need

The word is a contraction of "favourites icon", from the days when bookmarks were called favourites. It arrived with Internet Explorer 5 in 1999 as a single 16 pixel image, and has quietly grown into a set of files no two browsers agree on.

What is a favicon

It is the small image a browser shows next to your site: in the tab, in the bookmark list, in history, and on a phone home screen when someone saves the page.

The favicon meaning most people are reaching for is simply that tab icon. Practically it is the smallest piece of branding you own, and the only one that appears every time somebody has your site open behind another window.

What size should a favicon be

There is no single answer, which is why favicon size and favicon dimensions get searched so heavily. Browsers ask for different files in different places.

A modern set is 16x16 and 32x32 for tabs, 180x180 for the iOS home screen, and 192x192 plus 512x512 for Android and the web manifest. The size of favicon.ico itself is a special case, because an .ico is a container: this one holds 16, 32 and 48 pixel versions in a single file, and the browser picks whichever it needs.

Supplying all of them means each context gets a sharp icon instead of a scaled, blurry one.

From PNG or SVG to ICO

Browsers cannot write the ICO format, so this favicon.ico generator builds one by hand: an icon directory header, an entry per size, then the PNG data for each. PNG inside ICO is valid and understood by every current browser.

SVG to favicon is worth doing when you have vector artwork, because each raster size is rendered directly from the vector instead of being resampled from a bitmap. PNG to favicon works just as well provided the source is large and square.

How to install the set

Put every file in the root folder of your site, then paste the supplied HTML into the head of your pages.

The manifest is what lets Android use your icon when someone adds the site to their home screen. Without it you get a screenshot of the page instead, which is rarely what anyone wants.

One quirk catches people out. Browsers cache favicons far longer than other assets, sometimes for weeks, so after replacing one it is normal to still see the old icon. A hard refresh usually helps, and opening the icon URL directly forces a fetch.

The many names for this tool

Favicon generator. Favicon maker. Favicon builder. Favicon ico generator. Favicon downloader, which usually means someone wanting to grab an existing icon rather than make one.

The verb forms are just as common: make favicon, make a favicon, create favicon, create a favicon, how to make a favicon, how to create a favicon. All the same job, and all handled here in one pass.

TIPS

Designing for sixteen pixels

A favicon is smaller than a word of this sentence. Design accordingly.

  • Start square and large. A non-square image gets cropped, and anything under 512 pixels limits the biggest sizes.
  • Use a single bold shape or letter. Full wordmarks and detailed illustrations turn to mush at tab size.
  • Check the 16 pixel preview before you commit. It is the honest test of whether the design works.
  • Strong contrast helps the icon stand out against both light and dark browser themes.
  • Transparent backgrounds suit browser tabs, and a solid background often looks better on a phone home screen.
  • Put every file in your site root and paste in the supplied HTML, or browsers will only find some of them.
FAQ

Questions, answered

What the generator produces and how to install it.

Still stuck?

Send us the details and we will take a look.

Get in touch

There is no single size. A modern site needs 16x16 and 32x32 for browser tabs, 180x180 for the iOS home screen, and 192x192 and 512x512 for Android and the web manifest. This tool generates all of them from one image.