Glossary

What Is How to Add Favicon in HTML?

A favicon (short for 'favorites icon') is a small 16×16, 32×32, or 48×48 pixel icon associated with a website, declared in HTML via a <link> tag in the <head> element and displayed by browsers in tabs, bookmarks, address bars, and OS-level shortcuts. Adding a favicon requires placing the correct <link rel='icon'> declarations pointing to image files — typically ICO, PNG, SVG, or WebP format — so browsers and devices can retrieve and cache the appropriate icon. Modern favicon implementation goes beyond a single file, requiring multiple declarations to support Apple Touch Icons, Android home screen icons, PWA manifests, and Windows tile icons.

What Is How to Add Favicon in HTML?

How How to Add Favicon in HTML Works

At the most fundamental level, a browser requests the favicon by either reading a <link rel='icon' href='/favicon.ico'> tag from the page's <head>, or as a fallback, automatically fetching /favicon.ico from the root of the domain even when no explicit tag exists. The explicit <link> tag approach is preferred because it gives you full control over file path, format, and size — the browser parses it during the initial HTML document load, before rendering is complete, and queues a separate HTTP GET request for the icon file. This request is typically low priority and does not block rendering. Modern browsers support multiple favicon formats beyond the legacy ICO format. PNG favicons (declared with type='image/png') are widely supported and smaller in file size, SVG favicons (type='image/svg+xml') are resolution-independent and ideal for simple logos, and ICO files remain relevant because they support multiple resolutions bundled in a single file. You can provide multiple <link> tags targeting different sizes — for example, a 32×32 PNG for standard displays and a 180×180 PNG for Apple Touch Icon — and the browser selects the most appropriate one based on the use context. For Apple devices, the relevant declaration is <link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'>, which Safari uses when a user saves the site to their iOS or macOS home screen. Android Chrome reads from the Web App Manifest (linked via <link rel='manifest' href='/site.webmanifest'>) to determine home screen and PWA icons using the 'icons' array. Windows tiles historically used <meta name='msapplication-TileImage'> and browserconfig.xml, though these are largely deprecated in modern development in favor of manifest-based approaches. Caching behavior is an important technical consideration: browsers aggressively cache favicons and do not always respect standard HTTP cache headers the same way they do for other assets. If you update a favicon, appending a cache-busting query string to the href (e.g., href='/favicon.png?v=2') forces browsers to re-fetch it. The ICO format's persistence in the ecosystem is largely because it bundles 16×16, 32×32, and 48×48 variants in one file, reducing the number of HTTP requests needed to serve legacy browsers and OS integrations simultaneously.

Best Practices for How to Add Favicon in HTML

Always include an explicit <link rel='icon'> tag in your HTML <head> rather than relying on the browser's automatic /favicon.ico fallback — the fallback still generates an HTTP request even when the file doesn't exist, resulting in a 404 that appears in server logs and browser DevTools. Serve at minimum a 32×32 ICO or PNG for standard browsers, a 180×180 PNG for Apple Touch Icon, and a 192×192 plus 512×512 PNG referenced in your web app manifest for Android and PWA contexts. For SVG favicons, use <link rel='icon' type='image/svg+xml' href='/favicon.svg'> as the primary declaration followed by a PNG fallback, since SVG favicons are supported in Chromium and Firefox but not older Safari or IE. Optimize your favicon files aggressively — a PNG favicon should be under 5KB and an ICO under 15KB — and serve them with long cache TTLs (one year is standard) since the file changes infrequently; combine this with filename versioning rather than query strings for CDN-friendly cache busting.

How to Add Favicon in HTML & Canvas Builder

Canvas Builder outputs production-ready Bootstrap 5 HTML with a clean, fully accessible <head> section, giving developers an ideal starting point to insert complete favicon declaration stacks without fighting framework-generated boilerplate or opaque build processes. The semantic, readable HTML Canvas Builder produces means favicon-related <link> tags, web app manifest references, and Apple Touch Icon declarations can be added and maintained directly in the source without using a build tool or template compiler. For teams using Canvas Builder to rapidly prototype or launch sites, the clean HTML output pairs naturally with tools like RealFaviconGenerator.net — generate the favicon asset set, paste the provided snippet into the Canvas Builder HTML output's <head>, and the site is immediately favicon-complete across all browsers and devices.

Try Canvas Builder →

Frequently Asked Questions

What is the difference between favicon.ico and favicon.png, and which should I use?

favicon.ico is a Microsoft-originated container format that can embed multiple icon resolutions (16×16, 32×32, 48×48) within a single file, making it the most universally compatible option and the format browsers request by default from /favicon.ico. favicon.png is a single-resolution image that requires explicit <link> tag declaration but offers better compression and is simpler to generate. Best practice in modern development is to declare an SVG favicon as primary, a PNG as secondary fallback, and include a favicon.ico at the root for legacy compatibility — covering all browsers without redundant requests.

Why is my updated favicon still showing the old icon after I replaced the file?

Browsers cache favicons very aggressively — often separately from standard page resources — and may ignore standard Cache-Control headers, persisting the old icon for days even after a hard refresh. The most reliable fix is to rename the new favicon file (e.g., favicon-v2.png) and update the href in your <link> tag accordingly, or append a version query string like href='/favicon.png?v=2' to force a new request. Clearing the browser's cache entirely or testing in an incognito window will confirm whether the new favicon is served correctly.

How does Canvas Builder handle favicon declarations in its generated HTML output?

Canvas Builder generates clean, production-ready HTML with a properly structured <head> section based on Bootstrap 5 conventions, making it straightforward to add or customize favicon <link> tags in the correct location without restructuring the document. Because Canvas Builder outputs semantic, well-indented HTML, developers can quickly identify the <head> block and insert the full favicon declaration stack — including the Apple Touch Icon link and manifest reference — without parsing minified or template-obfuscated code. The Bootstrap 5 foundation Canvas Builder uses also ensures the HTML structure is standards-compliant, so favicons render correctly across all modern browsers that interpret the spec accurately.