HTML Favicon – A Complete Guide with Examples & Best Practices

What is a Favicon?

A favicon (short for “favorite icon”) is the small icon displayed in the browser tab, bookmarks, and address bar. It helps in website branding and improves user experience.

✅ Where Do Favicons Appear?
✔️ Browser tabs
✔️ Bookmarks list
✔️ Search engine results (on some browsers)
✔️ Mobile home screens (if added as a shortcut)

1. Adding a Favicon to Your Website

Favicons are added using the <link> tag inside the <head> section of an HTML document.

Example:

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

Explanation:

  • rel="icon" – Specifies that this is a favicon.
  • type="image/png" – Defines the file format.
  • href="favicon.png" – Path to the favicon file.

✅ Best Practice: Use a 16×16 px or 32×32 px PNG, ICO, or SVG file.

2. Supported Favicon File Formats

FormatBest Use CaseSupported?
ICOStandard for favicons✅ Yes
PNGHigh-quality, transparent icons✅ Yes
SVGScalable vector icons✅ Yes
GIFAnimated favicons❌ Limited support

✅ Best Practice: Use an ICO file for maximum compatibility.

3. Using Multiple Favicon Sizes for Different Devices

For better display on high-resolution screens, provide multiple favicon sizes.

Example:

<head>
    <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="apple-touch-icon" href="favicon-180x180.png">
</head>

✅ Best Practice: Include an Apple Touch Icon for iOS devices.

4. Using a Favicon.ico File for Compatibility

Browsers automatically look for a favicon.ico in the root directory.

Steps:

  1. Convert your favicon to ICO format.
  2. Name the file favicon.ico.
  3. Place it in your website’s root folder:
/favicon.ico

Add the following in <head> (optional but recommended):

 
<link rel="shortcut icon" href="/favicon.ico">

✅ Best Practice: Keep a favicon.ico file in the root for older browsers.

5. How to Create a Favicon?

Method 1: Use an online generator like favicon.io or realfavicongenerator.net.
Method 2: Convert an image using Photoshop or GIMP.

✅ Best Practice: Ensure your favicon is simple, clear, and recognizable even at small sizes.

6. Testing Your Favicon

Ways to Check If Your Favicon Works:

✅ Open your website in a browser.
✅ Add your site to bookmarks and check if the favicon appears.
✅ Use the Favicon Checker tool (search online).

Full Example – Adding a Favicon to an HTML Page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Favicon Example</title>
    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
    <link rel="apple-touch-icon" href="favicon-180x180.png">
</head>
<body>

    <h1>Welcome to My Website</h1>
    <p>Check the browser tab to see the favicon!</p>

</body>
</html>

Best Practices for Favicons

✔️ Use ICO, PNG, or SVG formats for better support.
✔️ Keep the favicon simple (avoid too many details).
✔️ Place the favicon.ico file in the root directory.
✔️ Use multiple sizes for better device support.