HTML - Icon (Shortcut|Favicon)

About

Icon

  • The Shortcut (or Favicon)
  • Pinned Tab icons

Default

The default favicon searched by the browser is:

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

It's equivalent to the below code:

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

The ico file format may be:

Declaration

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

Favicon

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

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

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

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

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

Management

Creation

Documentation





Discover More
HTTP - Accept header

accept is a request header that specify the mimes type of the response body that are accepted by the client (ie browser) If no Accept header field is present, then it is assumed that the client accepts...



Share this page:
Follow us:
Task Runner