Apple Touch Icon

The iPhone and iPad have been out for quite awhile already and you might have noticing requests in your website log for a file called apple-touch-icon.png. If you have congratulations your website is getting traffic from iPhone and iPad users, the bad news is their mobile web browser is looking for a file to create a custom icon on their devices that you don’t have.

The good news is it is an easy fix. The Apple mobile browser is looking for a file called apple-touch-icon.png to create a fancy Apple styled icon on the iPhone or iPad. The easy way to fix it is to create or add a file called apple-touch-icon.png to your root folder of your website. The PNG image should be at least 45 pixels by 45 pixels.

If you can’t save a file to your root folder, perhaps because you are on free hosting or simply do not have access you can point the Apple mobile browser to another location using the following code:

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

Like the favicon code you will need to add the code to the head section of your HTML.

Once you have either have a apple-touch-icon.png or have pointed the browser to another location using the link code your visitors will be able to save your website on their Apple mobile devices with a nifty icon on their iPhone and iPad devices. It will definitely make your website stand out on their machines.

2 thoughts on “Apple Touch Icon

Leave a Comment