Apple Touch icon for websites in HTML

For web page icon on iPhone or iPad, use the Apple Touch Icon or apple-touch-icon.png file. This icon is used when someone adds your web page as a bookmark.

For multiple icons with different device resolutions like iPhone or iPad, add sizes attribute to each link element as follows −

<link rel = "apple-touch-icon" href = "touch-icon-iphone.png">

Set size

<link rel = "apple-touch-icon" sizes = "160x160" href = "touch-icon-ipad.png">
<link rel = "apple-touch-icon" sizes = "170x170" href = "touch-icon-iphone-retina.png">
<link rel = "apple-touch-icon" sizes = "180x180" href = "touch-icon-ipad-retina.png">

The icon with the appropriate size for the device is used.

karthikeya Boyini

Updated on: 24-Jun-2020

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started