Creating an iPhone & iPad homepage icon for your website

Even if your website does not have a iPhone/iPad application, you can still have an iPhone homepage icon. You’re probably wondering what I’m talking about at this point. The iPhone browser actually allows you to bookmark websites so it appears as an iPhone application icon on the home screen. There is no more typing in a long url or using a bookmarks sidebar for the apple devices, just an icon on the homepage. This way, your end-users will have easy access to your website on their apple device.

1)      Creating the iPhone and iPad icon

The icon needs to be a clear logo or image of your choice. Once you have decided which graphic image you will be using, open a graphics editors like Adobe Photoshop and change the image to at 57 pixel by 57 pixel square. This is the exact size of the icon in iphones. But you can make it larger and it will not matter because the iPhone will scale the graphic to the correct size. Don’t worry about rounding corners or adding the gloss or glare effect, it will be automatically changed on the iPhone or iPad device.

2)      Saving the logo

When you are finished with the editing, save you image in the following file format PNG. The file name should also be apple-touch-icon.png. Now, open up your preferred FTP (File Transfer Protocol) and upload the PNG file to your home directory for the website. I used FileZilla FTP to do this.

3)      Test and icon

The third step is the easiest because you are finished. But to make sure, let’s check if it worked. Go to your iPad or iPhone safari browser. When it loads, look for the plus (+) symbol. When clicked, it will open up  a drop down with the following menu, “Add Bookmark”, “Add to Home Screen”, and “Mail Link to this Page”. You will want to choose “Add to Home Screen”. You should now see the icon you created for the home screen instead of a cropped version of your webpage.

With the release of Apples iPhone, mobile technology and the internet on the mobile phone has been rapidly changing with faster speeds and more accessibility. This is just one way to keep updated with the standards


Speak Up

Your email address will not be published. Required fields are marked *