Home / HTML / Favicon

HTML Favicon

What is a Favicon?

A favicon (favorite icon) is a small image displayed in the browser tab, bookmarks, and browser history. It helps users identify your website visually. Favicons are typically 16x16 or 32x32 pixels and are displayed next to the page title in the browser tab.

Adding a Favicon

To add a favicon to your HTML page, use the <link> tag in the <head> section with the rel="icon" attribute:

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Page</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
    <h1>My Page with Favicon</h1>
</body>
</html>

Favicon File Formats

Favicons can be in several formats:

1. ICO Format (Traditional)

The traditional favicon format is .ico. This is the most widely supported format:

Example

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

2. PNG Format

PNG format is widely supported and can be used for favicons:

Example

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

3. SVG Format (Modern)

SVG format is scalable and works well for modern browsers:

Example

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

4. GIF Format

GIF format can be used, but is less common:

Example

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

Multiple Favicon Sizes

You can provide multiple favicon sizes for different devices and contexts:

Example

<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="icon" type="image/png" sizes="96x96" href="favicon-96x96.png">
<link rel="icon" type="image/png" sizes="192x192" href="favicon-192x192.png">

Apple Touch Icon

For iOS devices, you can specify an Apple touch icon that appears when users add your site to their home screen:

Example

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

Android Chrome Icon

For Android devices, you can specify icons for Chrome:

Example

<link rel="icon" type="image/png" sizes="192x192" href="android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="android-chrome-512x512.png">

Web Manifest

For progressive web apps, you can create a web manifest file that references your favicon:

Example - manifest.json

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

Example - Link to manifest

<link rel="manifest" href="manifest.json">

Complete Favicon Setup

Here's a complete example with multiple favicon formats and sizes:

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Page</title>
    
    <!-- Standard favicon -->
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
    
    <!-- Apple touch icon -->
    <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
    
    <!-- Android Chrome icons -->
    <link rel="icon" type="image/png" sizes="192x192" href="android-chrome-192x192.png">
    <link rel="icon" type="image/png" sizes="512x512" href="android-chrome-512x512.png">
    
    <!-- Web manifest -->
    <link rel="manifest" href="site.webmanifest">
    
    <!-- Theme color for mobile browsers -->
    <meta name="theme-color" content="#4b3190">
</head>
<body>
    <h1>My Page</h1>
</body>
</html>

Favicon Location

Favicons are typically placed in the root directory of your website. However, you can place them anywhere and reference the path:

Example - Root directory

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

Example - In images folder

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

Example - Relative path

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

Creating a Favicon

To create a favicon, you can:

Use online tools: Many online favicon generators are available
Convert from image: Convert a PNG or JPG image to ICO format
Use image editing software: Create a favicon using Photoshop, GIMP, or similar tools
Use a logo: Simplify your logo to work as a favicon

Favicon Best Practices

Keep it simple: Favicons are small, so keep designs simple and recognizable
Use high contrast: Ensure your favicon is visible on different backgrounds
Standard size: Create favicons at 16x16, 32x32, or larger and let browsers scale
Multiple formats: Provide ICO for older browsers and PNG/SVG for modern browsers
Test in browsers: Test your favicon in different browsers to ensure it displays correctly
Cache considerations: Browsers cache favicons, so changes may take time to appear

Common Favicon Sizes

Size	Use
16x16	Standard browser tab
32x32	High-resolution browser tab
96x96	Desktop shortcuts
180x180	Apple touch icon
192x192	Android Chrome icon
512x512	Android Chrome splash screen

← Background Images Page Title →