How To: Create a Custom Apple iPhone Icon for Your Website

by Michael Tao in Technology on April 24th, 2010

Do you like this article?

In just a few easy steps, you can easily create your very own custom iPhone icon for your websire. All you need are access to your site and a photo editor. It might sound hard, but don’t worry, the process is easy. It shouldn’t take you more than 15 minutes.

Step 1 – Create an Icon

For best result, create a 57×57 px PNG image. Upload the image to your web server.

Step 2 – Link your New Icon

Insert the HTML Link tag between your head tags. They are located at the top of your page: <head></head>

<link rel="apple-touch-icon" type="image/x-icon" href="/images/dm-iphone-itouch.png" >

Step 3 – Browse to your Web site from your iPhone/iTouch

Click on the plus sign at the bottom of the screen

Step 4 – Add to Home Screen

Click on the Add to Home Screen button

Step 5 – Name it and Save it

By default it will take the page title. Once you are happy with the name, press Add