- Follow the directions provided by Apple to create a 57x57 PNG file to be used as your icon. I've saved mine as a.png
- Create an HTML file with this code in it:
<html>
<head>
<title>Apple Webapps</title>
<SCRIPT LANGUAGE=JAVASCRIPT TYPE="TEXT/JAVASCRIPT">
if (document.referrer == '')
{
window.location="http://www.apple.com/webapps"
}else {
document.write ("Click the plus icon below, then choose Add to Home Screen")
}
</SCRIPT>
<link rel="apple-touch-icon" href="a.png"/>
</head>
<body>
</body>
</html> - Upload both to the same directory of your web server, and browse to this page on your iPhone. The page will be blank. Add it as a web clip. Your icon should show up next to the title. If it isn't, double check that you followed Apple's directions correctly, and that the href specified in your link tag is correct. That's it!
Now, you have a nice icon that points to a page that will instantaneously bounce you to your favorite iPhone site. Here's a list of my favorites, which you can add directly from your iPhone.
25 comments:
I am not at all technologically savvy but will certainly try this. I wonder if you'd do the honors and create one for opentable.com, zagat.com and freshdirect.com. Would love that!
Just a quick tip: Apple's icons are 158x158, so if you upload png files of that resolution, they'll look just as good as the native icons (the 57x57 are a bit chunky). Thanks for the resource, though!
Thanks for the tip, I'll update the ones I have that look chunky tonight!
I haven't tried it yet, but I'd imagine the more web-savvy (and standards-compliant) among us could use HTTP redirect (via .htaccess) instead of the meta refresh method. Right?
Probably. I have tweaked my method a little bit since writing this, so that you don't have to re-upload the file. If you look at the source code for one of my favorites, I put a little javascript that checks to see if you have a referring URL. If you do it doesn't forward you, so you can bookmark it. If you don't, which is the case when you click on the link from your iPhone's home screen, it forwards you to the destination. I also tried to have it perform a document.write to put the instructions for adding it to your iPhone's home page on there, but it only seems to work on normal browser (not my iPhone).
If you want to use the actual url, try out my script: http://pz2.ucls.uchicago.edu/webclipIcons.js
Check out how to make a WebClip icon with a border. It is something you may want to know also, it’s not as simple as you would think.
great work!!!! how about adding http://seeqpod.com this would be awesome!!!
ps. your ebay one doesnt work....it takes me to a roadrunner site
can you add one for movie tickets.com. They have a iPhone optimized site. Thanks
I give you this link : http://img158.imageshack.us/img158/5567/pjcy7.png
for this site: http://wap.pagesjaunes.fr/
for french users.
Can you at Mactracker? http://www.mactracker.ca/iphone
whew...YOU = brilliant. but me....aargh, not so much, i don't see "add to home screen" -- on iPhone, I see "+" button at top (rather than bottom) and that will add it to my bookmarks within the safari icon, but hmmm...what am I missing to get that desired icon right there on iPhone homescreen. And THEN how to delete the ones I'll never use (stocks and such) -- thanks in advance for the remedial advice....
amy
You need to install the 1.1.3 update. Connect your iPhone to your computer to sync, then check for updated software. If you have an iPod touch, you have to pay for the extra $20 software upgrade you will be prompted for after installing the update.
I've made .png files for a couple of common and interesting sites. I would be happy to e-mail them to you if you would like and can supply me with an address.
For the record. NY Times and Tipr both have their own icons now (mysteriously close in appearance to the ones that you created by the way).
Can you please make one for cougfan.com? I made an icon but I don't know how to get it to you. I basically just took the logo from this web site and shrunk it to 157x157.
http://www.sportslogos.net/logo.php?id=2724
I would love to see a foxnews.com web clip icon.
I love what you're doing but so confused on how to do it! I saved the code and dropped it on my server. Saved a PNG file for my icon in the same folder. But step 3 doesn't make sense to me. Can you help?
foxnews.com already has one.
Hey,
I wanted to thank you for your code and stuff! I used it to make webclips for calling people...
http://mrpunk2u.blogspot.com/2008/02/iphone-how-to-picture-webclips-for.html
i tried this on my own webserver and it didnt work.. I copied your code directly, and it automatically redirected to the URL and didnt allow me to ADD it to my home.
Try making an "index" page that has links to the individual shortcut files; it doesn't need to be anything fancy. Then open THAT page on your iphone and follow the links to the shortcuts.
The Flickr url is to the mobile Flickr site http://m.flickr.com not the optimized iPhone Flickr site http://i.m.yahoo.com/a/flickr. Can the URL of a bookmark on the iPhone be changed on the phone itself? If so how is this done?
Yep, thanks for that -- it's updated!
I would suggest making icons for popular video gaming sites, like xbox.com, or playstation.com? I would imagine that they recieve alot of iPhone/ iPod Touch traffic
Post a Comment