A favicon is the website icon shown in browser tabs, bookmarks, and history. It is a small element, but it affects recognition and professionalism. This guide covers formats, HTML markup, and practical recommendations. You can create a favicon from an image with the Favicon Generator on reChecker. For more on sizes for different platforms, see All favicon sizes in 2026.
What is a favicon
A favicon (favorite icon) is a small image associated with a website. It appears in browser tabs, bookmarks, the favorites bar, and, in some cases, search results. The de facto standard for browser tabs is 16×16 or 32×32 pixels, but modern devices require more sizes.
Favicon formats
ICO
A historical format created for Windows icons. It supports multiple sizes in a single file (16×16, 32×32, 48×48). All browsers support ICO.
Advantages: one file for multiple sizes and broad support. Disadvantages: an outdated format, limited quality, and poor transparency support in older versions.
ICO file structure: a file header, followed by an array of entries with image headers (size, offset), then the images themselves in BMP or PNG format. A multi-size ICO contains several such entries.
WebP and AVIF for favicons
Some browsers are beginning to support WebP and AVIF for favicons experimentally. These are not recommended as primary formats yet; ICO and PNG take priority. Check for updates to browser support.
PNG
A modern alternative. One PNG contains one size. It supports transparency (alpha channel). Recommended sizes: 16×16, 32×32, 48×48. All modern browsers support PNG favicons.
Advantages: quality, transparency, and simplicity. Disadvantages: a separate file is needed for each size (or one large file that the browser scales).
SVG
A vector format that scales without losing quality. Ideal for simple icons. Supported by all modern browsers (Chrome, Firefox, Safari, Edge).
Advantages: one file for all sizes and sharp rendering on Retina displays. Disadvantages: not suitable for complex images; Safari added support relatively recently, so check the target versions.
APNG (Animated PNG)
An animated favicon. Supported in Firefox and partially in other browsers. Rarely used because of limited support and its distracting effect.
Basic HTML markup
Classic method (ICO)
<link rel="icon" href="/favicon.ico" sizes="any">Browsers automatically pick up the favicon.ico file in the site root, even without the link tag. An explicit tag gives you control over types and sizes.
PNG with a specified size
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">The browser selects the appropriate size. For Retina displays, you can add 48×48 or 64×64.
SVG
<link rel="icon" type="image/svg+xml" href="/favicon.svg">One file covers all resolutions. Make sure the SVG is optimized and does not contain heavy effects.
Apple Touch Icon
For iOS and iPadOS:
<link rel="apple-touch-icon" href="/apple-touch-icon.png">The recommended size is 180×180. See the article on favicon sizes for details.
Recommended set
The minimum set for compatibility:
| File | Size | Purpose |
|---|---|---|
| favicon.ico | 16×16, 32×32, 48×48 | Browsers, bookmarks |
| favicon-16x16.png | 16×16 | ICO alternative |
| favicon-32x32.png | 32×32 | ICO alternative |
| apple-touch-icon.png | 180×180 | iOS, iPadOS |
An expanded set adds sizes for Android, Windows, and other platforms. Generators such as the Favicon Generator create a complete package from a single source image.
File placement
The favicon should be available at an absolute path from the root:
/favicon.ico
/favicon-16x16.png
/favicon-32x32.png
/apple-touch-icon.pngOr in a subdirectory, specified in link:
<link rel="icon" href="/assets/icons/favicon.ico">The path must be accessible without redirects. Check with the reChecker technical audit—a missing or broken favicon may indicate markup problems.
Caching
Favicons are cached aggressively. When changing the icon, add versioning to the URL:
<link rel="icon" href="/favicon.ico?v=2">Or use a content hash. Otherwise, users may see the old icon for weeks.
Manifest and PWA
For a PWA (Progressive Web App), icons are specified in manifest.json:
{
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
}The 192×192 and 512×512 sizes are standard for the manifest. Browsers use them when installing a PWA on the home screen.
Common mistakes
- Incorrect path — 404 for a favicon clutters logs and may affect how the site is perceived
- Overly complex graphics — details are not visible at 16×16; simplify the design
- No transparency — on dark browser themes, a white background looks rough
- Ignoring the Apple Touch Icon — on iOS, a screenshot of the page is used instead
- Forgetting about caching — a favicon change will not appear unless the URL changes
Generating a favicon
The source image should be at least 512×512 pixels, preferably square. All the required sizes are generated from it. The Favicon Generator on reChecker creates a complete package: ICO, PNGs in different sizes, and an Apple Touch Icon.
Recommendations for the source image:
- Square format
- A simple, recognizable symbol
- Good contrast at small sizes
- Transparent background for PNG/SVG
For a complete list of sizes for all platforms, see the article on favicon sizes in 2026. You can create a favicon with the Favicon Generator on reChecker.
Favicon and SEO
Search engines do not use favicons directly in ranking algorithms. However, the icon appears in search results (browser tabs, bookmarks) and affects CTR—a recognizable brand attracts more clicks. A missing or broken favicon may indicate technical problems with the website. Favicon checks are included in the reChecker technical audit.
Optimizing an SVG favicon
An SVG favicon should be minimal. Remove unnecessary metadata, groups, and effects. Optimizers (SVGO, svgo) reduce its size. Make sure the SVG does not contain external resources (fonts, images)—they may not load in the favicon context.
Multiple favicons for different sections
Some websites use different icons for subsections (blog, store). Specify rel="icon" with the sizes attribute in the <head> of the specific page. The browser will select the appropriate one. For most websites, one icon is sufficient.
Troubleshooting favicon issues
If the favicon is not displayed:
- Check the path — 404 in the Network tab
- Check the MIME type —
image/x-iconfor ICO,image/pngfor PNG - Clear the browser cache or add
?v=2to the URL - Make sure the
linktag is in<head>, before the closing</head> - Check CORS — loading from another domain may be restricted
Summary
A favicon is a small but important part of a website’s identity. Minimum set: ICO or PNG 32×32, Apple Touch Icon 180×180. For a PWA, add 192×192 and 512×512. Use the Favicon Generator to create a complete package.