HTML Favicons

A favicon (favorite icon) is a small icon that represents your website. It appears in browser tabs, bookmarks, address bars, and other places where your website is referenced. Favicons help users identify your website quickly and add a professional touch to your site.

Basic Favicon Implementation

The simplest way to add a favicon is using the <link> element in the <head> section:

<!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>
  
  <!-- Favicon -->
  <link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
  <!-- Page content -->
</body>
</html>

ICO Format

The ICO format is the traditional favicon format that supports multiple sizes in a single file:

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

PNG Format

PNG is the modern preferred format for favicons, supporting transparency and better quality:

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

SVG Format

SVG favicons are scalable and look crisp on all devices and screen resolutions:

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

Multiple Size Favicons

For best compatibility across different devices and browsers, provide multiple favicon sizes:

<head>
  <!-- Standard favicon for most browsers -->
  <link rel="icon" href="favicon.ico" sizes="any">
  
  <!-- PNG favicons for different 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">
  <link rel="icon" href="favicon-64x64.png" sizes="64x64" type="image/png">
  <link rel="icon" href="favicon-128x128.png" sizes="128x128" type="image/png">
  
  <!-- Apple touch icon for iOS devices -->
  <link rel="apple-touch-icon" href="apple-touch-icon.png" sizes="180x180">
  
  <!-- Android Chrome icon -->
  <link rel="icon" href="android-chrome-192x192.png" sizes="192x192">
  <link rel="icon" href="android-chrome-512x512.png" sizes="512x512">
</head>

Apple Touch Icons

Apple devices use special touch icons for home screen bookmarks. These should be larger and higher quality:

<!-- Apple touch icons -->
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="57x57" href="apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-180x180.png">

Android Chrome

Android Chrome uses specific icon sizes for different screen densities:

<!-- Android Chrome icons -->
<link rel="icon" href="android-chrome-192x192.png" sizes="192x192">
<link rel="icon" href="android-chrome-512x512.png" sizes="512x512">

Windows Tile

Windows devices use tile icons for start menu integration:

<!-- Microsoft Windows tile icons -->
<meta name="msapplication-TileColor" content="#000000">
<meta name="msapplication-TileImage" content="mstile-144x144.png">

Web App Manifest

For Progressive Web Apps (PWAs), include a manifest file:

<!-- Web app manifest for PWA -->
<link rel="manifest" href="site.webmanifest">

Complete Favicon Setup

Here's a comprehensive favicon setup that covers all major browsers and devices:

<!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>
  
  <!-- Favicon for modern browsers -->
  <link rel="icon" href="favicon.ico" sizes="any">
  <link rel="icon" href="favicon.svg" type="image/svg+xml">
  
  <!-- PNG favicons for different 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">
  
  <!-- Apple touch icons -->
  <link rel="apple-touch-icon" href="apple-touch-icon.png">
  <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-180x180.png">
  
  <!-- Android and Windows -->
  <link rel="icon" href="android-chrome-192x192.png" sizes="192x192">
  <link rel="icon" href="android-chrome-512x512.png" sizes="512x512">
  
  <!-- Microsoft Windows -->
  <meta name="msapplication-TileColor" content="#ffffff">
  <meta name="msapplication-config" content="/browserconfig.xml">
  
  <!-- Web App Manifest -->
  <link rel="manifest" href="site.webmanifest">
</head>
<body>
  <!-- Page content -->
</body>
</html>

Favicon File Structure

Organize your favicon files in the root directory or a dedicated folder:

website-root/
├── index.html
├── favicon.ico
├── favicon.svg
├── favicon-16x16.png
├── favicon-32x32.png
├── favicon-48x48.png
├── apple-touch-icon.png
├── apple-touch-icon-180x180.png
├── android-chrome-192x192.png
├── android-chrome-512x512.png
├── site.webmanifest
└── browserconfig.xml

Or in a dedicated icons folder:

website-root/
├── index.html
├── icons/
│   ├── favicon.ico
│   ├── favicon.svg
│   ├── favicon-16x16.png
│   ├── favicon-32x32.png
│   ├── apple-touch-icon.png
│   └── android-chrome-192x192.png
└── site.webmanifest

Design Guidelines

Keep it simple: Favicons are very small (16x16 to 32x32 pixels)
Use high contrast: Ensure visibility at small sizes
Avoid text: Text becomes unreadable at small sizes
Use recognizable shapes: Simple logos or symbols work best
Consider transparency: Works well on different browser themes
Test at multiple sizes: Ensure it looks good at 16x16 and larger

Recommended Sizes

Size	Use Case	Format
16x16	Browser tab favicon	ICO/PNG
32x32	Taskbar and shortcuts	ICO/PNG
48x48	Windows desktop	ICO/PNG
180x180	Apple touch icon	PNG
192x192	Android Chrome	PNG
512x512	Android Chrome high-res	PNG

Best Practices

✓ Do:

Provide multiple sizes for different devices
Use modern formats like PNG and SVG
Test favicons on different browsers and devices
Use simple, recognizable designs
Ensure good contrast and visibility
Include Apple touch icons for iOS devices
Use a web app manifest for PWAs

✗ Don't:

Use complex designs that don't scale well
Include text that becomes unreadable
Forget to test at small sizes (16x16)
Use copyrighted images without permission
Ignore mobile and tablet requirements
Use large file sizes (optimize your icons)
Forget about accessibility and contrast