aside
some favorite linksread the blog
posted on 01/16/08
Override Webclip Icons
This is a little hack I thought up for adding WebClip icons to other sites, like Google Reader, Facebook, Twitter, etc… It’s easy to create a WebClip icon for your own site, as I mentioned in the last post, but if one of your favorite sites doesn’t have a nice one, you’re stuck with an ugly screenshot.
Now this is a hack, but it will work. What we’ll be doing is forwarding from a site of your own, to a site you want to make webclip of. I started off with Google Reader. I decided I wanted a classic feed icon, so I uploaded one.
Now I’ve got to start creating the forward page. I’ve called mine reader.htm. The first line I added
<link rel="apple-touch-icon" href="/demo/readericon.png"/>
Remember to change the href path to wherever your icon is.
Now to start adding the forwarding
<script type="text/javascript">
<!--
function delayer(){
window.location = "http://google.com/reader/"
}
//-->
</script>Here’s the part that will change
<body onLoad="setTimeout('delayer()', 5000)">
At first, I set the delay to 5000, so I have 5 seconds to create the WebClip. I uploaded that to pixelspread.com/demo/reader.htm and browsed to it on my iPhone browser. Now add your WebClip before the page forwards. You should see the WebClip icon you’ve made.
Once you make the WebClip, now go ahead and change that line of code to
<body onLoad="setTimeout('delayer()', 0)">
Now there will be no delay for forwarding, so your nice new webclip icon will point right to the site of your choice.
I’ve uploaded the whole page as txt file if you want to just copy and paste: reader.txt
Here are some more webclip icons you can use:
If anyone thinks up a better way of doing this, please feel free to comment.
Matt
posted on Jan 16, 11:58 AM
@David yes, a different image and url for each webclip icon you want to override.
David Kaneda
posted on Jan 16, 12:55 PM
Just to note, I’m not David K from above, oddly enough…
Anyway, I was just planning a way to do this from your previous code. I haven’t tried anything, but my thought was to create a bookmarklet which would give a Javascript prompt for the icon url, and then use Javascript to write the @link rel=“apple-touch-icon”@ to the document head.
Then you could upload a whole set of icons to your webserver and add them to your web apps on the fly. Again, though, haven’t tried yet.
Dan
posted on Jan 16, 03:50 PM
Nice trick, I used just used it! Awesome idea!
I was getting ready to see if there was a way I could do it myself, just before I found this.
Michael
posted on Jan 16, 04:17 PM
HTTP server redirection (.htaccess, mod_rewrite, whatever) will be faster. Make a temporary fake (real) page at that URL to create the web clip, then delete it and add the redirection rule.
The iPhone will still hit your site first, but can follow the Location HTTP header without needing to download HTML content or execute Javascript.
David K
posted on Jan 16, 05:15 PM
I can imagine how this is done for one webclip. But if I have multiple webclips on my server I should separate them into folders and put the .htaccess file in each folder with different redirect commands?
Garrett Murray
posted on Jan 16, 05:36 PM
Interesting idea, although I’m not thrilled with having to hit my site before another site…
When I first found out about the icon feature, I tried writing a javascript bookmarklet that would insert the necessary code into the header of a page with an icon URL you specify, but MobileSafari wouldn’t buy it.
You can see my bookmarklet and an explanation here: http://maniacalrage.net/iphone/icons/
Matt
posted on Jan 16, 05:42 PM
@Garret Yea, I don’t like having to forward through another site either. I’d rather just see a feature in the iPhone, to set your own icon. Maybe by syncing it with Safari on your mac… But until then, I’d rather have a nice icon for Google Reader.
Josh Bryant
posted on Jan 16, 10:34 PM
A simple 301 htaccess would work well and really fast. It still hits the site but so fast you wouldn’t even notice on the phone.
David Kaneda
posted on Jan 17, 03:16 PM
Looks like Drew figured it out –
This way your server is ultimately left out of the picture.
RKnott
posted on Jan 23, 07:52 AM
Hi,
Done a few on my web site with the original method mentioned here
http://www.uk-knott.demon.co.uk/Iphone.htm (currently the only content on the site, on list of things to do, after washing car…)
left the timer at 5 seconds for now
David S.
posted on Jan 27, 12:06 PM
This is exactly what I was doing until I found a BETTER and MUCH FASTER way. (no FTP)
I found a site called WEBCLIP and basically you place URL and desired image, the site gives you a code and you type that code in your iPhone.
WORKS GREAT, TRY IT.
http://www.webclip.us
Disclaimer: By the way…I am NOT affiliated with these people, use at your own risk but me and my two brothers have been using it and we love it.
David Simmer
posted on Feb 2, 02:27 PM
When in a pinch (perhaps when separated from Photoshop by some scheduled human interaction?) you could just zoom the page and then Add to Home Screen.
http://simmerdesigns.com/ideas/hackless-instant-custom-iphone-icons
Danny
posted on Feb 2, 03:27 PM
The website iPhone Icons located at http://www.icons4iphone.com or http://www.law-direct.org/iphone uses this method to allow you to add icons of your favorite websites to your iPhone homescreen
What?
Pixelspread is the webblog and portfolio of Matt McInerney. If you'd like to learn a little more, check out the about section.
©2008 pixelspread - powered by txp
XHTML CSShistory
- Summer Jun 02
- A Brief Update Apr 30
- The Freebies Section Apr 16
- Serifs on the Web Apr 15
- More Alphabets Apr 04
- New Alphabet Apr 02
- FontStruct Apr 02
David K
posted on Jan 16, 11:44 AMSo cool. I can’t wait to set this up when I find some time. If I’m only doing Facebook, Twitter, and Reader then I need 3 different html pages that refer to the specific image and url? I need to first upload those pages with the 5000 variable, then make the webclips, then change the 5000 to 0. That’s not so bad. Very clever.