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