HTML Favicon

🎯 What is a Favicon?

A favicon is a small icon that appears in the browser tab next to your page title. It helps users identify your website among multiple tabs.


<!-- Add this in the <head> section -->
<link rel="icon" type="image/x-icon" href="favicon.ico">

🔹 Adding a Basic Favicon

The simplest way to add a favicon:

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
    <link rel="icon" href="favicon.ico">
</head>
<body>
    <h1>Welcome to My Site</h1>
</body>
</html>

📝 Important Notes:

Place favicon.ico in your website's root folder
Standard size is 16x16 or 32x32 pixels
ICO format works in all browsers

🔹 Different Favicon Formats

You can use various image formats:

🔸 PNG Format

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

🔸 SVG Format (Modern)

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

🔸 Multiple Sizes

<img src="favicon.png" alt="40% Favicon"  style="width: 40%; height: auto;">
<img src="favicon.png" alt="30% Favicon"  style="width: 30%; height: auto;">

🔹 Mobile Favicons

Special icons for mobile devices:

<!-- For Apple devices -->
<link rel="apple-touch-icon" href="apple-touch-icon.png">

<!-- For Android devices -->
<link rel="manifest" href="site.webmanifest">

📱 Mobile Icon Sizes:

Apple Touch Icon: 180x180 pixels
Android Icon: 192x192 pixels