Glossary

What Is What Is favicon.ico??

A favicon.ico is a small square icon file, traditionally 16×16 or 32×32 pixels, that browsers display in tabs, bookmarks, browser history, and address bars to visually identify a website. The .ico format supports multiple image sizes embedded in a single file, allowing browsers to select the most appropriate resolution for the display context. It is declared in HTML via a <link rel='icon'> tag in the <head> element, though browsers will also automatically request /favicon.ico from the root domain if no explicit declaration exists.

What Is What Is favicon.ico??

How What Is favicon.ico? Works

The ICO file format is a Microsoft-originated container format that can store multiple bitmap images at different sizes and color depths within a single file — common embedded sizes are 16×16, 32×32, 48×48, and 64×64 pixels. When a browser loads a page, it parses the <head> for a <link rel='icon'> declaration; if none is found, it fires a fallback GET request to https://yourdomain.com/favicon.ico automatically. This fallback behavior is standardized across all major browsers and means an incorrectly placed or missing favicon generates a 404 request in your server logs, wasting HTTP requests. Modern favicon implementation has expanded well beyond the single .ico file. The HTML Living Standard and various browser vendor specifications now support PNG, SVG, and WebP formats via the <link rel='icon' type='image/png'> tag. SVG favicons, declared with type='image/svg+xml', are infinitely scalable and support CSS media queries including prefers-color-scheme, allowing you to serve a dark or light variant of your icon automatically based on system theme — supported in Firefox and Chromium-based browsers. Apple introduced the apple-touch-icon convention, requiring a 180×180 PNG declared via <link rel='apple-touch-icon'>, which iOS and macOS Safari use when a user adds a site to their home screen or bookmarks. Android Chrome uses icons declared in a Web App Manifest (manifest.json) linked via <link rel='manifest'>. Microsoft's browserconfig.xml and the msapplication-TileImage meta tag handle Windows tile icons for pinned sites. A complete modern favicon implementation therefore involves multiple files and declarations, not just a single .ico file. Browsers cache favicons aggressively and independently from normal page cache headers. The favicon cache is stored separately from the HTTP cache in most browsers, meaning cache-busting query strings on the favicon URL (e.g., favicon.ico?v=2) may not reliably force a refresh. The most reliable way to force a favicon update is to rename the file and update the <link> tag href accordingly. Chrome's favicon cache TTL is approximately one week in practice, regardless of Cache-Control headers.

Best Practices for What Is favicon.ico?

Always place an explicit <link rel='icon' href='/favicon.ico' sizes='32x32'> in your <head> rather than relying on the browser's automatic /favicon.ico lookup — this eliminates the fallback HTTP request for pages that load the icon from a CDN path or subdirectory. Provide multiple formats: serve an SVG favicon for modern browsers (it scales perfectly on retina/HiDPI displays and supports dark mode) with a PNG or ICO fallback for older browsers, using source order since browsers pick the last supported format. Generate your ICO file to include at least 16×16 and 32×32 embedded sizes using a tool like RealFaviconGenerator.net or Squoosh, and keep file size under 5KB — an oversized favicon adds latency on every page load since it is fetched early in the browser's loading pipeline. For PWA contexts, always include a Web App Manifest with at least a 192×192 and 512×512 PNG icon, and add <link rel='apple-touch-icon' href='/apple-touch-icon.png'> pointing to a 180×180 PNG to ensure proper display on iOS home screens.

What Is favicon.ico? & Canvas Builder

Canvas Builder generates production-ready HTML5 with a well-structured <head> section that includes the standard meta tags and link elements you need to implement a complete favicon setup — the clean, semantic output means there is no legacy markup or duplicate tags to work around when adding your icon declarations. Because Canvas Builder outputs Bootstrap 5-based HTML, the generated pages already follow modern HTML Living Standard conventions, so inserting <link rel='icon'>, <link rel='apple-touch-icon'>, and <link rel='manifest'> tags integrates without conflict. The minimal, uncluttered HTML Canvas Builder produces also avoids the common issue of bloated <head> sections that slow down favicon resolution in browsers.

Try Canvas Builder →

Frequently Asked Questions

Can I use a PNG instead of an ICO file for my favicon?

Yes — all modern browsers support <link rel='icon' type='image/png' href='/favicon.png' sizes='32x32'> directly. However, pure PNG favicons lack multi-resolution embedding, so you need separate link tags for each size (16×16, 32×32). The ICO format remains useful as a fallback because it bundles multiple sizes in one file and is fetched automatically by browsers without any HTML declaration.

Why does my updated favicon still show the old version after I replaced the file?

Browsers maintain a separate favicon cache that ignores standard HTTP Cache-Control headers in many implementations — Chrome, for example, caches favicons for roughly one week regardless of server directives. The reliable fix is to rename the new favicon file (e.g., favicon-v2.ico) and update the href in your <link> tag accordingly, which forces the browser to treat it as a completely new resource and fetch it fresh.

How does Canvas Builder handle favicon implementation in its generated HTML?

Canvas Builder outputs clean, standards-compliant HTML5 with a properly structured <head> section that includes a placeholder <link rel='icon'> tag ready for you to point at your favicon file — no manual boilerplate required. Because Canvas Builder generates Bootstrap 5-based production HTML with semantic markup, the <head> structure follows best practices by default, making it straightforward to drop in a full favicon stack (ICO, SVG, apple-touch-icon, and manifest link) without restructuring any generated code.