Favicon HTML Code

Favicon HTML Code: Link Tags for Every Icon

Adding a favicon to a website requires just a few lines of HTML in your page's <head> section. This guide covers the basic link rel="icon" tag plus the complete multi-format setup used by modern websites.

Quick answer: favicon HTML for most websites

Copy this favicon HTML code into your page's <head> section after placing the favicon files in your site's root directory.

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">

Keep favicon.ico in your site root. Browsers can find it at /favicon.ico without an extra HTML tag.

Generate the favicon files Test your favicon setup

Quick Method: One favicon HTML Line

The simplest way to add a favicon is to place a favicon.ico file in your website's root directory. Most browsers will automatically find it at yoursite.com/favicon.ico without any HTML needed. But for the best compatibility, add this line inside your <head> tag:

<link rel="icon" href="/favicon.ico">

That's it. This works in every browser. But modern websites should include additional sizes and formats for the best experience across all devices.

Complete Method: All Sizes and Formats

For full coverage across browsers, mobile devices, and PWAs, use favicon.ico as the universal fallback and add these favicon link tags to your <head> section:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">

This requires the following files in your website's root directory:

apple-touch-icon.png (180x180) — for iOS home screen bookmarks
favicon-32x32.png — for modern browser tabs
favicon-16x16.png — for older browsers and small displays
site.webmanifest — for Android and PWA installs
favicon.ico — place in root for legacy browser fallback

Our favicon converter and favicon generator create all of these files automatically in a single ZIP download. After adding your favicon, use our favicon checker and tester to verify everything is set up correctly.

Understanding the HTML Tags

Favicon HTML uses <link> tags, not <img> tags. Browsers read these links from the document head and choose the best icon for the current context.

The `rel` attribute

rel="icon" — tells the browser this is a favicon
rel="apple-touch-icon" — specifically for Apple devices (iPhone, iPad) when users add your site to their home screen
rel="manifest" — links to the web app manifest for Android and PWA support

The `type` attribute

type="image/png" — PNG format favicon
type="image/x-icon" — ICO format favicon (optional, browsers can auto-detect)
type="image/svg+xml" — SVG format favicon (modern browsers only)

The `sizes` attribute

The sizes attribute tells the browser which icon to use at which size. Common values are 16x16, 32x32, 180x180, 192x192, and 512x512. See our complete favicon sizes guide for details on each size.

SVG Favicon (Modern Browsers)

If you want a scalable favicon that looks perfect at any size, you can use SVG format. You can also convert an SVG to favicon.ico and PNG fallbacks for broader support. Currently supported by Chrome, Firefox, Edge, and Opera:

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

The browser will use the SVG if supported, and fall back to PNG otherwise.

The Web Manifest File

The site.webmanifest file tells Android devices and PWAs which icons to use. Here's the standard format:

{
  "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"
}

This file is included automatically in the favicon package from our generators.

Troubleshooting

Favicon not showing: Check that the file paths in your HTML match the actual file locations on your server. Use your browser's developer tools (F12 → Network tab) to check for 404 errors.
Browser showing old favicon: Browsers aggressively cache favicons. Clear your cache, hard refresh (Ctrl+Shift+R), or test in an incognito window.
Favicon works locally but not in production: Make sure the favicon files are deployed to your server. Check that your build process includes the files in the output directory.
Favicon works on desktop but not mobile: Ensure you've included the apple-touch-icon link tag and the web manifest file.

Favicon HTML FAQ

Where does the favicon HTML go?

The <link> tags go inside the <head> section of your HTML document, before the closing </head> tag. They should appear on every page of your website. If you use a templating system or framework, add them to your base template or layout file.

What HTML tag is used for a favicon?

Use a <link> tag with rel="icon". The most basic version is <link rel="icon" href="/favicon.ico">. Modern sites should also include PNG, Apple Touch Icon, and web manifest links.

Can I copy and paste favicon HTML code?

Yes. Generate the favicon files, upload them to your site's root directory, then copy the matching HTML link tags into your document head. The file names in the HTML must match the files on your server.

Do I need both ICO and PNG formats?

For maximum compatibility, yes. The ICO format is supported by all browsers including very old versions of Internet Explorer. PNG is preferred by modern browsers and produces better quality. Most sites include both: ICO as a fallback at the root, and PNG for modern browsers via HTML link tags. See our favicon.ico guide for the recommended ICO sizes.

Can I use an emoji or text as a favicon?

Not directly in HTML, but you can generate a favicon from an emoji using our emoji favicon generator, or create one from text using our text favicon generator. These tools convert your emoji or text into the proper image format.