How To Download And Use Apple Touch Icon
The Apple touch icon, or apple-touch-icon.png, is a file used for a web page icon on the Apple iPhone, iPod Touch, and iPad, similar to the Favicon. This symbol is used when someone bookmarks your website or adds it to their home screen. If this file isn't discovered, these Apple products fall back on a snapshot of the web page, which is usually just a white square.
How Do I Add Apple Touch Icon
The Apple touch icon displays on iOS Safari users' home screens when they add Progressive Web Apps (PWAs) to their home screens. By including a link rel="apple-touch-icon" href="/example. png"> tag in the head> of your page, you can specify which icon your app should use.
If your page lacks this link element, iOS creates an icon from a snapshot of the page's content. To put it another way, telling iOS to download an icon leads in a smoother user experience.
What Size Should Apple Touch Icon Be
The Apple touch icon supplies a device-specific app symbol for this makeshift app. Apple iOS includes a function called "Add to Home Screen," which effectively turns your mobile website into an app (it conceals the browser's address bar and everything).
Here's an updated list of the needed sizes (in pixels):
152152: Touch icon for iPad (up from 144144 in iOS 7) 167167: iPad Retina touch icon (up from 152152 for iOS 10; not in use). 152152) will be used in iOS 10. iPhone Retina (180x180)
Some may claim that 9 graphics aren't actually required. Your master Apple Touch icon, at the very least, should be 152152. A Retina iPad running iOS 7 will discover what it requires, while smaller devices may scale down the image as needed.
Can You Use SVG For Apple Touch Icon
Unfortunately, SVG icons are not yet supported by iOS. And it's unlikely to gain traction very soon. It's also not supported by Android.
Safari however appears to be beginning to support SVG favicons. To make an svg icon for pinned tabs in Safari, you'll need to do the following:
link rel="mask-icon" href="website icon.svg" color="red">
Apple Touch Icon Generator
You may give a personalized icon to your visitors that appears on their Home screens when they bookmark your site or "Add to Home Screen" on Apple iOS devices such as the iPod Touch, iPhone, and iPad, as well as select Android smartphones ("Web Clip" feature).
Different websites can be used to produce the necessary html as well as apple-touch-icons in four sizes (iPhone, iPad, iPhone Retina, and iPad Retina), which you can save as a.zip file.
By reading the article, you can save apple touch icon on your phones. If you are confused about its size, you can read the above paragraph to check which size you can use for the apple touch icon.