Web Design BlogWelcome to today’s web design tutorial. Were going to show you how to create an Apple Touch Icon for your website. If you’re wondering what an Apple Touch Icon is, When you are using safari on your Apple iPhone, iPod or iPad, you can add a website to your home screen.
By default, the home screen icon is a small screen shot of your website, but by using the html code below and editing the url to your PNG icon, this will now be the icon you see on your apple device.
How to Embed your Apple Touch Icon
If you don’t want to leave the PNG lying around on your root directly, simply embed the following code within the ‘head’ tag of your web page(s).
| 1 | <link rel=”apple-touch-icon” href=”/path/apple-touch-icon.png”> |
How to remove Apple’s Icon Formatting
If you don’t wish for your icon to be glossed, and have its’ corners rounded, simply adjust your embedding code to the following:
| 1 | <link rel=”apple-touch-icon-precomposed” href=”/path/apple-touch-icon.png”> |
October 17, 2010
