HTML Favicon
A favicon is the small icon that appears in the browser tab next to your website's title. It also shows up in bookmarks, browser history, and on mobile home screens when someone saves your site. Every professional website has one. This topic teaches you how to add one to your HTML pages.
What a Favicon Looks Like
Visual Diagram — Where the Favicon Appears
Browser Tab Bar: +------------------+------------------+------------------+ | [🔵] My Website | [🔴] Google | [⭐] YouTube | +------------------+------------------+------------------+ ^ This small square icon before the title is the favicon Bookmarks list: [🔵] My Website – www.mysite.com [🔴] Google – www.google.com Address bar (some browsers): 🔵 | www.mysite.com
Favicon File Formats
Browsers accept several image formats for favicons. Each format has its own advantages.
ICO Format — The Classic Choice
The .ico format is the original favicon format. It supports multiple sizes packed into a single file — 16×16, 32×32, and 48×48 pixels. All browsers support .ico files. Name your file favicon.ico and place it in the root folder of your website. Browsers automatically look for this file even without a link tag.
PNG Format — The Modern Choice
PNG files are simpler to create. Use a 32×32 or 64×64 pixel PNG image with a transparent background. All modern browsers support PNG favicons.
SVG Format — The Scalable Choice
SVG favicons look sharp on high-resolution screens because they scale without losing quality. Not all browsers support SVG favicons yet, so always provide a fallback.
WebP and GIF
Some browsers support WebP and animated GIF favicons. These are optional extras. Always include an ICO or PNG fallback for full browser support.
Adding a Favicon to Your HTML Page
You add a favicon through the <link> tag inside the <head> section of your HTML file.
Basic Favicon Link — ICO File
<head> <link rel="icon" type="image/x-icon" href="favicon.ico"> </head>
Favicon Link — PNG File
<head> <link rel="icon" type="image/png" href="favicon.png"> </head>
Favicon Link — SVG File
<head> <link rel="icon" type="image/svg+xml" href="favicon.svg"> </head>
Attributes Explained
rel="icon"
The rel attribute tells the browser the relationship between the HTML file and the linked file. The value "icon" tells the browser this file is the page icon.
type
The type attribute tells the browser the file format. Use image/x-icon for ICO files, image/png for PNG files, and image/svg+xml for SVG files.
href
The href attribute gives the file path to your icon. It can be a relative path from the HTML file or a full URL.
Providing Multiple Fallback Icons
Different browsers and devices pick different icon sizes. You can list multiple <link> tags to cover all cases. The browser picks the most appropriate one.
<head> <!-- Standard ICO for older browsers --> <link rel="icon" type="image/x-icon" href="favicon.ico"> <!-- PNG for modern browsers --> <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png"> <!-- SVG for browsers that support it --> <link rel="icon" type="image/svg+xml" href="favicon.svg"> <!-- Apple devices home screen icon --> <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png"> </head>
Visual Diagram — How the Browser Picks an Icon
Browser checks link tags from top to bottom: 1. Does it support SVG? → Use SVG favicon 2. Can it use PNG? → Use PNG favicon (pick the right size) 3. Can it use ICO? → Use ICO favicon 4. No link tag found? → Check root folder for favicon.ico 5. Still nothing? → Show blank or default globe icon
The Apple Touch Icon
When a user on an iPhone or iPad saves your website to their home screen, iOS uses the apple touch icon. This icon appears on the home screen just like a regular app icon. The recommended size is 180×180 pixels.
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
Android and Progressive Web Apps
Android devices use a file called site.webmanifest or manifest.json to find the home screen icon. This manifest file lists icons in different sizes. You link to the manifest file from your HTML head section.
<link rel="manifest" href="site.webmanifest">
Inside the manifest file, you list icons like this:
{
"icons": [
{ "src": "icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "icon-512.png", "sizes": "512x512", "type": "image/png" }
]
}
Where to Place Your Favicon File
Visual Diagram — File Location
Website root folder:
mywebsite/
├── index.html
├── about.html
├── favicon.ico ← place here for automatic detection
├── favicon-32x32.png
├── apple-touch-icon.png
└── css/
└── style.css
Placing favicon.ico in the root folder means every browser that supports automatic favicon detection finds it without any link tag in your HTML. Adding the explicit link tags makes the icon load faster and gives you more control over which file is used.
How to Create a Favicon
From an existing logo — Open your logo in any image editor. Resize it to 32×32 pixels. Export it as PNG. Then use a free online ICO converter to create the ICO version.
Free favicon generators — Many websites generate complete favicon sets from a single image or from text. Upload your image or type initials, choose colors, and download a complete package with all required sizes and the correct HTML link tags.
From text initials — If you have no logo yet, create a simple favicon from your site name initials. Use two letters, pick a background color, and export at 32×32 pixels. This works as a temporary favicon while your design is still in progress.
Testing Your Favicon
After adding the favicon link tag, open your page in a browser. You may need to clear your browser cache or do a hard refresh to see the new icon. Use Ctrl+Shift+R on Windows or Cmd+Shift+R on Mac for a hard refresh. If the icon still does not appear, check that the file path in the href attribute is correct and that the file exists at that location on your server.