HTML - Icon (Shortcut|Favicon)

> (World Wide) Web - (W3|WWW) > HyperText markup Language (HTML)

1 - About

Icon

  • The Shortcut (or Favicon)
  • Pinned Tab icons

3 - Declaration

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

3.1.1 - Favicon

<link rel="shortcut icon" href="http://gerardnico.com/wiki/lib/tpl/bootie/images/favicon.ico" />

3.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">
Advertising

3.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">

3.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">

3.2 - Location

It can also be declared on the web server.

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

Example: https://maven.apache.org/favicon.ico

Advertising

4 - Management

4.1 - Creation

5 - Documentation