HTML Favicon

Subject: html

🌟 HTML Favicon

A favicon (short for "favorite icon") is a small icon associated with a website. It appears in browser tabs, bookmarks, address bars, and mobile shortcuts. Though small, it plays a big role in branding and user experience.

📌 What is a Favicon?

  • Small square image (commonly 16x16, 32x32, or 48x48 pixels)
  • Displays in:
    • Browser tab next to page title
    • Bookmarks and browsing history
    • Shortcut icons on mobile home screens

By default, browsers look for a favicon.ico in the root directory, but it's best to define it explicitly.

🚀 Why Is a Favicon Important?

  • Brand Recognition: Visually reinforces your identity
  • Improved UX: Helps users locate your tab when many are open
  • Professional Look: A missing favicon feels unfinished
  • Bookmark Visibility: Stands out in lists of saved pages

📁 Supported Favicon Formats

  • .ico (classic format, still widely supported)
  • .png (modern format, supports transparency)
  • .svg (scalable vector icons, modern browsers)
  • .jpg, .gif (less common)
  • manifest.json (for PWAs)

🔧 How to Add a Favicon in HTML

✅ Method 1: Basic .ico Favicon

🚀 Try it in Compiler

✅ Method 2: PNG Format (modern)

🚀 Try it in Compiler

✅ Method 3: High-Resolution & Apple Icons

🚀 Try it in Compiler

✅ Method 4: Manifest for PWAs

🚀 Try it in Compiler

💡 Example: Full HTML with Favicon

🚀 Try it in Compiler

📐 Favicon Placement Best Practices

  • Place .ico or .png files in the root folder (e.g., /favicon.ico)
  • Use multiple sizes for compatibility across platforms
  • Include an .ico for fallback on older browsers
  • Compress images to improve load times
  • Ensure your favicon is simple and recognizable at small sizes

🛠️ Troubleshooting Tips

  • Clear your browser cache if your favicon doesn’t appear
  • Use absolute paths if relative paths don’t work
  • Check console for errors related to favicon requests
  • Use a favicon generator to ensure compatibility across devices

✅ Key Takeaways

  • Use <link rel="icon"> in the <head> to set a favicon explicitly
  • Combine multiple sizes and formats for best results
  • Favicons improve user experience, branding, and credibility across devices
Next: HTML Images