HTML Favicon

📌 What is a Favicon?

A favicon (short for “favorite icon”) is a small icon that appears in a browser tab, bookmark list, or shortcut when your site is saved. It's an essential part of your website's branding and user experience ✨.

>>“Tiny in size, massive in identity — that's the power of a favicon.” 🧠

🧱 How to Add a Favicon in HTML

Favicons are added using a <link> tag inside the <head> section of your HTML document.

Basic Favicon Syntax

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

Note

💡 The file favicon.ico should be placed in the root directory of your website, or you must specify the correct path in href.

🎨 Supported Favicon Formats

FormatUsage
.icoClassic format supported by all browsers
.pngHigh-quality, modern browsers only
.svgVector, scalable, great for modern browsers

📁 Examples of Favicon Usage

🔹 Using PNG Format

PNG Favicon

<link rel="icon" type="image/png" href="/favicon.png" />
🔸 Using SVG Format

SVG Favicon

<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
🧩 Providing Multiple Sizes (Optional)

You can specify multiple favicons for different devices or resolutions:

Multiple Sizes Example

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

🧪 Testing Your Favicon

  • Place the favicon file in your public folder
  • Ensure your <link> tag is inside the <head> tag
  • Clear your browser cache and refresh the page

Note

⚠️ Some browsers aggressively cache favicons — try using Ctrl + F5 or open in incognito if changes don't appear.

🚀 Tips for Better Favicons

  • Keep it simple — icons are very small
  • Use high contrast and avoid text in the icon
  • Use a square dimension (e.g., 16x16, 32x32, 64x64)

🧰 Favicon Generator Tools

>>“Even the smallest details like a favicon leave a lasting impression.” 🔍