HTML Favicon

A favicon is a small icon that appears next to the page title in the browser tab. It helps users identify your site and adds a professional touch to your website. In this chapter, we’ll cover how to add a favicon to your HTML document and explore various methods to implement it.

1. Basic Favicon

The most common way to add a favicon is by using the <link> element inside the <head> section of your HTML document.

Example:

<link rel="icon" href="favicon.ico" type="image/x-icon">

This code links to a favicon file named favicon.ico located in the root directory of your website.

2. PNG Favicon

Favicons can also be in PNG format. Simply change the file extension in the href attribute.

Example:

<link rel="icon" href="favicon.png" type="image/png">

This code links to a favicon file named favicon.png.

3. Multiple Icons for Different Devices

To ensure your favicon looks good on different devices and browsers, you can provide multiple icon sizes. This is especially useful for higher-resolution displays.

Example:

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

4. Apple Touch Icons

For better integration with iOS devices, you can provide an Apple touch icon. This is a larger icon that will be used when users save your webpage to their home screen.

Example:

<link rel="apple-touch-icon" href="apple-touch-icon.png">

This code links to a touch icon named apple-touch-icon.png.

5. SVG Favicon

SVG favicons are scalable and can look sharp on any screen resolution. Here’s how you can add an SVG favicon.

Example:

<link rel="icon" href="favicon.svg" type="image/svg+xml">

This code links to a favicon file named favicon.svg.

6. Specifying a Favicon in a Manifest File

For progressive web applications (PWAs), you can specify favicons and other icons in a manifest file. This method provides more control over how your icons are displayed across various platforms.

Example:

<link rel="manifest" href="site.webmanifest">

Inside the site.webmanifest file:

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

Best Practices for Favicons

Ensure your favicon is recognizable and represents your brand.
Provide multiple sizes of your favicon to support various devices and screen resolutions.
Optimize your favicon files to reduce load times.
Test your favicon across different browsers and devices to ensure compatibility.

Join the conversation