Apple Touch Icon for Website Tips
Apple Touch Icon is just like a favicon which displays on the iOS device when a user bookmarks or adds your website to the home screen of iPhone or iPad.
Article Contents
Please click any link below and go directly to that section on this page.
You may check links for tutorial videos for better visual experience and research data [RD] about this article, at the end of article.
Should You Provide a Separate Favicon for iOS Devices?
You should not declare a separate Apple Touch Icon link in your website or progressive web app, after Apple updates. [RD]
It is because the Safari and iOS use manifest-declared icons when there is no apple-touch-icon defined in the HTML head and can parse the ICONS member of web app manifest. [RD]
A JSON manifest file includes the icons and instructions for the browser to use it. [RD]
However, if you provide icon through Apple Touch Icon link, then Safari will prioritize that link over web manifest icon, to provide consistent behavior for web apps.
It means if your website still has rel=apple-touch-icon element, then this element overrides your manifest icons declaration. [RD]
Apple Touch Icon was a Nuisance
Please note that for long Apple has not followed the standard for web icons which was in fact a nuisance for the developers.
Apple required a non-transparent, maskable PNG favicon image in around 180px square if the website author wanted an intended display of favicon when the users would add website to home screen of iOS devices. [RD]
It is interesting fact that only 32% sites passed the Lighthouse audit for apple-touch-icon check. [RD]
It was confusing whether to use apple-touch-icon.png in the root directory or use <link rel="apple-touch-icon" href="/apple-touch-icon.png"> link for every page. [RD]
Developers wanted to specify only necessary elements in HTML for page speed. [RD]
Apple Touch Icons are incredibly lazy although these are simply logo redirects. [RD]
Therefore, in the past Apple’s insistence for not following the standard specs and reading icons from the Web App Manifest, made many developers annoyed.
Connor Clark, a Lighthouse contributor suggested to delete the audit for Apple Touch Icon in Lighthouse version 10. [RD]
If you do not provide a Touch Icon, the screenshot of your webpage may be used on the home screen of iPhone or iPad. In other words, providing an Apple Touch Icon only provide a little polished and intended view of your webpage. No special benefit. [RD]
Apple Touch Icon is also a nuisance because whenever, a brand changes its logo on app or website, it must also be changed for iOS devices separately. It is possible that web designer has changed logo on website but not updated the Apple Touch Icon meta link. For example, Flipkart logo icon was changed in 2015 but their tech team forgot to change it for Apple Touch Icon. So, even after 2 years, in 2017 Flipkart old logo (with cart) was still being served for iOS devices. [RD]
Please note that Android platform does not provide such restrictions. For example, in my test, when I bookmarked my website on Android phone, it automatically pulled favicon from my website and displayed on the home screen, even though the logo had a transparent background.
Websites Which Did Not Provide Touch Icon
Following websites are examples which have no touch icon in the root directory. [RD]
Google website
Amazon website
Wix website
Statista website
Android website
Ferrari website
For Squarespace.com, 180 x 180 pixel Apple Touch icon is present but not in the root directory.
For some sites such as walmart.com, Apple Touch Icon is present in the root directory but high resolution Touch icon is absent.
Microsoft developers have not declared Apple Touch Icon for www.xbox.com, however, they have added Apple Touch Icon meta for the live status page of its subdomain – (https://support.xbox.com/en-US/xbox-live-status) – and that only in 2020 on special request made in 2018, after wait of almost two years. [RD]
Next: Method to declare Apple Touch Icon on Squarespace Website.
