Favicon today: formats, support, automation
Today, favicon is not just a 16x16 icon in a browser tab. It is an important component of the interface, and also plays an important role in progressive web applications. There are many ways to connect and use favicon, which I will discuss in this article.
Previously, the basic favicon format was ICO. Its main feature was that a file of this format could store several options for the size of the icon. Now the ICO format is considered obsolete, it was replaced by the PNG format with new possibilities for interacting with the icon.
')
In addition to PNG, the SVG format is supported. But he, unfortunately, has low support at the moment. However, this format is ideal for favicons, its use would make life much easier for us. Hopefully, the situation will change soon.
Favicon can be created in several other formats, for example, in GIF or JPEG, but support problems make their use impractical.
The sizes attribute came into our life with HTML5. Thanks to him, the browser or device can choose the required size of favicon. The sizes attribute is specified in the format [width x height] without specifying units. If several icons are stored in the file at once, you can set their sizes through a space. The any keyword indicates that the icon can scale to any size, for example, if it is stored in SVG vector format.
As I have already said, the ICO format today can already be considered obsolete, but does this mean that we need to get rid of it urgently? The answer, as always, is ambiguous. There are cases where the ICO format can still serve you well. I will give a few examples of the justified use of the favicon in the ICO format in different operating systems and talk about alternatives.
Let's start with Windows.
Prior to version 11, PNG format in IE was not supported, so for IE10 and lower versions, you still need to use the ICO format. But with IE11 you can safely switch to PNG. For older browsers, Microsoft recommends 16x16, 32x32 and 48x48 sizes for favicons of the ICO format.
Starting with IE9, sites got the opportunity to be fixed in the menu and taskbar, and with the advent of IE11 and Windows 8.1, it became possible to create pinned sites in the form of live tiles. By default, the image on the tile will be a favicon, but not for large and wide tiles, for which you need to specify an image of a special size. This can be done in the following ways: by adding metadata tags to the web page markup or browser configuration file.
First, let's look at the first method.
Defining a favicon in Windows devices using metadata in <head> :
If we want to specify icons for large tiles, this can be done using the following metadata:
You can specify the background color of the tile:
You can specify the name of the pinned site:
If there is no such metadata, then the value in <title> is used as the name; pages.
You can specify the text of the additional tooltip that appears when you hover the mouse pointer over the shortcut of the pinned site in the Windows Start menu or on the desktop:
You can even define the address of the document:
And then no matter what page the user dragged to the taskbar, the pinned site will open the specified address.
There are many other metadata that, for example, determine the colors of the navigation buttons in the browser or make the tiles dynamic.
Starting with IE11 Windows 8.1 and Edge Windows 10, you can pin a website using a browser configuration file. This is convenient: create one browserconfig.xml file and maintain it and connect it on each page if we have several pages that will use the same tiles.
Calling a file in <head>:
browserconfig.xml
square70x70logo, square150x150logo, wide310x150logo, square310x310logo - elements within which images for different tile sizes are declared.
Microsoft recommends taking larger image sizes in order to support high pixel density screens. It is desirable that the size of the source image is about 1.8 times the size of the target tile, so that it can be increased and decreased. For example, for 70x70 the recommended size is 128x128, and for a wide tile of 310x150, the original image has a size of 558x270.
If the site tile is static, then the above elements will suffice. If dynamic tiles are assumed, then you need to add the <notification> element. This element can include up to 5 <polling-uri> elements containing the paths to the corresponding xml notification files in the src attribute. Also inside this tag is a <frequency> element, the value of which indicates in minutes the interval between visits to the site for updating notifications, that is, the live tile will be updated every 30 minutes, for example. Yes, the value is not arbitrary, but only 30, 60, 360, 720 or 1440.
Finally, there is an <cycle> element inside the <notification> tag , which is responsible for the method of repeating notifications (it can take values ​​from 0 to 7). Patterns are only available for medium, wide and large tiles.
The new interface Metro offers several new design principles, for example, “white silhouettes” used by most of the pre-installed programs.
Using the Windows notification platform, a site can display up to five text messages or messages with images that alternate each other on a tile at a time. We will not dwell on these xml-files of notifications. There are many patterns of live tiles, here is one of them:
What is written in quotes in the template attribute is the name of the template. This template contains an image and a small text. Used for large images and medium titles. In fact, there are a lot of similar templates: and just with text, and just with an image, and with several images, and with several lines of text, and so on. Most image or text templates place text on the same tile as the image. But templates with Peek in the title switch between image and text on the tile.
More information about the templates can be found on the official website .
In Mac OS, you don’t get too much, unfortunately. If you save the site to the desktop on Mac OS, the icon will be displayed as a screenshot of the page with html code. Just because the site application in Mac OS is not done, but we will not.
Safari is where the SVG format comes in handy. To use SVG, you must specify the rel attribute with the value mask-icon; all SVG elements must be black. But do not be afraid, you can change the color attribute color . This SVG icon is needed to pin a tab in Safari. And the color when hovering will be the same as we specified in the color attribute.
If you do not specify this icon, the browser will display the first letter of the domain of our site.
I remembered another case where we can still use the ICO format. Search engine Yandex inserts a favicon in the search results next to the site header. That will certainly increase the attractiveness of the snippet and, as a result, clickability. Yandex recommends using the ICO format for this purpose.
Safari in iOS does not display tabs at all favicon, but uses them for bookmarks, just like in Mac OS. In iOS, users can add a website to the desktop, and it will look like a native application. These links are displayed as icons and are called Web Clips.
To do this, add rel = "apple-touch-icon" and specify the size using the sizes attribute. Each device needs its own icon size. Since iOS devices are quite a few, and each device has its own screen resolution, the specification developed by Apple supports the ability to specify several tags with icons of different sizes.
If the icon does not match the recommended size of the device, the closest-sized icon is larger than the recommended size. When a user enters your website from an iOS device, an apple-touch-icon-precomposed.png file is requested, which should be iOS-style: rounded corners, highlights, and shadow. If there is no file with such a name in the project root or rel = "apple-touch-icon-precomposed" , apple-touch-icon.png will be requested, which is allowed to be as it is, and all effects will be superimposed by iOS itself. Accordingly, we need an icon for each size. But if there are no these files, then not a beautiful icon will be displayed on the desktop of the iPhone or iPad, but the page thumbnail - its screenshot.
It is rumored that the Blackberry will also use rel = "apple-touch-icon-precomposed" , but unfortunately there was no opportunity to check.
Read more about current sizes for iOS devices on the official website .
Some may argue that all 9 images are not very necessary. However, at least the main Apple Touch Icon should be 180x180. Other devices can reduce the image. But some other platforms also use the Apple Touch Icon, so it's best to announce them.
As strange as it sounds, iOS devices are not the only ones that are looking for an Apple Touch Icon. Since they are more popular and more common than other high-resolution PNG icons, some browsers, like Android Chrome, use them. Thus, it is better to announce them, this will allow the visitor with a compatible device or browser to use one of these icons.
In iOS, you can specify the title of the web application. The default value of the tag is <title> . To set a different title, add a meta tag to the web page:
By the way, you can even set the style of the status bar for a web application:
You can change its color, you can make it translucent. This will also affect the look of our site.
Android devices are well aware of the PNG format, and still support the manifest of the web application manifest.json, in which you can write all the parameters of how the site will behave if it is installed on the home screen. This manifesto so far, unfortunately, does not read devices under iOS. And if Android does not find this file, then it will use apple-icon-touch.
The manifest file can contain a number of cosmic parameters, but here are only those that we need to display the site on the home screen:
The name key defines the signature in the application on the home table. If this parameter is not specified, the signature will be taken from <title> in <head> ;
The short_name key determines the shortened signature for the application if there is not enough space for the full name;
Key icons - defines an array of icon objects; it can take three values: sizes , src , type ;
The theme_color key defines the color of the status bar. Starting with version 39 of Android Chrome Lollipop, it has become possible to change the color of the browser interface and the color of the browser tab.
You can also set the color via <head> by adding the following meta tag:
The background_color key defines the background color for the web application on the home table. The same parameter is responsible for what color the application background will have when it opens, i.e. The manifest has loaded, but the styles have not yet loaded;
The display key determines the display mode of the web application. For example, the value of standalone, which we specified, allowed us to open the site as an application.
Call to <head> :
There are many other amazing parameters in the manifesto that will make a real application from a website, but they no longer belong to our topic.
In conclusion, it must be said that everything that we have examined in this article is not necessarily hand-written, do not forget about automation. There are websites where you can quickly generate all the sizes and formats we need by favicon: realfavicongenerator.net , and if necessary, you can also generate code at the same time.
There are build packages for both Gulp and Grunt.
The main thing to remember is that today favicon is more than an icon in the address bar and browser tab.
What format should be favicon?
Previously, the basic favicon format was ICO. Its main feature was that a file of this format could store several options for the size of the icon. Now the ICO format is considered obsolete, it was replaced by the PNG format with new possibilities for interacting with the icon.
')
In addition to PNG, the SVG format is supported. But he, unfortunately, has low support at the moment. However, this format is ideal for favicons, its use would make life much easier for us. Hopefully, the situation will change soon.
Favicon can be created in several other formats, for example, in GIF or JPEG, but support problems make their use impractical.
HTML5 and sizes attribute
The sizes attribute came into our life with HTML5. Thanks to him, the browser or device can choose the required size of favicon. The sizes attribute is specified in the format [width x height] without specifying units. If several icons are stored in the file at once, you can set their sizes through a space. The any keyword indicates that the icon can scale to any size, for example, if it is stored in SVG vector format.
<link rel="icon" sizes="<>X<>"> <link rel="icon" sizes="<1>X<1> <2>X<2>* | any"> Is it time to send ICO to landfill?
As I have already said, the ICO format today can already be considered obsolete, but does this mean that we need to get rid of it urgently? The answer, as always, is ambiguous. There are cases where the ICO format can still serve you well. I will give a few examples of the justified use of the favicon in the ICO format in different operating systems and talk about alternatives.
Windows
Let's start with Windows.
Prior to version 11, PNG format in IE was not supported, so for IE10 and lower versions, you still need to use the ICO format. But with IE11 you can safely switch to PNG. For older browsers, Microsoft recommends 16x16, 32x32 and 48x48 sizes for favicons of the ICO format.
Starting with IE9, sites got the opportunity to be fixed in the menu and taskbar, and with the advent of IE11 and Windows 8.1, it became possible to create pinned sites in the form of live tiles. By default, the image on the tile will be a favicon, but not for large and wide tiles, for which you need to specify an image of a special size. This can be done in the following ways: by adding metadata tags to the web page markup or browser configuration file.
First, let's look at the first method.
Defining a favicon in Windows devices using metadata in <head> :
<meta name="msapplication-TileImage" content="images\tileimage.jpg"> If we want to specify icons for large tiles, this can be done using the following metadata:
<meta name="msapplication-square70x70logo" content="images/smalltile.png"> <meta name="msapplication-square150x150logo" content="images/mediumtile.png"> <meta name="msapplication-wide310x150logo" content="images/widetile.png"> <meta name="msapplication-square310x310logo" content="images/largetile.png"> You can specify the background color of the tile:
<meta name="msapplication-TileColor" content="#009900"> You can specify the name of the pinned site:
<meta name="application-name" content="Rick and Morty"> If there is no such metadata, then the value in <title> is used as the name; pages.
You can specify the text of the additional tooltip that appears when you hover the mouse pointer over the shortcut of the pinned site in the Windows Start menu or on the desktop:
<meta name="msapplication-tooltip" content="Title"> You can even define the address of the document:
<meta name="msapplication-starturl" content="./"> And then no matter what page the user dragged to the taskbar, the pinned site will open the specified address.
There are many other metadata that, for example, determine the colors of the navigation buttons in the browser or make the tiles dynamic.
Starting with IE11 Windows 8.1 and Edge Windows 10, you can pin a website using a browser configuration file. This is convenient: create one browserconfig.xml file and maintain it and connect it on each page if we have several pages that will use the same tiles.
Calling a file in <head>:
<meta name="msapplication-config" content="browserconfig.xml"> browserconfig.xml
<?xml version=”1.0" encoding=”utf-8"?> <browserconfig> <msapplication> <tile> <square70x70logo src="/img/favicons/mstile-70x70.png"/> <square150x150logo src="/img/favicons/mstile-150x150.png"/> <square310x310logo src="/img/favicons/mstile-310x310.png"/> <wide310x150logo src="/img/favicons/mstile-310x150.png"/> <TileColor>#000000</TileColor> </tile> <notification> <polling-uri src="notifications/contoso1.xml"/> <polling-uri2 src="notifications/contoso2.xml"/> <polling-uri3 src="notifications/contoso3.xml"/> <frequency>30</frequency> <cycle>1</cycle> </notification> </msapplication> </browserconfig> square70x70logo, square150x150logo, wide310x150logo, square310x310logo - elements within which images for different tile sizes are declared.
Microsoft recommends taking larger image sizes in order to support high pixel density screens. It is desirable that the size of the source image is about 1.8 times the size of the target tile, so that it can be increased and decreased. For example, for 70x70 the recommended size is 128x128, and for a wide tile of 310x150, the original image has a size of 558x270.
If the site tile is static, then the above elements will suffice. If dynamic tiles are assumed, then you need to add the <notification> element. This element can include up to 5 <polling-uri> elements containing the paths to the corresponding xml notification files in the src attribute. Also inside this tag is a <frequency> element, the value of which indicates in minutes the interval between visits to the site for updating notifications, that is, the live tile will be updated every 30 minutes, for example. Yes, the value is not arbitrary, but only 30, 60, 360, 720 or 1440.
Finally, there is an <cycle> element inside the <notification> tag , which is responsible for the method of repeating notifications (it can take values ​​from 0 to 7). Patterns are only available for medium, wide and large tiles.
The new interface Metro offers several new design principles, for example, “white silhouettes” used by most of the pre-installed programs.
Using the Windows notification platform, a site can display up to five text messages or messages with images that alternate each other on a tile at a time. We will not dwell on these xml-files of notifications. There are many patterns of live tiles, here is one of them:
<tile> <visual lang="en-US" version="2"> <binding template="TileWide310x150ImageAndText01" <image id="1" src="images/image1.png" alt="alt text"/> <text id="1">Text Field 1</text> </binding> </visual> </tile> What is written in quotes in the template attribute is the name of the template. This template contains an image and a small text. Used for large images and medium titles. In fact, there are a lot of similar templates: and just with text, and just with an image, and with several images, and with several lines of text, and so on. Most image or text templates place text on the same tile as the image. But templates with Peek in the title switch between image and text on the tile.
More information about the templates can be found on the official website .
Mac OS
In Mac OS, you don’t get too much, unfortunately. If you save the site to the desktop on Mac OS, the icon will be displayed as a screenshot of the page with html code. Just because the site application in Mac OS is not done, but we will not.
Safari is where the SVG format comes in handy. To use SVG, you must specify the rel attribute with the value mask-icon; all SVG elements must be black. But do not be afraid, you can change the color attribute color . This SVG icon is needed to pin a tab in Safari. And the color when hovering will be the same as we specified in the color attribute.
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#000ff"> If you do not specify this icon, the browser will display the first letter of the domain of our site.
I remembered another case where we can still use the ICO format. Search engine Yandex inserts a favicon in the search results next to the site header. That will certainly increase the attractiveness of the snippet and, as a result, clickability. Yandex recommends using the ICO format for this purpose.
iOS
Safari in iOS does not display tabs at all favicon, but uses them for bookmarks, just like in Mac OS. In iOS, users can add a website to the desktop, and it will look like a native application. These links are displayed as icons and are called Web Clips.
To do this, add rel = "apple-touch-icon" and specify the size using the sizes attribute. Each device needs its own icon size. Since iOS devices are quite a few, and each device has its own screen resolution, the specification developed by Apple supports the ability to specify several tags with icons of different sizes.
<link rel="apple-touch-icon" sizes="57x57" href="apple-touch-icon-57x57.png"> <link rel="apple-touch-icon" sizes="60x60" href="apple-touch-icon-60x60.png"> <link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76x76.png"> <link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120.png"> <link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152.png"> <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-180x180.png"> If the icon does not match the recommended size of the device, the closest-sized icon is larger than the recommended size. When a user enters your website from an iOS device, an apple-touch-icon-precomposed.png file is requested, which should be iOS-style: rounded corners, highlights, and shadow. If there is no file with such a name in the project root or rel = "apple-touch-icon-precomposed" , apple-touch-icon.png will be requested, which is allowed to be as it is, and all effects will be superimposed by iOS itself. Accordingly, we need an icon for each size. But if there are no these files, then not a beautiful icon will be displayed on the desktop of the iPhone or iPad, but the page thumbnail - its screenshot.
It is rumored that the Blackberry will also use rel = "apple-touch-icon-precomposed" , but unfortunately there was no opportunity to check.
Read more about current sizes for iOS devices on the official website .
Some may argue that all 9 images are not very necessary. However, at least the main Apple Touch Icon should be 180x180. Other devices can reduce the image. But some other platforms also use the Apple Touch Icon, so it's best to announce them.
As strange as it sounds, iOS devices are not the only ones that are looking for an Apple Touch Icon. Since they are more popular and more common than other high-resolution PNG icons, some browsers, like Android Chrome, use them. Thus, it is better to announce them, this will allow the visitor with a compatible device or browser to use one of these icons.
In iOS, you can specify the title of the web application. The default value of the tag is <title> . To set a different title, add a meta tag to the web page:
<meta name = "apple-mobile-web-app-title" content = "AppTitle"> By the way, you can even set the style of the status bar for a web application:
<meta name="apple-mobile-web-app-status-bar-style" content="black"> You can change its color, you can make it translucent. This will also affect the look of our site.
Android
Android devices are well aware of the PNG format, and still support the manifest of the web application manifest.json, in which you can write all the parameters of how the site will behave if it is installed on the home screen. This manifesto so far, unfortunately, does not read devices under iOS. And if Android does not find this file, then it will use apple-icon-touch.
The manifest file can contain a number of cosmic parameters, but here are only those that we need to display the site on the home screen:
{ "name": "Rick and Morty", "short_name": "Rick", "icons": [ { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" } ], "theme_color": "#b3adad", "background_color": "#b3adad", "display": "standalone" } The name key defines the signature in the application on the home table. If this parameter is not specified, the signature will be taken from <title> in <head> ;
The short_name key determines the shortened signature for the application if there is not enough space for the full name;
Key icons - defines an array of icon objects; it can take three values: sizes , src , type ;
The theme_color key defines the color of the status bar. Starting with version 39 of Android Chrome Lollipop, it has become possible to change the color of the browser interface and the color of the browser tab.
You can also set the color via <head> by adding the following meta tag:
<meta name="theme-color" content="#9CC2CE"> The background_color key defines the background color for the web application on the home table. The same parameter is responsible for what color the application background will have when it opens, i.e. The manifest has loaded, but the styles have not yet loaded;
The display key determines the display mode of the web application. For example, the value of standalone, which we specified, allowed us to open the site as an application.
Call to <head> :
<link rel="manifest" href="manifest.json"> There are many other amazing parameters in the manifesto that will make a real application from a website, but they no longer belong to our topic.
Automation
In conclusion, it must be said that everything that we have examined in this article is not necessarily hand-written, do not forget about automation. There are websites where you can quickly generate all the sizes and formats we need by favicon: realfavicongenerator.net , and if necessary, you can also generate code at the same time.
There are build packages for both Gulp and Grunt.
The main thing to remember is that today favicon is more than an icon in the address bar and browser tab.
Source: https://habr.com/ru/post/330584/
All Articles