HTML Favicons - Detailed Overview

Introduction to Favicons

A favicon is a small icon associated with a webpage, typically displayed in the browser's address bar, tab, or bookmarks. It helps users quickly identify a website. Here's how to add a favicon to your HTML document:

Adding a Favicon

To add a favicon, you need to link it within the <head> section of your HTML document. The most common file format for a favicon is PNG, but other formats like ICO, GIF, and SVG can also be used. Below is an example:

<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">

Here's how this code looks in practice:

Favicon

Favicon Best Practices

To ensure your favicon displays correctly across different devices and platforms, it's recommended to provide multiple sizes and formats. For example:

<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png">

This ensures that your favicon looks sharp and clear on different screens, from desktop browsers to mobile devices.

Using a Site Manifest for Favicons

If you're developing a progressive web app (PWA), you can define multiple icons in a manifest file (site.webmanifest). This method allows more control over how your favicon appears on different platforms. For example:

{
    "icons": [
        {
            "src": "favicon-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "favicon-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}

This approach is particularly useful for creating a consistent branding experience across devices.