A rel="icon" attribute value on a <link> tag specifies the web page icon or favicon for the current page.
This setting only applies to <link> tags.
A rel="icon" on a <link> element.
This link references the favicon for the page or site.
<head>
<link rel="icon" href="/favicon.ico">
</head>
The rel attribute defines the relationship between the current page and the linked resource.
The rel="icon" value defines the web page icon or favicon which visually represents the website.
The icon URL is specified in the href attribute.
<link rel="icon" href="url" />
Only one element accepts a icon value on the rel attribute.
| Elements | Description | |
|---|---|---|
| <link> | Links a resource to the current page -- see example above |
A website icon is called a favicon.
Favicons are used on website tabs, and as touch icons, mobile shortcut icon, and app icons.
Originally, favicons were .ico formatted images, but today .png images are also accepted.
These are the standard sizes for icons:
| Description | Size |
|---|---|
| Browser favicon | 16x16 |
| Taskbar shortcut icon | 32x32 |
| Desktop shortcut icon and Google TV | 96x96 |
| iPhone Retina | 120x120 |
| iPhone 6 Plus | 180x180 |
| iPad Retina | 152x152 |
| iPad Pro | 167x167 |
| Chrome Webstore icon | 128x128 |
| Android Chrome icon | 196x196 |
| Opera Coast icon | 228x228 |
apple-touch-icon as value instead of just icon.Here is when rel support started for each browser:
 Chrome
|
6.0 | Sep 2010 |
 Firefox
|
4.0 | Mar 2011 |
 IE/Edge
|
12.0 | Jul 2015 |
 Opera
|
11.1 | Mar 2011 |
 Safari
|
5.0 | Jun 2010 |
