A quick way to navigate through websites on your iPhone is with custom icons. If you have a Home Screen on your iPhone dedicated to websites you frequently visit, it is nice when the website has a custom icon. So I decided to make a custom icon for this website. With just 1 line of code and a .png file the job is done.

Bookmark the website

If you want to see if the website you're bookmarking has a custom icon, open the website in Mobile Safari and click the plus sign in the middle of the status bar. A menu will appear as you see in the image above. Click Add to Home Screen and you will see the website is added to your Home Screen. If the website appears as a thumbnail then there's no iPhone icon available.

Making the icon

Open your image editor. I use Adobe Illustrator for a basic vector version of the logo. Make your document 57 pixels wide and 57 pixels for height. Open your logo or any other image you want to use to identify with your website. Make sure the quality is fine before exporting. Next, export this image to the root of your website as a PNG file. Name the file icon.png

Paste the code

After you uploaded this icon into the root of your website on the server, open the index file of your website and look for the head section in the code.

Paste this line of code in the head section. Make sure the filename of the icon is similar.

<link rel="apple-touch-icon" href="http://www.yoursite.com/icon.png" />

Clear the cache of Mobile Safari

I cleared my cache before I bookmarked the website. You can do this in your iPhone by going to Settings > Safari > Clear Cache. After that I opened Safari and made a bookmark to my website. Finally, you will see the icon pop up on your Home Screen.

Apple developer reference

You can visit this 2 pages for more information on this: Create an Icon for Your Web Application or Webpage and this for more general information: Create an Icon for Your Web Application or Webpage