What is a Favicon?
Learn the basics
How to Add a Favicon with HTML
Adding a favicon to a website requires just a few lines of HTML in your page's <head> section. This guide covers everything from the basic one-line method to the complete multi-format setup used by modern websites.
Quick Method: One Line of HTML
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, add the following HTML 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 bookmarksfavicon-32x32.png— for modern browser tabsfavicon-16x16.png— for older browsers and small displayssite.webmanifest— for Android and PWA installsfavicon.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.
Understanding the HTML Tags
The rel attribute
rel="icon"— tells the browser this is a faviconrel="apple-touch-icon"— specifically for Apple devices (iPhone, iPad) when users add your site to their home screenrel="manifest"— links to the web app manifest for Android and PWA support
The type attribute
type="image/png"— PNG format favicontype="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.
SVG Favicon (Modern Browsers)
If you want a scalable favicon that looks perfect at any size, you can use SVG format. 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-iconlink 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.
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.
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.