A favicon is a tiny thing that does a surprising amount of work. It is the little square next to your page title in the browser tab, in the bookmarks bar and in history, and it is often the first piece of branding a returning visitor recognises. Sites without one look unfinished, and the fix takes a few minutes.
The HTML is genuinely easy. The fiddly part is producing the right files at the right sizes, because advice online is full of leftover habits from a decade ago. This guide gives you the current, minimal setup, the sizes that actually matter, and the one reason a favicon usually fails to show.
What a favicon is, and where it appears
Favicon is short for "favourite icon". Browsers have looked for one at the root of every website since 1999, which is why dropping a file called favicon.ico into your site folder has worked for as long as the web has had tabs. Today that single icon turns up in more places than the tab alone: bookmarks, browsing history, the mobile home screen when someone saves your site, and sometimes next to your listing in search results.
Because it is small, a favicon should be simple. A single letter, a mark from your logo, or one clear shape reads far better at 16 pixels than a detailed scene. If you do not have a mark yet, you can pull one from the icon library or start from a brand logo and adapt it.
The files you need in 2026
Older tutorials hand you a list of ten or more icon files. You do not need that any more. Two changes made the long list obsolete: the .ico format holds several sizes in one file, and modern browsers accept a single scalable SVG. A complete, current set is just four files:
- favicon.svg - a scalable vector icon for modern browsers. One file, every size, and it can even switch colours for dark mode.
- favicon.ico - a multi-size fallback (16, 32 and 48 pixels in one file) for older browsers and tools that still expect it.
- apple-touch-icon.png - a 180 by 180 PNG for the iOS home screen, with no transparency and a little padding.
- site.webmanifest plus two PNGs (192 and 512 pixels) - for Android and installable web apps.
An SVG favicon is the modern centrepiece here, which is worth understanding in its own right; if the format is new to you, see what an SVG file is first.
The HTML: four link tags
Put these four lines inside the <head> of your page, near the <title>:
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
Three details decide whether this works everywhere:
- Keep them in the head. A favicon link placed in the
<body>is ignored. If you use a template or a CMS, the tags belong in whichever partial renders the head. - Use a leading slash. A path like
/favicon.svgalways points at the site root, so it resolves correctly on a deep page such asexample.com/blog/post/. Drop the slash and the browser looks for the file in the current folder and gets a 404. - Use
rel="icon". The oldrel="shortcut icon"survives only by copy-paste habit. Browsers read the "icon" part and ignore "shortcut", so it adds nothing. Use the modern form.
Your site.webmanifest is a small JSON file in the root that points Android and PWA installs at the larger icons:
{
"icons": [
{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
]
}
Favicon sizes that actually matter
You only need to create one large square source image, then produce these from it. Here is what each size is for:
| Size | File | Used for |
|---|---|---|
| 16, 32, 48 px | favicon.ico | Browser tab, bookmarks (bundled in one file) |
| Any size | favicon.svg | Modern browsers, scales to any display |
| 180 × 180 | apple-touch-icon.png | iOS home screen |
| 192 × 192 | android-chrome-192x192.png | Android home screen, minimum for a PWA |
| 512 × 512 | android-chrome-512x512.png | PWA splash screen and high-resolution displays |
That is the whole list. If you have seen pages with separate 96, 120, 152 and 167 pixel icons, those came from the older approach and are no longer needed.
How to make the files
Start by choosing your icon. Search the ICON OOP tool or browse the library for a shape that suits your brand, or take a brand logo as a base. Recolour it to your brand colour using the colour tool so the favicon matches the rest of your site.
From there, export the files ICON OOP can produce directly:
- favicon.svg - download your chosen icon as SVG.
- apple-touch-icon.png - export a PNG at a custom size of 180 pixels.
- The Android icons - export PNGs at 192 and 512 pixels using the same custom-size option. Our SVG to PNG converter handles all of these.
The one file ICON OOP does not output is the multi-size .ico, since the tool exports SVG and PNG rather than the older ICO container. For that single file, run your icon through a dedicated favicon or ICO generator, which packs the 16, 32 and 48 pixel versions into one favicon.ico. If you would rather keep things lean, modern browsers are fully covered by the SVG and PNG files alone, so the .ico is an optional fallback rather than a requirement.
Where to put them, and how to test
Upload all of the files to your site's root directory, the same folder that holds your home page. With the root-relative paths shown above, every page will find them automatically. There is no need to repeat the icons in subfolders.
Then check your work. Load the site and look at the tab. If you do not see the new icon immediately, that is almost always caching rather than a mistake, which the next section covers.
Why your favicon is not showing
This is the single most common favicon problem, and the cause is nearly always the same: browsers cache favicons very aggressively, so you keep seeing the old one (or none) even after the file is in place. Work through these in order:
- Hard-refresh the page to bypass the cache, then load it again normally.
- Open the site in a private or incognito window, which ignores the stored favicon.
- Clear the browser cache if it still persists.
- Check the path resolves: type the full URL, for example
yoursite.com/favicon.svg, straight into the address bar and confirm the file loads. - Confirm the link tags are in the head, not the body, and that the files actually uploaded to the root.
Nine times out of ten it is the cache, and a hard refresh or an incognito window settles it. Once it appears for you, it will appear for new visitors straight away, because they have nothing cached to override.
Frequently asked questions
Need an icon to start from? Browse the library, learn what an SVG file is, or export the PNG sizes you need.