Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
145
rated 0 times [  148] [ 3]  / answers: 1 / hits: 20399  / 7 Years ago, mon, september 11, 2017, 12:00:00

What are the recommendation on how to deal with icons in manifest.json?



I found this webpack plugin that generates icons. It generated 37 icons and the corresponding html tags.



<meta name=mobile-web-app-capable content=yes>
<meta name=theme-color content=#fff>
<meta name=application-name content=graff>
<link rel=apple-touch-icon sizes=57x57 href=icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-icon-57x57.png>
<link rel=apple-touch-icon sizes=60x60 href=icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-icon-60x60.png>
<link rel=apple-touch-icon sizes=72x72 href=icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-icon-72x72.png>
<link rel=apple-touch-icon sizes=76x76 href=icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-icon-76x76.png>
<link rel=apple-touch-icon sizes=114x114 href=icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-icon-114x114.png>
<link rel=apple-touch-icon sizes=120x120 href=icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-icon-120x120.png>
<link rel=apple-touch-icon sizes=144x144 href=icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-icon-144x144.png>
<link rel=apple-touch-icon sizes=152x152 href=icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-icon-152x152.png>
<link rel=apple-touch-icon sizes=180x180 href=icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-icon-180x180.png>
<meta name=apple-mobile-web-app-capable content=yes>
<meta name=apple-mobile-web-app-status-bar-style content=black-translucent>
<meta name=apple-mobile-web-app-title content=@dasnoo/graffity-inferno>
<link rel=apple-touch-startup-image media=(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1) href=icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-startup-image-320x460.png>
<link rel=apple-touch-startup-image media=(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2) href=icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-startup-image-640x920.png>
<link rel=apple-touch-startup-image media=(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) href=icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-startup-image-640x1096.png>
<link rel=apple-touch-startup-image media=(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) href=icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-startup-image-750x1294.png>
<link rel=apple-touch-startup-image media=(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) href=icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-startup-image-1182x2208.png>
<link rel=apple-touch-startup-image media=(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3) href=icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-startup-image-1242x2148.png>
<link rel=apple-touch-startup-image media=(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1) href=icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-startup-image-748x1024.png>
<link rel=apple-touch-startup-image media=(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1) href=icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-startup-image-768x1004.png>
<link rel=apple-touch-startup-image media=(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) href=icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-startup-image-1496x2048.png>
<link rel=apple-touch-startup-image media=(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) href=icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-startup-image-1536x2008.png>
<link rel=icon type=image/png sizes=32x32 href=icons-ce3ab881bd31f1efc59c9c227d8f6b7f/favicon-32x32.png>
<link rel=icon type=image/png sizes=16x16 href=icons-ce3ab881bd31f1efc59c9c227d8f6b7f/favicon-16x16.png>
<link rel=shortcut icon href=icons-ce3ab881bd31f1efc59c9c227d8f6b7f/favicon.ico>


For optimal results, should I put the icons in my manifest.json and html meta tags ?
what would having 37 icons achieve that I wouldn't have with say 10 icons (I assume it's more mobile support, but if 3 icons handle 95% of browsers it effectively achieve nothing)? What are the recommended ones ?



This is for a service worker.


More From » html

 Answers
28

You're correct, each of those icons is for a different device and often different version of said device. However, you don't really need 37. To get 37 they generate pixel perfect icons for devices that have much less than 1% market share. You can just provide the nearest match for them and almost no one will even notice. I tend to put browser related icons in the html meta tags and app related icons in the manifest.



Good post about all of this here: https://realfavicongenerator.net/blog/new-favicon-package-less-is-more/


[#56514] Friday, September 8, 2017, 7 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
jesse

Total Points: 513
Total Questions: 118
Total Answers: 106

Location: Denmark
Member since Tue, Jul 19, 2022
2 Years ago
;