What Is Favicon?
A favicon (short for 'favourite icon') is the small icon associated with a website, displayed in browser tabs, bookmark lists, browser history, address bars, and Google search results. Originally a simple 16×16px ICO file placed at the root of a site, modern favicons require multiple sizes and formats, from 16px browser tab icons to 180px iOS home screen touch icons, to display correctly across all browsers and devices.
What is favicon.ico?
favicon.ico is the original favicon format, created by Microsoft for Internet Explorer in 1999. It is a multi-resolution container format that can embed multiple image sizes (typically 16×16 and 32×32 pixels) inside a single .ico file. Browsers that do not support SVG or PNG favicons will automatically look for a file called favicon.ico at the root of the domain (e.g. https://example.com/favicon.ico), no HTML link tag required. Today, favicon.ico is still recommended as a fallback for legacy browsers, placed alongside modern formats.
How browsers find a favicon
At its core, the browser looks for favicon declarations in the HTML <head> element using <link> tags with a rel attribute set to 'icon', 'shortcut icon', or platform-specific values like 'apple-touch-icon'. When the page loads, the browser parses these link tags and fetches the referenced image files. If no explicit declaration exists, virtually every browser falls back to requesting /favicon.ico from the root of the domain, a behavior defined by convention rather than any formal W3C specification, which is why placing a valid ICO file at the root is still considered essential defensive practice.
The ICO file format remains uniquely valuable because a single .ico file can embed multiple bitmap sizes (16×16, 32×32, 48×48) inside one container, allowing the OS and browser to pick the most appropriate resolution for the context, for example, a 32×32 version for a high-DPI tab bar versus a 16×16 version for a browser toolbar. Modern browsers also accept PNG, SVG, and WebP formats via the type attribute on the <link> tag (e.g., type='image/png'). SVG favicons, supported in most Chromium-based browsers and Firefox, are particularly powerful because they scale infinitely and can include embedded CSS media queries to switch between light and dark mode variants.
For Apple devices, the apple-touch-icon relationship is required for home screen icons when a user adds a site to their iOS or macOS home screen. Apple recommends a 180×180px PNG without rounded corners, the OS applies its own corner radius mask. Android and PWA contexts use a manifest.json file (linked via <link rel='manifest'>) that contains an icons array with entries specifying src, sizes, and type fields, supporting sizes up to 512×512px for splash screens.
Browsers cache favicons aggressively, often independent of normal HTTP cache headers, which means favicon updates can take hours or days to propagate to returning users. Cache-busting via query strings (e.g., href='/favicon.ico?v=2') is a practical workaround, though behavior varies by browser. The sizes attribute on the <link> tag (e.g., sizes='32x32') gives the browser a hint about which file to prioritize without downloading all variants first, reducing unnecessary network requests on initial page load.
Favicon sizes: what you need in 2026
The complete modern favicon set: 16×16px (browser tab, browser history), 32×32px (taskbar pinned site, tab on high-DPI screens), 48×48px (Windows site icon), 180×180px (apple-touch-icon, iOS and macOS Safari home screen), 192×192px (Android Chrome), 512×512px (Android Chrome splash screen and PWA install). The minimum viable set most sites should implement: favicon.ico (16+32px), favicon.svg (scalable vector), apple-touch-icon.png (180×180px), and a site.webmanifest referencing the Android icons.
How browsers choose a favicon size
Browsers resolve favicons through a priority chain: they first parse the HTML <head> for explicit <link rel='icon'> declarations, then fall back to a root-level /favicon.ico file if no link tags are present. Each <link> tag can carry a sizes attribute (e.g., sizes='32x32') that signals the browser which asset to load for a given display context. Without explicit size hints, a browser picks whichever linked icon it deems most appropriate, a process that varies by vendor and can produce inconsistent results across Chrome, Safari, and Firefox. The ICO format is the legacy baseline, capable of embedding multiple resolutions (16×16 and 32×32 are standard) inside a single container file. Modern workflows replace or supplement ICO with PNG files declared via type='image/png', which offer better compression, full alpha transparency, and predictable rendering. SVG favicons are gaining support in Firefox and Chrome via <link rel='icon' type='image/svg+xml'>, enabling a single infinitely-scalable vector file that renders crisply at any resolution, though Safari lags in adoption as of 2024. Apple Touch Icons are a separate concern governed by Apple's own specification. Safari on iOS uses <link rel='apple-touch-icon' sizes='180x180'> to create the home screen shortcut icon, ignoring standard <link rel='icon'> entries entirely. The 180×180 PNG must be a solid-background image, Apple strips transparency and adds its own rounded-corner mask, so transparent PNGs will render with a black background unless you pre-composite the background color yourself. PWA (Progressive Web App) manifests introduce yet another layer via the Web App Manifest JSON file, which declares an 'icons' array with purpose fields ('any', 'maskable'). Maskable icons follow the W3C safe zone specification: critical content must be contained within the central 80% of the image (a circle inscribed in the square) so OS-level adaptive icon masks don't clip branding. Chrome uses the 192×192 entry for Android home screen shortcuts and the 512×512 entry for splash screens, making these two sizes mandatory for any PWA-capable site.
How to add a favicon in HTML
Place these tags inside the <head> element: <link rel='icon' href='/favicon.svg' type='image/svg+xml'> (modern browsers), <link rel='icon' href='/favicon.ico' sizes='any'> (fallback for legacy browsers), <link rel='apple-touch-icon' href='/apple-touch-icon.png'> (iOS). Optionally add <link rel='manifest' href='/site.webmanifest'> for PWA icons. The SVG favicon is the most future-proof, it scales to any size and supports dark mode via a CSS prefers-color-scheme media query inside the SVG.
SVG favicons and dark mode
SVG favicons (supported in Chrome 80+, Firefox 83+, Safari 14+) offer two major advantages over raster formats: they scale perfectly to any resolution without pixelation, and they can contain embedded CSS for dark mode adaptation. By including a prefers-color-scheme media query inside the SVG, the favicon can automatically switch between a dark and light version based on the user's OS theme, something ICO and PNG favicons cannot do. For brands with a logo that looks different on dark backgrounds, SVG favicons are the correct modern approach.
Favicon best practices
Design at 512×512px then scale down, never design at 16px. Favicons must be instantly recognisable at tiny sizes; use a single letter, simple symbol, or brand monogram rather than a full logo. Use a solid brand colour background so the icon is visible on both light and dark browser chrome. Avoid thin lines and fine detail that disappear at 16px. Test your favicon in an actual browser tab at 100% zoom. Use a favicon generator (like the Canvas Builder Favicon Generator) to produce all required sizes and formats from a single source image.
Favicon markup checklist
Always include at minimum both a root-level /favicon.ico (embedding 16×16 and 32×32 sizes) as a universal fallback and an explicit <link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'> declaration in <head> for modern browsers. Add an <link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'> for iOS home screen support, omitting this causes Apple devices to generate a low-quality screenshot thumbnail instead. Use an SVG favicon alongside your raster versions with <link rel='icon' type='image/svg+xml' href='/favicon.svg'> and embed a @media (prefers-color-scheme: dark) rule inside the SVG to serve a dark-mode-friendly version automatically. Avoid placing favicon <link> tags in the <body> or dynamically injecting them via JavaScript, as some browsers only parse favicon declarations found during initial HTML parse; keep all favicon declarations near the top of <head> before any render-blocking resources. Use a tool like RealFaviconGenerator to produce the full set of platform-specific files from a single high-resolution source (at least 512×512px SVG or PNG), ensuring consistent appearance across Chrome, Safari, Firefox, Edge, Android, and iOS without manual resizing.
Favicon and Canvas Builder
Canvas Builder automatically includes proper favicon meta tags in all generated HTML pages. The generated output includes link tags for favicon.svg, favicon.ico fallback, apple-touch-icon, and site.webmanifest references, following the 2026 best-practice favicon stack without any manual configuration.
Start building freeFrequently asked questions
What is a favicon?
A favicon is the small icon displayed in your browser tab next to the page title, in bookmark lists, browser history, and sometimes in Google search results. The name comes from 'favourite icon', originally the icon shown when you bookmarked a site in Internet Explorer. Every website should have one; it reinforces brand recognition and makes tabs easier to identify when users have many open.
What size should a favicon be?
The most important favicon sizes are: 16×16px (browser tab), 32×32px (taskbar and high-DPI tabs), 180×180px (apple-touch-icon for iOS), 192×192px and 512×512px (Android/PWA). In practice, the easiest modern approach is to create one high-quality SVG or 512×512 PNG, then use a favicon generator to produce all required sizes automatically.
What is the difference between favicon.ico and favicon.png?
favicon.ico is a legacy container format (originally from Internet Explorer) that can hold multiple resolutions in one file. favicon.png is a standard image format supported by all modern browsers via an HTML link tag. favicon.svg is the most modern option, it scales infinitely and supports dark mode. Best practice is to provide favicon.svg as the primary icon, favicon.ico as a fallback (no HTML tag needed, browsers auto-detect it), and apple-touch-icon.png at 180×180px for iOS.
Do I still need a favicon.ico file if I'm using PNG favicons declared in the HTML?
Yes, placing a favicon.ico at the root is still recommended as a universal fallback because some crawlers, RSS readers, and older browser versions request /favicon.ico directly without parsing HTML link tags at all. The ICO file should embed at minimum a 16×16 and 32×32 resolution inside the same container, which you can create with ImageMagick using convert favicon-16x16.png favicon-32x32.png favicon.ico. Serving an explicit ICO also prevents 404 errors in server logs from automated requests to that path.
What is the difference between rel='icon' and rel='shortcut icon' in a favicon link tag?
rel='shortcut icon' is a legacy, non-standard value that originated with Internet Explorer 5 and became widely copied, it is not part of any W3C specification and the word 'shortcut' is technically ignored by modern browsers, which treat it identically to rel='icon'. The HTML Living Standard (WHATWG) specifies only rel='icon' as the valid keyword for favicon declarations, so new projects should use rel='icon' exclusively. The legacy form still works in all major browsers due to backward compatibility, but using it in new code is unnecessary and can cause HTML validation warnings.
What is an apple-touch-icon?
An apple-touch-icon is the icon displayed when a user saves a website to their iOS home screen using Safari's 'Add to Home Screen' feature. It is a PNG file, ideally 180×180px, referenced with <link rel='apple-touch-icon' href='/apple-touch-icon.png'> in the page's <head>. Without it, iOS will take a screenshot of the page as the icon, which typically looks poor. Android uses icons defined in site.webmanifest instead.
What is a maskable icon and why is it required for PWAs?
A maskable icon conforms to the W3C Maskable Icon specification, ensuring the icon's primary visual content stays within a 'safe zone', a circle representing 80% of the total image area, so that Android's adaptive icon system can apply any geometric mask shape (circle, squircle, teardrop) without cropping critical branding. Without a maskable icon, Android falls back to placing your icon on a white card background, which looks mismatched in dark-mode launchers. To check your icon's safe zone coverage, use the Maskable.app tool before deploying.
Why does my updated favicon still show the old icon even after I replaced the file on the server?
Browsers cache favicons separately from normal page assets, often ignoring standard HTTP cache headers like Cache-Control: no-cache, and some browsers (notably Chrome) maintain a persistent favicon cache that can survive hard refreshes. The most reliable cache-busting technique is appending a version query string to the href: <link rel='icon' href='/favicon.ico?v=2'>, the browser treats this as a new URL and fetches it fresh. Alternatively, renaming the actual file and updating the href reference guarantees all clients fetch the new asset, but this requires a code deploy.
How do I create a favicon for my website?
Design your icon at 512×512px as an SVG or PNG, use your logo mark, brand initial, or a simple symbol. Then use a favicon generator (such as the Canvas Builder Favicon Generator) to produce all required sizes: favicon.ico, favicon.svg, apple-touch-icon.png (180×180), and Android icons (192×192, 512×512). Upload all files to your web root and add the appropriate <link> tags to your HTML <head>.