HTML · Chapter 16 of 45
HTML Favicon
A favicon is the small icon shown in a browser tab, bookmarks bar, and history next to your page title. It's added using a <link> tag in the <head>.
Favicons are typically 16x16 or 32x32 pixel PNG or ICO files, though modern browsers support SVG favicons too.
Syntax
<link rel="icon" href="favicon.ico">Adding a favicon
Use <link rel="icon" href="favicon.ico" type="image/x-icon"> in the head. Most browsers also check for a favicon.ico at the site root automatically.
Multiple sizes
For best cross-device support, provide multiple favicon sizes and formats, including for Apple touch icons on mobile devices.
Example 1 (html)
<head>
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>Output
(shows favicon.ico in the browser tab)Links the favicon file so browsers display it in the tab.
Example 2 (html)
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">Output
(shows a 32x32 PNG favicon)Specifying type and sizes helps browsers pick the best icon.
Key points
- A favicon appears in browser tabs and bookmarks.
- Added via <link rel="icon"> in the <head>.
- Common formats are ICO, PNG, and SVG.
- Browsers also auto-check for /favicon.ico at the root.
💡 Note: Favicon generators online can create all required sizes/formats from one source image.