How to Set Up a Favicon in HTML

A favicon is the small icon that appears in the browser tab, bookmarks, and address bar. It helps visually identify your website.


Basic Favicon Setup

Place your favicon file (usually favicon.ico) in the root directory of your website and add this inside the <head> tag:

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

Favicon in Other Formats

You can use other formats like PNG, SVG, or WebP:

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

Modern Favicon Setup (Recommended)

For best compatibility across all devices and platforms:

<link rel="icon" href="favicon.ico" sizes="any">
<link rel="icon" href="favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="manifest" href="site.webmanifest">

Recommended Placement

Place the favicon link tags inside the <head> of your HTML file for it to be recognized by all browsers.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>My Website</title>
  <!-- Favicon links -->
  <link rel="icon" href="favicon.ico">
</head>
<body>
  <!-- Page content -->
</body>
</html>

Best Practices

  • Use a square image (recommended sizes: 16x16, 32x32, 48x48, 64x64, 128x128, 256x256 pixels)
  • Include multiple sizes for different devices (use a favicon generator tool)
  • Name the file favicon.ico for maximum compatibility
  • Place the favicon in your website's root directory
  • Use multiple formats (ICO, PNG, SVG) for broader browser support
  • Create separate icons for Apple devices (apple-touch-icon)
  • Consider creating a site.webmanifest for PWA support
  • Clear browser cache if your favicon doesn't appear after updating
  • Test your favicon on different browsers and devices

Troubleshooting Tips

  • If your favicon doesn't appear, check the file path is correct
  • Ensure the server is configured to serve .ico files properly
  • Try a hard refresh (Ctrl+F5 or Cmd+Shift+R) to clear cache
  • Verify the favicon is in the root directory of your website
  • Check for any console errors in browser developer tools