How to Make a Website Favicon: Complete Guide to Sizes, Formats & HTML Setup
Learn the correct dimensions, file formats (ICO, PNG, SVG), and HTML tags needed for modern website favicons, Apple touch icons, and Android PWA home screen tiles.
A favicon (short for 'favorites icon') is the tiny graphic displayed in browser tabs, bookmark bars, history logs, and search engine results alongside your domain name. While small in pixel dimensions, a crisp favicon reinforces brand authority, prevents 404 server log errors, and improves user navigation across crowded browser tabs.
Modern multi-device web standards require more than just a single 16×16 icon. Desktop browsers, retina screens, iOS bookmarks, and Android Progressive Web Apps (PWA) all look for specific icon resolutions and formats.
Essential favicon dimensions for modern websites
- 16×16 pixels: Classic browser tab icon for standard resolution displays.
- 32×32 pixels: High-DPI / Retina desktop browser tabs and taskbar shortcuts.
- 48×48 pixels: Google Search Console requires favicons to be multiples of 48px square (48×48, 96×96, 144×144) to appear next to search snippets.
- 180×180 pixels: Apple Touch Icon used when an iPhone or iPad user saves your site to their iOS home screen.
- 192×192 & 512×512 pixels: Web App Manifest icons utilized by Android Chrome, ChromeOS, and PWA install prompts.
ICO, PNG, or SVG: Which format should you use?
Each file format serves a distinct role in modern web development:
- favicon.ico (Multi-size container): The legacy standard. A single .ico file can bundle 16×16, 32×32, and 48×48 raster frames. Every browser crawls `/favicon.ico` by default even without HTML tags.
- PNG (.png): Superior color reproduction, crisp alpha-transparency, and lightweight file compression for modern browsers and mobile home screens.
- SVG (.svg): Vector-based and resolution-independent. Modern browsers (Chrome, Edge, Firefox, Safari) support SVG favicons, which automatically adapt to light and dark system color schemes using CSS media queries.
How to generate and install your favicon
- 1Design a square graphic: Start with a bold 512×512 PNG master image. Avoid intricate text or tiny details that become unreadable at 16×16 pixels.
- 2Generate multi-size package: Use a free client-side Favicon Generator to produce your multi-frame favicon.ico, 180×180 apple-touch-icon.png, and manifest icons.
- 3Upload to root directory: Place the generated files in your website's root or `/public` folder.
- 4Embed HTML tags inside your <head> section:
Include the following HTML snippet in your website header for universal compatibility:
- <link rel='icon' href='/favicon.ico' sizes='32x32'>
- <link rel='icon' href='/icon.svg' type='image/svg+xml'>
- <link rel='apple-touch-icon' href='/apple-touch-icon.png'>
Why isn't my new favicon showing up?
Browsers cache favicons aggressively to minimize network requests. If your updated favicon fails to display, open your browser in Incognito mode, clear browser cache, or append a version query parameter (e.g. `/favicon.ico?v=2`) to force a fresh fetch.
Frequently Asked Questions
Why does Google Search ignore my favicon?
Googlebot requires favicons to be square, a multiple of 48 pixels (e.g., 48×48, 96×96, 192×192), publicly crawlable without robots.txt restrictions, and stable over time.
Should my favicon have a transparent or solid background?
Transparent backgrounds look sleek in browser tabs, but ensure your icon remains visible in both light and dark mode tabs. For Apple Touch icons, iOS fills transparent areas with black, so a solid background is mandatory.
Can I use an animated GIF as a favicon?
While a few older desktop browsers experimentally rendered GIF favicons, modern browsers and search engines strongly discourage or ignore them due to battery consumption and user distraction.
About LinkQRPro Editorial Desk
This tutorial was researched, authored, and technically tested across modern desktop and mobile browsers by the LinkQRPro editorial group. We regularly review courier guidelines and document standards to keep our instructions reliable and up to date.
Found something outdated or have feedback? Report a correction to our editors.