How to Add a Favicon to Your HTML Website

Learn how to add a favicon to your HTML website. Our free favicon generator creates all the favicon files you need, and this guide shows you exactly how to implement them with proper HTML link tags.

Upload Your Logo

Click to upload or drag and drop

PNG, JPG, SVG up to 10MB

What You'll Get

Favicons (7 sizes)

16×32×48×96×128×196×512px icons for browser tabs, bookmarks, and desktop shortcuts

Android Icons (6 sizes)

48×72×96×144×192×512px icons for Android apps and home screens

iOS Icons (5 sizes)

60×76×120×152×180px icons for iOS apps and home screens

Additional Files

manifest.json for PWAs and HTML link tags ready to use

HTML Favicon Implementation

Adding a favicon to an HTML website is simple. You need to place the favicon file in your website's root directory and add the appropriate HTML link tags in the <head> section of your HTML document.

Use our free favicon generator to convert your logo to favicon, then follow the steps below to add it to your HTML website.

Step 1: Generate Your Favicon Files

First, use our HTML favicon generator to create all required favicon sizes. The generator will provide you with:

Multiple favicon sizes (16x16, 32x32, 48x48, 96x96, 128x128, 196x196, 512x512)
A favicon.ico file for legacy browser support
Ready-to-use HTML code

Step 2: Upload Favicon Files

Upload all favicon files to your website's root directory (the same directory as your index.html file):

Upload favicon.ico to the root directory
Upload all PNG favicon files (favicon-16x16.png, favicon-32x32.png, etc.)
Alternatively, create a favicons folder and upload files there

Step 3: Add HTML Link Tags

Add the following HTML code to the <head> section of your HTML document:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your Website</title>
  
  <!-- Favicon HTML -->
  <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="48x48" href="/favicon-48x48.png">
  <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
  <link rel="icon" type="image/png" sizes="128x128" href="/favicon-128x128.png">
  <link rel="icon" type="image/png" sizes="196x196" href="/favicon-196x196.png">
  <link rel="icon" type="image/png" sizes="512x512" href="/favicon-512x512.png">
  <link rel="apple-touch-icon" sizes="180x180" href="/favicon-196x196.png">
</head>
<body>
  <!-- Your content -->
</body>
</html>

If you placed favicons in a subfolder, update the paths accordingly (e.g., href="/favicons/favicon-16x16.png").

HTML Favicon Sizes

For optimal HTML favicon support, include these sizes:

favicon.ico: Legacy browser support (16x16, 32x32, 48x48 combined)
16x16: Browser tabs (most common)
32x32: Browser bookmarks
48x48: Windows desktop shortcuts
96x96: Android home screen
196x196: Apple touch icon
512x512: High-resolution displays and PWAs

Our HTML favicon generator creates all these sizes automatically.

Adding Manifest.json for PWA Support

For Progressive Web App support, add a manifest.json file to your root directory and link it in your HTML:

<!-- In your <head> section -->
<link rel="manifest" href="/manifest.json">

<!-- manifest.json file -->
{
  "name": "Your Website",
  "short_name": "Website",
  "icons": [
    {
      "src": "/favicon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/favicon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#000000",
  "background_color": "#ffffff",
  "display": "standalone"
}

Our favicon generator includes a ready-to-use manifest.json file with all icon references.

Best Practices for HTML Favicons

Always include favicon.ico for legacy browser support
Use absolute paths (starting with /) for better compatibility
Place favicon link tags in the <head> section, preferably near the top
Provide multiple sizes for different devices and contexts
Test your favicon in multiple browsers (Chrome, Firefox, Safari, Edge)
Use our free favicon generator to create all required sizes at once

Related Resources

Free Favicon Generator

Convert your logo to favicon and generate all required sizes with ready-to-use HTML code.

Favicon Sizes Guide

Learn about the best favicon sizes for modern websites and PWAs.