Generate Code

Complete Favicon HTML Code Guide

Learn how to properly implement favicon HTML code for maximum compatibility across all browsers and platforms.

Basic Favicon HTML Code

The minimal implementation for modern browsers:

Minimal Implementation
<!-- Place in <head> section -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="512x512" href="/favicon-512x512.png">
Note: This covers most desktop browsers but misses mobile devices and PWA support.

Complete Cross-Platform Implementation

Full implementation supporting all browsers, mobile devices, and PWAs:

Complete Favicon HTML Code 
<!-- ========== FAVICON IMPLEMENTATION START ========== -->

<!-- Standard Favicons -->
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="512x512" href="/favicon-512x512.png">

<!-- SVG Favicon (Modern Browsers) -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

<!-- Apple Touch Icons -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.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">

<!-- Microsoft Tiles -->
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="msapplication-square70x70logo" content="/ms-icon-70x70.png">
<meta name="msapplication-square150x150logo" content="/ms-icon-150x150.png">
<meta name="msapplication-wide310x150logo" content="/ms-icon-310x150.png">
<meta name="msapplication-square310x310logo" content="/ms-icon-310x310.png">
<meta name="msapplication-config" content="/browserconfig.xml">

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

<!-- PWA Manifest -->
<link rel="manifest" href="/site.webmanifest">

<!-- Theme Color -->
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">

<!-- ========== FAVICON IMPLEMENTATION END ========== -->

Code Breakdown & Explanation

Tag Purpose Required?
rel="shortcut icon" Legacy favicon support (IE) Legacy
rel="icon" sizes="16x16" Small browser tab icon Yes
rel="icon" sizes="32x32" Standard browser tab icon Yes
rel="icon" type="image/svg+xml" Scalable vector icon (modern) Recommended

Apple devices use special icons when users add your site to their home screen:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Key Attributes:

  • rel="apple-touch-icon" - Apple-specific icon
  • sizes="180x180" - Recommended main size
  • PNG format required
  • Should NOT include transparency (solid background)

The manifest file defines PWA icons and behavior:

<link rel="manifest" href="/site.webmanifest">

Your site.webmanifest file should contain:

{
  "name": "Your Site Name",
  "short_name": "Site",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Windows devices use special tile configurations:

<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="msapplication-config" content="/browserconfig.xml">

Create browserconfig.xml for advanced tile configuration:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/ms-icon-70x70.png"/>
      <square150x150logo src="/ms-icon-150x150.png"/>
      <square310x310logo src="/ms-icon-310x310.png"/>
      <wide310x150logo src="/ms-icon-310x150.png"/>
      <TileColor>#ffffff</TileColor>
    </tile>
  </msapplication>
</browserconfig>

Common HTML Code Mistakes

Wrong

<link rel="icon" href="favicon.png">

Missing: type and sizes attributes

Correct

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

Includes: All required attributes (also use 16x16, 96x96, 512x512)

Common Errors to Avoid

  • Forgetting the sizes attribute
  • Wrong type attribute for file format
  • Incorrect file paths (relative vs absolute)
  • Placing tags outside the <head> section
  • Using wrong MIME types

Testing Your Favicon HTML

Verification Checklist:

All tags in <head> section
Correct file paths verified
MIME types match file formats
Sizes attribute on all PNG links
Manifest file exists and valid
Files accessible (200 OK response)

Get Complete HTML Code Automatically

Our generator creates ready-to-use HTML code for all platforms

Generate HTML Code

Related Articles

How to Create

Complete guide

PWA Icons

Manifest setup

Troubleshooting

Fix issues

An unhandled error has occurred. Reload 🗙