How to Create an iOS Home Screen Icon for Your Website

  • by Zach (191)
  • Time to complete: 5 minutes

When somebody bookmarks your website on their iPhone or iPad, you probably want your website's logo to appear as the bookmark icon. Similar to application icons, your users will identify this icon immediately and can use it to launch your website.

1

Create your icon

Create your icon using your image editing program of choice. The icon should be 512px X 512px. This size allows for the icon to be used on Retina display devices and will automatically scale down for use on older iPhones with lower resolution screens. You do not need to round the corners of the icon; iOS automatically rounds the corners and gives it a button-like appearance.

2

Save the icon as a PNG in the root directory of your website using the filename apple-touch-icon.png. iOS will take it from there!