A decade of Canvas at your command, powered by our custom AI engineStart building
Glossary

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.

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 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 & 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.

Try Canvas Builder →

Frequently 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.
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.
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>.