HTML Basics

Lists & Tables

Links & Media

Forms & Layout

HTML Favicon

❮ Previous Next ❯

HTML Favicon: Website Icons

A favicon is a small image displayed next to a website’s title in the browser tab. It helps users quickly recognize and return to a website.

Basic Favicon Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Favicon</title>
    <!-- Add icon link -->
    <link rel="icon" href="/images/favicon.ico" type="image/x-icon">
</head>
<body>
    <h3 style="color: navy;">IntricateDevo</h3>
    <p>Welcome to my website</p>
</body>
</html>

Note: Major browsers are not supported by the sizing property of the favicon.

Creating and Adding a Favicon

To create and add a favicon to your website, follow these simple steps to ensure it's displayed properly across different browsers and devices:

  1. Design a small favicon image (usually 16×16 or 32×32 pixels) and save it in formats like .ico, .png, or .svg.
  2. Upload the favicon image to your website’s root directory or use an external image URL.
  3. Add a <link> tag inside the <head> section of your HTML file to reference the favicon.
  4. Save the changes and test the favicon by opening the website in a browser to ensure it displays correctly.

List of Favicon Sizes

Name Size Description
favicon-32.png 32×32 Standard for most desktop browsers.
favicon-57.png 57×57 Standard iOS home screen.
favicon-76.png 76×76 iPad home screen icon.
favicon-96.png 96×96 GoogleTV icon.
favicon-120.png 120×120 iPhone retina touch icon.
favicon-128.png 128×128 Chrome Web Store icon & Small Windows 8 Star Screen Icon.
favicon-144.png 144×144 Internet Explorer 10 Metro tile for pinned site.
favicon-152.png 152×152 iPad touch icon.
favicon-167.png 167×167 iPad Retina touch icon (change for iOS 10: up from 152×152, not in action. iOS 10 will use 152×152).
favicon-180.png 180×180 iPhone 6 plus.
favicon-192.png 192×192 Google Developer Web App Manifest Recommendation.
favicon-195.png 195×195 Opera Speed Dial icon (Not working in Opera 15 and later).
favicon-196.png 196×196 Chrome for Android home screen icon.
favicon-228.png 228×228 Opera Coast icon.

Favicon File Format Support

File Format Browser Support Quality
ICO All Five ICO supports multiple icon sizes in a single file and provides wide browser compatibility.
PNG All Five High-quality image, supports transparency, smaller file size.
GIF All Five Provides animation.
JPEG All Five Good for high-quality images.
SVG All Five Scalable, small file size, sharp quality at any resolution.
WebP All Five Smaller file size with high quality.

Troubleshooting Favicon Issues

1. Clear Browser Cache

Browsers often cache favicons, preventing updates from appearing immediately. Clear the cache or open the website in incognito mode to refresh the favicon.

2. Check File Path

Ensure the favicon file path is correct and properly referenced. Place the favicon in the root directory or verify the link location.

3. Use Full URL

Specify the complete URL of the favicon to ensure it loads correctly if relative paths are failing.
Example: <link rel="icon" href="https://www.example.com/favicon.ico" type="image/x-icon">

4. Format Issues

Confirm the favicon format is supported (ICO, PNG, SVG). Make sure the format works consistently across different browsers.

Exercise

?

Which HTML tag is used to reference a favicon in a webpage?

❮ Previous Next ❯