The little icon in a browser tab is the most repeated piece of branding a website has. It sits in every tab, every bookmark and every history list, beside the site in search results, and on the home screen of every phone that saved a shortcut. Each of those places asks for a different file, and a site that only has one gets a blurry or missing icon in the others.
The sizes, and who asks for each
| File | Size | Who asks for it |
|---|---|---|
favicon.ico | 16, 32 and 48 px in one file | Every browser when a page names no icon, and many other programs directly at /favicon.ico |
favicon-32x32.png | 32 x 32 | Browser tabs and bookmarks on sharp screens |
favicon-16x16.png | 16 x 16 | Browser tabs on ordinary screens |
apple-touch-icon.png | 180 x 180, solid background | An iPhone or iPad that saves the site to the home screen |
icon-192.png | 192 x 192 | Android home screens, through the web manifest |
icon-512.png | 512 x 512 | Installed web apps and their splash screens, through the web manifest |
site.webmanifest | text | Android and installed web apps: the name, the icons and the colours |
That is the whole list for most sites. Old guides list twenty sizes or more, for tiles on Windows 8, old Android versions and every iPad generation. Current systems scale from the files above.
The HTML to put in the head
Put the files in the root of the site and these five lines in the <head> of every page:
<link rel="icon" href="/favicon.ico" sizes="48x48">
<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" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">The paths start with a slash on purpose. A relative path such as favicon.ico works on the front page and breaks on every page one folder down.
The manifest is a small JSON file beside them, with the name of the site, the two large icons and two colours:
{
"name": "Example site",
"short_name": "Example site",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}theme_color colours the title bar when the site is installed as an app. The generator writes white for both colours. To match the logo, put its main colour in theme_color; the colour palette tool reads it from the image.
Start from the right picture
- Square, and at least 512 pixels. Every size is made from the largest. A smaller picture has to be enlarged, and the large icons look soft.
- Simple enough for 16 pixels. A full logo with a name in small letters turns into a smudge in a tab. The symbol alone, or the first letter, usually reads better.
- No empty border. White space around a logo makes the icon look small next to other tabs. Cut it away first, or let the generator trim it.
- Transparent for browsers, solid for the iPhone. A tab looks best with a transparent background. The home screen of an iPhone shows no transparency, so its icon needs a background of its own.
Try it
One logo in, every favicon out.
The favicon generator makes all seven files and head.html from one picture, and gives them back as a ZIP.
Make them all from one image
The free favicon generator takes a JPEG, PNG or WebP and makes the whole set: favicon.ico with 16, 32 and 48 pixels inside, the two PNGs for tabs, the 180 pixel iPhone icon on white, the 192 and 512 pixel icons, the manifest, and head.html with the five lines above. It gives them back as one ZIP.
It has three ways to make a picture square:
- fit shows all of the picture on a transparent square. Right for a logo that is already square, or nearly.
- trim first cuts away a border of one colour, such as the white around a logo, and then fits what is left.
- center cuts a square from the middle and fills the whole icon with it. Right for a photo.
We gave it a logo of 600 x 200 pixels with white around it, trimmed. The ZIP came back at 63 564 bytes with all eight files. The answer also said upscaled: true: what was left after trimming was 301 pixels wide, less than 512, so the largest icons were enlarged. That is the sign to start from a bigger picture.
curl -s -X POST https://aisenseapi.com/services/v1/image_favicon \
-F "file=@logo.png" \
-F "crop=trim" \
-F "name=Example site"
{
"storage_id": "4b4a8449-d135-4bfb-b1c3-e763093e07ab",
"storage_url": "https://aisenseapi.com/services/v1/storage/4b4a8449-d135-4bfb-b1c3-e763093e07ab",
"sha256_hash": "d39531425ba15d2512a04e53b5385d02db4f1d034abc9786b54dc0e1355cff76",
"bytes": 63564,
"expire_timestamp": 1790778560,
"expire_datetime": "2026-09-30T14:29:20+00:00",
"content_type": "application/zip",
"filename": "favicon.zip",
"operation": "image_favicon",
"files": [
"favicon.ico",
"favicon-16x16.png",
"favicon-32x32.png",
"apple-touch-icon.png",
"icon-192.png",
"icon-512.png",
"site.webmanifest",
"head.html"
],
"crop": "trim",
"upscaled": true
}Common mistakes
- Only a 16 pixel favicon.ico. It looks blurry on every sharp screen, which is most of them.
- A transparent iPhone icon. The transparent parts do not stay transparent on the home screen.
- No manifest, or no 192 and 512 pixel icons in it. Android may then put a small, blurry icon or just the first letter of the site on the home screen instead of the logo.
- Relative paths. The icon shows on the front page and disappears one folder down.
- Waiting for the old icon to go away. Browsers keep favicons for a long time. After a change, give the files a new name or add
?v=2to the links, and browsers fetch the new icon on the next visit.
Search results
Google Search shows a site's favicon beside its results. It reads the icon links on the home page, the Apple touch icon among them, and asks for a square icon, preferably larger than 48 pixels. The set above has one of 180. After a change it can take days or weeks before the new icon shows there, and Google does not promise to show one at all.
For developers
The generator is a free REST endpoint with no key and no account: POST https://aisenseapi.com/services/v1/image_favicon with the picture in a field named file, and optionally crop and name for the manifest. The ZIP is stored for 24 hours at a link in the answer. The details are on the favicon generator page and in the image section of the API reference.
Questions
What size should a favicon be?
There is no single size. Browser tabs use 16 and 32 pixels, favicon.ico holds 16, 32 and 48, an iPhone home screen uses 180, and Android and installed web apps use 192 and 512. Start from a square image of at least 512 pixels and make the rest from it.
Do I still need favicon.ico?
Yes. Browsers ask for /favicon.ico when a page names no icon, and many other programs ask for it directly. It costs one file.
What size is the Apple touch icon?
180 by 180 pixels, on a solid background, since an iPhone shows no transparency on the home screen.
Can a favicon be an SVG?
Most browsers read an SVG favicon, and it stays sharp at any size. Not every browser and tool does, so keep the PNG and ICO files beside it.
Is the favicon generator free?
Yes. No account and no API key. It makes all the files from one image and gives them back as a ZIP.
Make yours
Every favicon a website needs, from one picture.
Free, no account and no API key. Drop a logo, choose how to make it square, and download the ZIP.