Favicon Sizes, Formats and HTML Tags
A favicon is a small file, but browsers, phones and installed web apps each look for different sizes. This guide explains which files a website needs, how to declare them in HTML and how to design an icon that stays readable at 16 pixels.
What a Favicon Is
A favicon (short for "favourites icon") is the small image that identifies a website in tabs, bookmarks and the history list. Phones use a larger version when the site is added to the home screen, installed web apps use icons from their manifest, and some search engines show the favicon next to results. Because these places use different sizes, a website usually provides a small set of files.
ICO, PNG and SVG Favicons
| Format | What it contains | Things to know |
|---|---|---|
ICO (favicon.ico) |
Several sizes in one file, often 16, 32 and 48 pixels | The oldest format. Many browsers request /favicon.ico from the site
root even when the page does not link to it, so it is a useful fallback. |
| PNG | One size per file, with transparency | Declared with a sizes attribute so that the browser can pick a
suitable file. Also used for the Apple touch icon and manifest icons. |
| SVG | A vector drawing that scales to any size | Supported by most current desktop browsers, but not by every browser, so keep ICO or PNG files as well. An SVG favicon can adapt to a dark theme with CSS. |
An ICO file is a small container: a header lists each image with its size and position, and the
images can be stored as PNG data. The LeedyBox
Favicon Generator writes a favicon.ico with
16, 32 and 48 pixel PNG images, plus PNG files for the other sizes.
Common Sizes and Where They Are Used
| Size (pixels) | Typical file | Typical use |
|---|---|---|
| 16 × 16 | favicon-16x16.png, inside favicon.ico | Tabs and bookmarks on standard screens |
| 32 × 32 | favicon-32x32.png, inside favicon.ico | Tabs on high-density screens, some shortcuts |
| 48 × 48 | inside favicon.ico | Larger shortcut and desktop icons on some systems |
| 180 × 180 | apple-touch-icon.png | Home screen icon on iPhone and iPad |
| 192 × 192 | android-chrome-192x192.png | Home screen icon on Android, listed in the manifest |
| 512 × 512 | android-chrome-512x512.png | Install dialogs and splash screens of web apps |
Start from a square source of at least 512 × 512 pixels, or from an SVG file. A small source has to be enlarged for the bigger icons and looks blurry. A logo that is not square needs space added around it or has to be cropped.
The Apple touch icon should not be transparent: some Apple devices show transparent areas as black. Fill the background with a colour instead. iPhone and iPad round the corners themselves, so the file can be a plain square. See how transparency works in PNG and JPG for background on alpha channels.
The HTML Tags and the Web App Manifest
Put the files in the root folder of the website and add these tags inside the
<head> of every page:
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 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" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">If you also have an SVG favicon, add
<link rel="icon" href="/favicon.svg" type="image/svg+xml">. The manifest
(site.webmanifest) is a small JSON file with the site's name, a short name, the 192
and 512 pixel icons, a theme colour, a background colour and a display mode such as
standalone. If the files are in another folder, change every path in the tags and in
the manifest.
Designing for Tiny Sizes
- Keep it simple. At 16 pixels, thin lines, small text and fine details turn into blur. A simplified mark, a single shape or one or two letters work better than a full logo with a slogan.
- Use strong contrast. A clear difference in brightness between the icon and its background matters more than exact brand colours.
- Use little padding. Empty space shrinks the visible icon. A small margin can help larger icons, but small favicons are easier to recognise when they fill most of the square.
- Check the real size. Look at the icon at 100 % zoom in a tab, not only as an enlarged preview.
Dark Browser Themes
Many people use a dark tab bar. A dark logo on a transparent background can almost disappear
there, and a white logo can vanish in a light theme. Common solutions are a solid or rounded
background shape behind the logo, a light outline, or an SVG favicon that changes its colours with
a prefers-color-scheme media query (where SVG favicons are supported). The LeedyBox
generator shows a light and a dark tab bar so that you can compare both.
Updating a Favicon and Browser Caching
Browsers keep favicons in their cache, sometimes for a long time, so a new icon may not appear
right after you upload it. A hard refresh or a private window can show the new version. To make
returning visitors fetch it sooner, change the file name or add a version to the URL in your tags,
for example /favicon-32x32.png?v=2. Icons in bookmarks and search results can take
longer to update. After any change, test the result in the browsers and on the devices that matter
to you.
Frequently Asked Questions
Is favicon.ico still needed?
It is not required, but it is a simple fallback: many browsers and other tools look for
/favicon.ico in the root folder of a site. It costs only a few kilobytes.
Can I use a JPG as a favicon?
Browsers can usually display one, but JPG has no transparency and its compression can blur small details. PNG, ICO or SVG files are better choices for icons.
Why does my new favicon not show up?
Most often the old icon is still cached, or the paths in the HTML tags do not match where the files were uploaded. Open each file's URL directly in the browser to check that it loads.