HTML Favicon

A favicon is a small icon displayed in the browser tab, bookmarks, and address bar of a webpage. It helps in branding and making a website easily recognizable.

What is a Favicon?

  • Size: Typically 16×16 pixels, but modern browsers support larger sizes up to 512×512 pixels.
  • Format: Common formats include .ico, .png, .svg, .gif, and .jpg.

Adding a Favicon to Your Website

The favicon is linked to your HTML document using the <link> element inside the <head> section.

Basic Syntax

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

Try It Now

Example

<!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 rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
  <h1>Welcome to My Website</h1>
</body>
</html>

Try It Now

Favicon File Formats

  1. .ico: Traditional format supported by all browsers.
  2. .png: Common image format; supported by modern browsers.
  3. .svg: Scalable vector graphics; useful for high-resolution screens.
  4. .gif: Animated icons; less commonly used.
  5. .jpg: Not recommended due to lack of transparency support.

Creating a Favicon

You can create a favicon using graphic design software like Adobe Photoshop, GIMP, or online favicon generators.

  1. Create or upload an image: Design your icon or select an image.
  2. Resize the image: Ensure it’s square and typically 16×16, 32×32, or 48×48 pixels.
  3. Convert to .ico: Use online converters if your software doesn’t support .ico.

Linking Multiple Favicon Sizes

For different devices and resolutions, you can link multiple favicon sizes.

<link rel="icon" href="favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="icon" href="favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="favicon-48x48.png" sizes="48x48" type="image/png">

Try It Now

Alternative Favicon Methods

  1. Apple Touch Icons: For Apple devices, use a specific icon format. 
    <link rel="apple-touch-icon" href="apple-touch-icon.png">

    Try It Now

  2. Manifest File: For Progressive Web Apps (PWAs), you can define icons in a manifest file. 
    {
  "icons": [
    {
      "src": "icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

    Try It Now

Testing Your Favicon

  1. Upload to Your Server: Ensure the favicon is in the root directory or specified location.
  2. Clear Browser Cache: If the favicon doesn’t appear, clear your browser cache.
  3. Check Multiple Browsers: Verify the favicon displays correctly in different browsers and devices.

Best Practices

  1. Use a Simple Design: The icon should be clear and recognizable at small sizes.
  2. Ensure Compatibility: Provide .ico and .png formats for broad compatibility.
  3. Optimize for Speed: Use compressed images to reduce loading times.

Conclusion

A favicon is a small but important part of your website’s identity. By following these steps, you can create and implement a favicon that enhances your site’s branding and user experience.