Favicon

Web-master / Your website / Web Help

Favicon

Favicon
(Favorites icon)
A website or web page icon. It is displayed by the browser in the address bar in front of the URL of the page, and also as a picture next to the bookmark, in the tabs and in other elements of the interface.

Icon formats

  • image/x-icon for the format ICO;
  • image/gif for the format GIF;
  • image/jpeg for the format JPEG;
  • image/png for the format PNG;
  • image/bmp for the format BMP.
In fact, ICO, PNG and GIF icons work everywhere. Other formats, including animated GIF, will not be displayed everywhere, so it does not make sense to use them.

Well, and the size should be 16X16 pixels. This way it will be displayed correctly.
The ICO format allows you to make a transparent background.

Code of simple icons for the browser

<link rel="icon" href="http://site name/favicon.ico" type="image/x-icon">

Or

<link rel="shortcut icon" href="http://site name/favicon.ico" type="image/x-icon">

Mobile icons

The fact is that today the situation has become more complicated due to the large spread of tablets and smartphones.

Code for mobile icons

This code is suitable for iPhone, Android...

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="icon" type="image/png" href="/favicon-196x196.png" sizes="196x196">
<link rel="icon" type="image/png" href="/favicon-160x160.png" sizes="160x160">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">