Favicon Generator: favicon.ico, Apple and Android Icons

How to use it

Choose Icon from: A picture, or Letters or an emoji on a colour.
Pick the picture, or type the Letters or emoji. Set the Background colour and the Letter colour.
Set the Theme colour and the Site name, then click Make the icons.
Download the ZIP. Put the files in the top folder of your site, and paste the HTML tags into the head of each page.

The files and their sizes

favicon.ico holds three pictures, at 16, 32 and 48 pixels, so a browser tab, a bookmark and Windows each find a size that fits. apple-touch-icon.png is 180 pixels for the home screen of an iPhone or iPad. android-chrome-192x192.png and android-chrome-512x512.png are the Android icons listed in the manifest. site.webmanifest names the app and gives its colours.

Transparency and the background

The favicon keeps its transparent areas, so a logo sits on whatever colour the browser shows. The Apple and Android icons are filled with the background colour, because a transparent corner of an Apple touch icon shows as black on iPhone and iPad.

Where the files go

Put the files in the top folder of your website, so that the addresses /favicon.ico and /site.webmanifest work. Browsers keep icons in their cache for a long time: after a change, add a version number to the link, or clear the cache, to see the new icon.

Example: the letters FT on dark blue

Choose Letters or an emoji on a colour, type FT and keep the dark blue background. The tool draws the letters in the middle of a rounded square, and fits them to the square, so they stay readable even in the 16-pixel favicon.

Frequently asked questions

Is my picture uploaded when I make the favicons?

No. The icons are drawn in your browser and packed into the ZIP file on your device. You can check by turning off your internet connection after the page has loaded and making a set of icons.

Which file does the browser use for the tab icon?

Browsers use favicon.ico, or a link tag in the page that points to a PNG or SVG file. The tags this tool makes name favicon.ico and the Apple icon, so every browser finds an icon of a suitable size.

Why does my favicon look blurry at 16 pixels?

A small icon has very few pixels, so fine lines and small letters blur. Use a simple shape with thick strokes, or two letters at most, and check the 16 and 32 pixel pictures in the ICO file.

Why do the Apple icons have a background colour?

An Apple touch icon with a transparent corner shows that corner black on iPhone and iPad. The tool fills the whole square with the background colour you choose.

What goes into the head of the page?

Paste the four lines from the HTML tags box into the head element of each page. They link favicon.ico, the Apple icon, the manifest and the theme colour.

How is the web app manifest used?

Put site.webmanifest in the top folder of your site. The browser reads it when a visitor installs the site as an app; it names the app, gives its short name and colours, and lists the two Android icons.

Sources

Figures and text last checked on Tuesday, November 10, 2026.