apple-touch-icon
This website, like all of my sites now, has an Webclip Bookmark Icon. That means that if you use the webclip feature of an iPhone or an iPod Touch to “Add to Home Screen”, you get a nice little icon in your home screen instead of just a miniature screenshot of the site itself.
How does this work? Pretty simple:
Create an icon for your site at 57×57px. Mobile Safari will automatically composite the icon with the standard “glassy” overlay so it looks like a built-in iPhone or iPod application— so you might not want to use an already-glossy icon, as that will give you a double-dose of lickable glossiness and actually ends up looking pretty bad.
You can make it a different size if you really want, but it will be scaled to this size and— again— probably will look crappy because of the scaling. Build it at the right size and you’ll be happier.
UPDATE: Then again, some are reporting that a 60×60 icon is resulting in a crisper-looking image, so feel free to experiment.
Save it as a PNG called “apple-touch-icon.png”, and upload it to the root directory of your server, just like how maybe you have a “favicon.ico” for your site icon in web browsers.
Profit!
If you want to have a different bookmark icon for a specific web page, insert a <link> element similar to <link rel="apple-touch-icon" href="/customIcon.png"/> within the <head> element of the page.
{ 0 comments… add one now }
Kick things off by filling out the form below ↓
Leave a Comment