Favicons, Touch Icons, Tile Icons, etc. What to choose?
From the translator.
This is a translation of Philip Bernard's article from css-tricks.com. I allowed myself to omit the part of the article containing the description of work with the service created by him. If you find errors, please report them in a personal message.
The article contains the results of his research on what the favicon should be (and what replaces it) in order to display well in various cases.
Favicon was introduced in 1999 in Internet Explorer 5 ( source ) and standardized by W3C a few months later. It was a small icon representing the site.
')
Since then, most desktop browsers follow trends and use a favicon in one way or another. It's very simple, isn't it? Create a small picture and add to any online project to make it “complete.” Nothing complicated. Or not?
Let's arrange a quiz!
Answer: favicon.ico. Just to make sure: this is not a PNG, renamed favicon.ico. Although some browsers will forgive this error, ICO is a different format that supports multiple image versions.
A: 16x16. Standard.
B: 32x32. Hasn't the favicon been updated some time ago?
C: 64x64. You know, with all these new high-density pixel screens.
D: None of the above.
Answer: D.
The format favicon.ico was originally conceived by Microsoft and supported by some other manufacturers. Microsoft recommends 16x16, 32x32 and 48x48 sizes. Yes, an ICO can contain multiple images.
Browsers usually display favicon in tabs, and at regular resolutions, version 16x16 looks good:
16x16 on the Chrome tab. So far, so good.
But the 16x16 icon is too small for other places: the taskbar and desktop.
16x16 in the taskbar.
16x16 on the desktop. Not good.
When the icon contains multiple images, the result is much better.
16x16, 32x32 and 48x48 favicon.ico in the taskbar. It looks like a regular program.
16x16, 32x32 and 48x48 favicon.ico on the desktop. Perfect.
In fact, a different file, favicon.png, is more common. People often ask about it.
What is it really?
A: Icon for browsers that do not support favicon.ico. Such as Firefox, probably?
B: High resolution icon. You know, with all these new high-density pixel screens.
C: An artifact from the past. Now these are new icons, for example, Apple Touch icon.
D: All together.
Answer: D.
Since adopting HTML5, favicon.ico is not very useful. The sizes attribute was introduced, allowing to declare several different versions of the same icon, and these can be PNG files:
So what should we announce?
Let's face it. Although almost all desktop browsers support favicon.ico, this file is outdated. Yes, you can still use this file and everything will work as intended. But seriously, this is an outdated format. It is not used anywhere except the web. PNG is supported much better.
favicon.ico - for older versions of IE. For other browsers and latest versions of IE, use PNG icons. So what sizes need to be determined? We will find out soon.
According to SmartInsights , more than 26% of web traffic is generated by smartphones and tablets. This is the future. What is needed to support this world?
A: favicon.ico. It worked 15 years ago, it still works today.
B: PNG icons. You said you would tell about it.
C: Apple Touch icon. Cap
D: Here, anyway, there is no right answer.
Answer: D. Need PNG icons. And Apple Touch icon. And tiles for Windows 8. And a file called browserconfig.xml.
Mobile platforms are much more heterogeneous than regular desktop browsers. Screen sizes and resolutions vary greatly and there is no dominant operating system, such as Windows, as it was during the advent of the Internet.
Consequence: Do not think that a mobile favicon can be one universal picture or have a universal ad in the HTML code.
A: 96x96 for Google TV
B: 196x196 for Android Chrome
C: 228x228 for Opera Coast
D: All listed
Answer: D, and even more. For example, 160x160 for the old version of Opera speed dials (long past), or 128x128 for the Chrome Web Store, it all depends on the platform you are going to support.
Apple Touch icon iOS used for bookmarks and home-screen sites. 5757 comes to mind, bravo. It is right. Only this was 7 years ago when the first iPhone was released.
Answer: Up to 180x180.
After the appearance of the first iPhone, there were 3 important releases:
There are 9 combinations in total.
Old 57x57 Apple Touch icon on a brilliant Retina iPad. Cloudy
Big 152x152 Apple Touch icon on the Retina iPad. Neatly.
If you answered incorrectly, do not be discouraged. Of the 5000 popular sites that provide apple-touch-icon.png, less than 4% do it correctly .
Some may argue that all 9 images are not very necessary. However, at least the main Apple Touch icon should be 152x152. Retina iPad for iOS 7 will find what you need, and younger devices can reduce the image.
A: I do not know. It is necessary to answer something!
B: Yes. Otherwise, how will iOS find them?
C: No. Apple offers recommendations , so any iOS device still wears them.
D: No, but ...
Answer: D ... but some other platforms also use the Apple Touch icon, it’s better to announce them.
As strange as it sounds, iOS devices are not the only ones that are looking for the 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 them.
A: Tablet on Windows 8? What it is?
B: favicon.ico. The legacy of Steve Ballmer.
C: Meta tags. Two msapplication-TileColor and msapplication-TileImage .
D: browserconfig.xml.
Answer: C for Windows 8 and IE 10, D for Windows 8.1 and IE 11. Answer A is also correct in some way.
The announcement for Windows 8.0 looks something like this:
Windows 8.1 and IE 11 are waiting for several versions of the image declared in browserconfig.xml. For example:
The new interface Metro offers several new design principles, for example, “white silhouettes” used by most of the pre-installed programs.
Tile sites in Windows 8.
A: 150x150. You can not read?
B: Other.
Answer: B, 270x270. Microsoft recommends a larger size in order to support screens with a high pixel density.
Congratulations, you have completed the quiz! How did you do that?
The essence of these questions is to show how difficult reality may be, despite its seeming simplicity. The times when favicon was the only favicon.ico are long gone. But old habits persist and can lead to absurd situations. We spend days on a neat responsive design and add only 57x57 Apple Touch icon, suitable only for old devices that almost nobody uses today.
This is a translation of Philip Bernard's article from css-tricks.com. I allowed myself to omit the part of the article containing the description of work with the service created by him. If you find errors, please report them in a personal message.
The article contains the results of his research on what the favicon should be (and what replaces it) in order to display well in various cases.
Favicon was introduced in 1999 in Internet Explorer 5 ( source ) and standardized by W3C a few months later. It was a small icon representing the site.
')
Since then, most desktop browsers follow trends and use a favicon in one way or another. It's very simple, isn't it? Create a small picture and add to any online project to make it “complete.” Nothing complicated. Or not?
Let's arrange a quiz!
What is the main favicon file?
Answer: favicon.ico. Just to make sure: this is not a PNG, renamed favicon.ico. Although some browsers will forgive this error, ICO is a different format that supports multiple image versions.
Question: What size should be favicon.ico?
A: 16x16. Standard.
B: 32x32. Hasn't the favicon been updated some time ago?
C: 64x64. You know, with all these new high-density pixel screens.
D: None of the above.
Answer: D.
The format favicon.ico was originally conceived by Microsoft and supported by some other manufacturers. Microsoft recommends 16x16, 32x32 and 48x48 sizes. Yes, an ICO can contain multiple images.
Browsers usually display favicon in tabs, and at regular resolutions, version 16x16 looks good:
16x16 on the Chrome tab. So far, so good.
But the 16x16 icon is too small for other places: the taskbar and desktop.
16x16 in the taskbar.
16x16 on the desktop. Not good.
When the icon contains multiple images, the result is much better.
16x16, 32x32 and 48x48 favicon.ico in the taskbar. It looks like a regular program.
16x16, 32x32 and 48x48 favicon.ico on the desktop. Perfect.
Question: What is the purpose of favicon.png?
In fact, a different file, favicon.png, is more common. People often ask about it.
What is it really?
A: Icon for browsers that do not support favicon.ico. Such as Firefox, probably?
B: High resolution icon. You know, with all these new high-density pixel screens.
C: An artifact from the past. Now these are new icons, for example, Apple Touch icon.
D: All together.
Answer: D.
Since adopting HTML5, favicon.ico is not very useful. The sizes attribute was introduced, allowing to declare several different versions of the same icon, and these can be PNG files:
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16"> <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32"> <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96"> So what should we announce?
Let's face it. Although almost all desktop browsers support favicon.ico, this file is outdated. Yes, you can still use this file and everything will work as intended. But seriously, this is an outdated format. It is not used anywhere except the web. PNG is supported much better.
favicon.ico - for older versions of IE. For other browsers and latest versions of IE, use PNG icons. So what sizes need to be determined? We will find out soon.
Question: What format is needed to support mobile platforms?
According to SmartInsights , more than 26% of web traffic is generated by smartphones and tablets. This is the future. What is needed to support this world?
A: favicon.ico. It worked 15 years ago, it still works today.
B: PNG icons. You said you would tell about it.
C: Apple Touch icon. Cap
D: Here, anyway, there is no right answer.
Answer: D. Need PNG icons. And Apple Touch icon. And tiles for Windows 8. And a file called browserconfig.xml.
Mobile platforms are much more heterogeneous than regular desktop browsers. Screen sizes and resolutions vary greatly and there is no dominant operating system, such as Windows, as it was during the advent of the Internet.
Consequence: Do not think that a mobile favicon can be one universal picture or have a universal ad in the HTML code.
Question: What size should PNG icons be?
A: 96x96 for Google TV
B: 196x196 for Android Chrome
C: 228x228 for Opera Coast
D: All listed
Answer: D, and even more. For example, 160x160 for the old version of Opera speed dials (long past), or 128x128 for the Chrome Web Store, it all depends on the platform you are going to support.
Question: What is the size of the Apple Touch icon?
Apple Touch icon iOS used for bookmarks and home-screen sites. 5757 comes to mind, bravo. It is right. Only this was 7 years ago when the first iPhone was released.
Answer: Up to 180x180.
After the appearance of the first iPhone, there were 3 important releases:
- iPad. With a much larger screen.
- Retina-screens. With double pixel density.
- iOS7. Flat design is different on the iPhone / iPad.
There are 9 combinations in total.
| Device | Screen | IOS version | Icon size |
|---|---|---|---|
| iphone | Classic | 6 and below | 57x57 |
| 7 | 60x60 | ||
| Retina | 6 and below | 114x114 | |
| 7 | 120x120 | ||
| 6 Plus | 8 and above | 180x180 | |
| iPad | Classic | 6 and below | 72x72 |
| 7 | 76x76 | ||
| Retina | 6 and below | 144x144 | |
| 7 | 152x152 |
Old 57x57 Apple Touch icon on a brilliant Retina iPad. Cloudy
Big 152x152 Apple Touch icon on the Retina iPad. Neatly.
If you answered incorrectly, do not be discouraged. Of the 5000 popular sites that provide apple-touch-icon.png, less than 4% do it correctly .
Some may argue that all 9 images are not very necessary. However, at least the main Apple Touch icon should be 152x152. Retina iPad for iOS 7 will find what you need, and younger devices can reduce the image.
Q: Do I need to declare the Apple Touch icon in HTML?
A: I do not know. It is necessary to answer something!
B: Yes. Otherwise, how will iOS find them?
C: No. Apple offers recommendations , so any iOS device still wears them.
D: No, but ...
Answer: D ... but some other platforms also use the Apple Touch icon, it’s better to announce them.
<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"> As strange as it sounds, iOS devices are not the only ones that are looking for the 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 them.
Question: How to declare a tile for tablets on Windows 8?
A: Tablet on Windows 8? What it is?
B: favicon.ico. The legacy of Steve Ballmer.
C: Meta tags. Two msapplication-TileColor and msapplication-TileImage .
D: browserconfig.xml.
Answer: C for Windows 8 and IE 10, D for Windows 8.1 and IE 11. Answer A is also correct in some way.
The announcement for Windows 8.0 looks something like this:
<meta name="msapplication-TileColor" content="#2b5797"> <meta name="msapplication-TileImage" content="/mstile-144x144.png"> Windows 8.1 and IE 11 are waiting for several versions of the image declared in browserconfig.xml. For example:
<?xml version="1.0" encoding="utf-8"?> <browserconfig> <msapplication> <tile> <square70x70logo src="/mstile-70x70.png"/> <square150x150logo src="/mstile-150x150.png"/> <square310x310logo src="/mstile-310x310.png"/> <wide310x150logo src="/mstile-310x150.png"/> <TileColor>#2b5797</TileColor> </tile> </msapplication> </browserconfig> The new interface Metro offers several new design principles, for example, “white silhouettes” used by most of the pre-installed programs.
Tile sites in Windows 8.
Q: What is the size of tile square150x150logo?
A: 150x150. You can not read?
B: Other.
Answer: B, 270x270. Microsoft recommends a larger size in order to support screens with a high pixel density.
Congratulations, you have completed the quiz! How did you do that?
The essence of these questions is to show how difficult reality may be, despite its seeming simplicity. The times when favicon was the only favicon.ico are long gone. But old habits persist and can lead to absurd situations. We spend days on a neat responsive design and add only 57x57 Apple Touch icon, suitable only for old devices that almost nobody uses today.
Source: https://habr.com/ru/post/260777/
All Articles