December 28, 2024

How to Add a Favicon in HTML: A Simple Step-by-Step Guide

A favicon — that tiny icon in your browser tab — is a small but powerful part of your website's identity. It helps with branding, improves user experience, and makes your site look professional. If you've created your favicon and are wondering how to add it to your website, this guide will walk you through the simple process.

The Basic Favicon Link Tag

At its most basic, adding a favicon requires a single line of HTML code in the <head> section of your document.

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Awesome Website</title>
  <link rel="icon" href="/favicon.ico" type="image/x-icon">
</head>

Let's break down this <link> tag:

  • rel="icon": This attribute tells the browser that this link is for an icon to be used as a favicon.
  • href="/favicon.ico": This points to the path of your favicon file. By convention, this file is often named favicon.ico and placed in the root directory of your website.
  • type="image/x-icon": This tells the browser the MIME type of the file, which for .ico files is image/x-icon.

While this single line works for many browsers, it's not enough to cover all devices and platforms.

Supporting Modern Browsers and Devices

To ensure your favicon looks great everywhere (including on mobile devices when a user saves your site to their home screen), you need to provide a few more sizes and formats. Modern browsers prefer PNG files, and mobile operating systems like iOS have their own specific requirements.

A more comprehensive set of favicon links looks like this:

<head>
  ...
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="manifest" href="/site.webmanifest">
  <link rel="icon" href="/favicon.ico" type="image/x-icon">
</head>

Explanation of the Additional Tags:

  • PNG Favicons: The lines sizes="32x32" and sizes="16x16" provide modern browsers with PNG versions of your icon, which they often prefer over .ico files for their higher quality.
  • Apple Touch Icon: The rel="apple-touch-icon" tag is specifically for iOS devices. When a user bookmarks your site or adds it to their home screen, iOS will use this icon. The 180x180 size is recommended for modern iPhones.
  • Web App Manifest: The rel="manifest" tag points to a site.webmanifest file. This is a JSON file that is part of the Progressive Web App (PWA) standard and is used by Android devices (and some desktop browsers) to understand how to display your site as an "app," including which icons to use.

A typical site.webmanifest file might look like this:

{
    "name": "My Awesome Website",
    "short_name": "MySite",
    "icons": [
        {
            "src": "/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "standalone"
}

The Easiest Way: Use a Favicon Generator

Manually creating all these different image sizes and the manifest file can be a hassle. The easiest way to get it right is to use a favicon generator.

A tool like the BraveColors Favicon Generator automates the entire process:

  1. You upload a single high-resolution image (or create a favicon from text or an emoji).
  2. It generates all the necessary image files (.png and .ico) in the correct sizes.
  3. It creates the site.webmanifest file for you.
  4. It provides the exact HTML code to copy and paste into your <head>.

By using a generator, you can ensure your site has a professional, consistent favicon across every browser and device in just a few clicks.

Share this post