HTML rel="icon"

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.

Example

#

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>

Using rel="icon"

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.


Syntax

<link rel="icon" href="url" />

Elements that accept rel="icon"

Only one element accepts a icon value on the rel attribute.

Elements Description
<link> Links a resource to the current page -- see example above

Website favicons

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
Note: For Apple touch, indicate apple-touch-icon as value instead of just icon.

Browser support

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

You may also like

Guides