HTML - Icon (Shortcut|Favicon)

1 - About


  • The Shortcut (or Favicon)
  • Pinned Tab icons

3 - Default

The default favicon searched by the browser is:

  • at the root of the website
  • with an ico format
  • and the name favicon.ico


It's equivalent to the below code:

<link rel="icon" href="/favicon.ico" />

The ico file format may be:

4 - Declaration

A icon is declared through the link element in a HTML page and every browser may have a different way to define it.

4.1.1 - Favicon

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

4.1.2 - Chrome & Opera

Chrome and Opera uses icon.png, which is scaled to the necessary size by the device. To prevent automatic scaling, you can also provide additional sizes by specifying the sizes attribute.

<!-- icon in the highest resolution we need it for -->
<link rel="icon" sizes="192x192" href="icon.png">
<!-- and this one also -->
<link rel="icon" type="image/png" href="/assets/favicons/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/assets/favicons/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/assets/favicons/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/assets/favicons/favicon-16x16.png" sizes="16x16">

4.1.3 - Safari

Safari also use the link tag with the rel attribute: apple-touch-icon to indicate the home screen icon.

<link rel="apple-touch-icon" sizes="57x57" href="/assets/favicons/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/assets/favicons/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/assets/favicons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/assets/favicons/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/assets/favicons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/assets/favicons/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/assets/favicons/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/assets/favicons/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicons/apple-touch-icon-180x180.png">

<link rel="mask-icon" href="/assets/favicons/safari-pinned-tab.svg" color="#5bbad5">

4.1.4 - Internet Explorer / Edge

You can leave out the relevant meta tags if you don't want to support a specific size.

<meta name="msapplication-TileColor" content="#7d3194">
<meta name="msapplication-TileImage" content="/assets/favicons/mstile-144x144.png">
<!-- Or -->
<meta name="msapplication-square70x70logo" content="icon_smalltile.png">
<meta name="msapplication-square150x150logo" content="icon_mediumtile.png">
<meta name="msapplication-wide310x150logo" content="icon_widetile.png">
<meta name="msapplication-square310x310logo" content="icon_largetile.png">

4.2 - Location

It can also be declared on the web server.

It's location default to the root with the name favicon.ico


5 - Management

5.1 - Creation

6 - Documentation

Data Science
Data Analysis
Data Science
Linear Algebra Mathematics

Powered by ComboStrap