The new iPod Touch/iPhone 1.1.3 firmware has a nifty little function that creates web clips for your favorite websites. By doing this, it takes a snapshot of the webpage and creates a custom icon bookmark for your iPod Touch/iPhone desktop so that you can easily access the site later.
That is really cool you say. Well, what if that is just not enough. What if you wanted to add your own custom image so that others can see your custom logo rather than a snapshot. Well, have no fear we have the tips for you.
Here’s what you do.
Apple even makes it easy for you to do. You don’t even have to be extra creative. Safari will automatically convert the image into an icon that looks like it was made for the iPod Touch/iPhone.
- Create a 57×57 png.
- Design an image that you want to use and save it as ”apple-touch-icon.png”
- Then upload it to the root folder of your website. Not the root of your server.
Note: if you don’t have access to your root folder or you would rather use something other than a png image. You can simply add it to your header line. Simply upload it to your site, copy the link of the image and and follow the directions below.
<head>
<title>yoursitehere</title>
<link rel=”apple-touch-icon” href=”/yourimage.jpg”/>
</head>
Thats it. Now you have a custom Web clip for your website.
You can use a bigger size image if you wish. It may provide for a little more crisp image. I myself, used a 158×158. Don’t worry, Safari will automatically resize the image, round the corners and put a glassy overlay for you.
Here is mine as an example of what it will look like.
My original image.
After Safari has done it’s thing
Hope you find this as useful as I have. If you want more information you can visit iPhone Dev Center, you will see a section referring to creating web clips.
Popularity: 40% [?]
February 20th, 2008 at 6:14 pm
Very Nice! Thanks!
February 21st, 2008 at 2:30 am
Glad I could help!