Add more sizes for apple-touch-icon
pavlexander opened this issue · comments
Describe the bug
Currently CLI only generates a single "apple-touch-icon".
Similar to the Favicon, the apple-touch-icon.png is a file used for a web page icon on the Apple iPhone, iPod Touch, and iPad. When someone bookmarks your web page or adds your web page to their home screen this icon is used. If this file is not found these Apple products will use the screen shot of the web page, which often looks like no more than a white square.
To Reproduce
pwa-asset-generator icon-512x512.png ./img/icons2 -i ./index.html -m ./manifest.json --background "rgba(255, 255, 255, 0)" --opaque false --type png --padding "0px" --icon-only
result:
<link rel="apple-touch-icon" href="img/icons2/apple-icon-180.png">
Expected behavior
Following images in header (at least)
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png">
According to this doco: https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/app-icon/
Following sizes are supported:
Device or context | Icon size
-- | --
iPhone | 60x60 pt (180x180 px @3x)
| 60x60 pt (120x120 px @2x)
iPad Pro | 83.5x83.5 pt (167x167 px @2x)
iPad, iPad mini | 76x76 pt (152x152 px @2x)
App Store | 1024x1024 pt (1024x1024 px @1x)
some examples are here: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
in fact both of these links are from NPM package readme :) https://www.npmjs.com/package/pwa-asset-generator?activeTab=readme
Screenshots
Additional context
I don't know if images of smaller sizes are actually required, or a single image that you provide (180px) is enough to cover all scenarios. If this is the case - maybe update Q&A/readme with this information?
In any case - it would be nice if users could define output image size themselves, so they could set-up some automation routines for everchanging OS requirements to avoid waiting for fixes from dev in cases such as this.
Hello and thanks for the suggestion :)
According to Apple's developer documentation:
If there is no icon that matches the recommended size for the device, the smallest icon larger than the recommended size is used.
In other words, if you provide a very large icon, then Safari will automatically scale it down to fit the required size. Since pwa-asset-generator would also just scale the icon down if it were to provide smaller sizes, we might as well omit that step, and save the extra processing time and bandwidth, and let that happen on the device only when it is needed, and only for the exact size that is needed.
I think your suggestion of documenting this design makes sense, but given that Safari 15.4+ now supports standard web manifest icons, I think we are now looking at removing that part of the program entirely, and along with it its documentation.
In any case - it would be nice if users could define output image size themselves, so they could set-up some automation routines for everchanging OS requirements to avoid waiting for fixes from dev in cases such as this.
This feature is definitely being considered, although I am unsure whether it is actually necessary now that all browsers support the web app manifest, which allows you to serve a few standard sizes, and then let the device resize them as needed. This specific request is a duplicate of #446