Go Tutorial

Introduction to Favicons

A favicon (favorite icon) is a small image displayed in the browser tab, bookmarks bar, and history. It helps users identify your website quickly among multiple open tabs.

Basic Favicon Implementation

1. Standard Favicon (ICO format)

The traditional method using a single .ico file that contains multiple sizes.

Code Example:

<!DOCTYPE html>
<html>
<head>
  <!-- Basic favicon in ICO format -->
  <link rel="icon" href="favicon.ico" type="image/x-icon">
  
  <!-- Alternative syntax -->
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  
  <title>My Website</title>
</head>
<body>
  <h1>Welcome to My Website</h1>
</body>
</html>

File Structure:

project-folder/
├── index.html
├── favicon.ico
├── css/
└── images/

2. PNG Favicon

Using PNG format for better quality and transparency support.

Code Example:

<!DOCTYPE html>
<html>
<head>
  <!-- PNG favicon with specified size -->
  <link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32">
  <link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">
  
  <title>My Website</title>
</head>
<body>
  <h1>Welcome to My Website</h1>
</body>
</html>

Modern Favicon Standards

1. Multiple Sizes and Formats

Supporting various devices and browsers with different icon sizes.

Code Example:

<!DOCTYPE html>
<html>
<head>
  <!-- Basic ICO fallback -->
  <link rel="icon" href="favicon.ico" type="image/x-icon">
  
  <!-- Standard sizes -->
  <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
  
  <!-- Apple Touch Icon -->
  <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
  
  <!-- Android Chrome -->
  <link rel="icon" type="image/png" sizes="192x192" href="android-chrome-192x192.png">
  <link rel="icon" type="image/png" sizes="512x512" href="android-chrome-512x512.png">
  
  <!-- Web App Manifest -->
  <link rel="manifest" href="site.webmanifest">
  
  <title>My Website</title>
</head>
<body>
  <h1>Welcome to My Website</h1>
</body>
</html>

2. SVG Favicons

Using SVG format for scalable, high-quality icons.

Code Example:

<!DOCTYPE html>
<html>
<head>
  <!-- SVG favicon (modern browsers) -->
  <link rel="icon" href="favicon.svg" type="image/svg+xml">
  
  <!-- Fallback for older browsers -->
  <link rel="alternate icon" href="favicon.ico" type="image/x-icon">
  <link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32">
  
  <title>My Website</title>
</head>
<body>
  <h1>Welcome to My Website</h1>
</body>
</html>

Platform-Specific Icons

1. Apple Touch Icons

Icons for iOS home screen and Safari pinned tabs.

Code Example:

<!-- Apple Touch Icons for different devices -->
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-180x180.png">
<link rel="apple-touch-icon" sizes="167x167" href="apple-touch-icon-167x167.png">
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120.png">

<!-- Precomposed (no effects) -->
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="apple-touch-icon-180x180.png">

<!-- Safari Pinned Tab -->
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#5bbad5">

2. Windows and Microsoft

Icons for Windows tiles and Microsoft browsers.

Code Example:

<!-- Microsoft Tiles -->
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="mstile-144x144.png">
<meta name="msapplication-config" content="browserconfig.xml">

<!-- Windows 8/10 Start Screen Tiles -->
<meta name="msapplication-square70x70logo" content="square70x70logo.png">
<meta name="msapplication-square150x150logo" content="square150x150logo.png">
<meta name="msapplication-wide310x150logo" content="wide310x150logo.png">
<meta name="msapplication-square310x310logo" content="square310x310logo.png">

3. Android and Chrome

Icons for Android devices and Chrome browser.

Code Example:

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

<!-- Web App Manifest -->
<link rel="manifest" href="manifest.webmanifest">

<!-- Theme Color -->
<meta name="theme-color" content="#ffffff">

Web App Manifest

1. Manifest.json Example

A web app manifest file for PWA (Progressive Web App) support.

manifest.webmanifest:

{
  "name": "My Awesome Website",
  "short_name": "MySite",
  "description": "A description of my website",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#3498db",
  "orientation": "portrait",
  "icons": [
    {
      "src": "icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

2. HTML Implementation

<!DOCTYPE html>
<html>
<head>
  <!-- Web App Manifest -->
  <link rel="manifest" href="manifest.webmanifest">
  
  <!-- Theme Color -->
  <meta name="theme-color" content="#3498db">
  
  <!-- Apple Mobile Web App -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="default">
  <meta name="apple-mobile-web-app-title" content="My App">
  
  <title>My PWA</title>
</head>
<body>
  <h1>Progressive Web App</h1>
</body>
</html>

Best Practices

  • Provide multiple sizes for different devices and use cases
  • Use ICO format for maximum browser compatibility
  • Include PNG fallbacks for modern browsers
  • Consider SVG for high-resolution displays
  • Test your favicon across different browsers and devices
  • Use simple, recognizable designs that work well at small sizes
  • Ensure proper contrast and visibility
  • Keep file sizes small for faster loading
  • Use Web App Manifest for Progressive Web Apps

File Structure & Tools

Recommended File Structure

project-root/
├── index.html
├── favicon.ico
├── favicon-16x16.png
├── favicon-32x32.png
├── apple-touch-icon.png
├── android-chrome-192x192.png
├── android-chrome-512x512.png
├── safari-pinned-tab.svg
├── site.webmanifest
├── browserconfig.xml
└── images/
    └── (other images)

Useful Favicon Generators

  • RealFaviconGenerator - Comprehensive favicon generator
  • Favicon.io - Simple and easy-to-use generator
  • Favicomatic - Generates all required sizes
  • Canva - For creating favicon designs
  • Adobe Express - Professional favicon creation

Validation Tools

  • W3C Link Checker - Validates favicon implementation
  • Google Lighthouse - Checks PWA and favicon compliance
  • Favicon Checker - Tests favicon across browsers
  • Browser DevTools - Inspect network requests and elements
Logo

HiFi Toolkit is a free online platform offering essential tools and converters for developers, designers, and everyday productivity tasks.

Follow Us

Our Tools
Our Company
Special Tools

© 2026 HiFi Toolkit. All rights reserved.

Terms & ConditionsPrivacy Policy