The Tiny but Mighty Favicon

20 February 2024

<!DOCTYPE html>
<html>
<head>
<title>My Page Title</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico"> </head>
<body> <h1>This is a Heading</h1>
<p>This is a paragraph. </p> </body>
</html>

A favicon¹, or “favorite icon,” is the tiny but mighty image that appears in your browser’s address bar, right next to the web page’s title.

These small yet impactful images not only enhance branding but also make your site stand out when bookmarked or tabbed. Adding a favicon is simpler than you might think—it often boils down to a single line of code!

From Concept to Creation

Before diving into the nitty-gritty, I outlined my plan of action:

Research favicons
Create a favicon
Add the favicon to my site

Step 1: Researching Favicons

I kicked off my journey on the w3schools site, where I found a straightforward guide on adding favicons in HTML. It quickly became clear that favicons are more than just a single image file; there are several variations to consider.

Step 2: Creating a Favicon

Designing a favicon isn’t rocket science, but it can be a bit tedious given the different sizes required. Using a vector image ensures the artwork scales beautifully.

Following w3schools’ advice, I turned to Real Favicon Generator. After uploading a single SVG file, I received a comprehensive set of favicon assets compatible with various browsers and operating systems.than

Step 3: Adding the Favicon to My Site

Armed with a zip file full of essential favicon files from Real Favicon Generator, I placed them in the appropriate directories and added the necessary code to the head of my HTML files.

The tool even offers a favicon checker to preview and ensure no assets are missing—super handy!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Website</title>
    <!-- Link to the favicon -->
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <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="manifest" href="/site webmanifest">
    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#000000">
</head>
<body>
    <!-- Your website content -->
</body>
</html>

Favicons are Easy

While adding a favicon might seem like a minor task, it’s crucial in the evolving digital landscape. As browsers and devices continue to diversify, more assets will be needed.

This guide is a quick overview, and for those seeking a deeper dive, I highly recommend checking out an extensive article on Evil Martians. Looking ahead, I’m excited to explore the use of SVGs for favicons, as modern browsers support them and they offer outstanding quality.

w3schools favicon ↩