Is a single favicon.ico file enough?

Usually yes for desktop browsers, provided it contains 16, 32 and 48 px sizes. But the iPhone home screen and Android app launch need separate PNG files, so it is better to prepare those as well.

Why does my new favicon not show up?

Most often it is caching. Open the page in a private window, clear browser data, or rename the file or add a ?v=2 parameter. Search engines may take several days or longer to refresh their copy of the icon.

Can a favicon be a JPG?

Some browsers will accept it, but JPG has no transparency and is not the normal choice. Use PNG, ICO or SVG instead.

How to Make a Favicon: Sizes, Formats and HTML Code

A favicon is the tiny site icon shown in browser tabs, bookmarks and search results. It looks like a detail, but a site without one feels unfinished, and a wrong size or format can make the icon blurry. This guide explains which sizes you need, which format to pick and what code to put in your page.

What a favicon is and where it appears

A favicon (short for favorite icon) is a small square image that browsers display next to the page title in a tab, in the bookmarks list and in history. On mobile, Google search results also show a site icon beside the address, so a clear favicon helps people recognise your site.

If you do not declare an icon, browsers usually try to fetch /favicon.ico from the site root. When it is missing, they show a generic globe or blank page symbol.

Which sizes you need

There is no single universal size, because different places use different files. In practice a small set is enough, and you can prepare all of it from one square PNG that is at least 512 px on each side.

Size	Used for
16x16 px	Browser tab (standard-density screens)
32x32 px	Tab on high-density screens, taskbar
48x48 px	Some browsers and search engines, Windows shortcuts
180x180 px	apple-touch-icon, when a site is added to an iPhone or iPad home screen
192x192 px	Web manifest, Android home screen
512x512 px	Web manifest, splash screens and larger app icons

ICO vs PNG vs SVG

ICO is an old container format that can hold several sizes (for example 16, 32 and 48 px) in one file. Every browser supports it, so /favicon.ico is still useful as a fallback.

PNG is simple and reliable: it suits the 32, 180, 192 and 512 px versions and supports transparency. SVG is a vector format supported by modern browsers: one file stays sharp at any size and can even adapt to dark mode. However, Safari and some older tools handle SVG favicons only partly, so the safest approach is to combine them: ICO as a fallback, PNG for Apple and manifest icons, and SVG as an optional extra.

How to create a favicon from a PNG

Start with a square image, ideally 512x512 px or larger, with a clear and simple design. If you only have a JPG, you can convert it to PNG first so that a transparent background can be added later in an image editor.

Prepare a square PNG with a simple logo or a single letter.
Convert it to ICO with a PNG to ICO tool and save it as favicon.ico.
Separately save PNG copies at 180x180 (apple-touch-icon.png), 192x192 and 512x512 for the web manifest.
Upload the files to the site root and add the HTML tags to <head>.

The HTML tags to add

Place these lines inside the <head> of your page (adjust the paths to match where your files live):

In site.webmanifest, under icons, list the 192x192 and 512x512 PNG files. If you do not have an SVG, simply skip that line.

Common mistakes

Non-square image: the browser squeezes or crops it and the icon looks distorted. Always start from a square.
Too much detail: at 16x16 px small text and shadows turn into a smudge. Use one simple shape, bold colours and strong contrast.
Source too small: enlarging a small image makes it blurry. Shrinking a large one is much safer.
Transparent background on a dark tab: a dark logo can disappear. Check it in both light and dark themes or add a background colour.
Cache: browsers cache favicons stubbornly, so the old icon may keep showing after you change it. Test in a private window, do a hard refresh (Ctrl+F5) or add a version such as /favicon.ico?v=2.

A worked example from start to finish

Say you have a 1024x1024 px PNG logo and want a full icon set for your site. First look at the logo shrunk to 16x16 px: can you still recognise the shape? If not, make a simplified version, for example just the first letter on a solid background. Only then export the sizes.

Next prepare the files: favicon.ico (16, 32 and 48 px in one file), apple-touch-icon.png (180x180), icon-192.png and icon-512.png. That is four files, enough for almost every situation. Upload them to the site root, add the tags to <head> and open the page in a private window to check the result.

How to check that everything works

Open https://your-site/favicon.ico directly in the browser: you should see the icon, not a 404 error.
In developer tools (F12, Network tab) reload the page and confirm the icon requests return status 200.
Look at the tab in both light and dark browser themes: the logo must stay readable in both.
On a phone, add the site to the home screen and check that the 180 px icon is shown rather than a page screenshot.
Make sure site.webmanifest is valid JSON and that the paths in it match real files.