Custom iPhone / iTouch Icons
by walter on Dec.17, 2009, under Blogging, iPhone
Visited 952 times, 3 so far today
With any web page displaying on your iPhone or iTouch you can tap the + sign and either make a bookmark, or add an icon to the home screen as a web clip. When you make a web clip it ordinarily takes a square screen capture of the top portion of the page and uses that image for the icon. Its just come to my attention that Apple has made a way for website administrators to create a custom image for that icon to be used instead. [Updated after the break]
[Update: If you use the WPtouch iPhone Theme plugin to provide on-the-fly formatting for iPhones, this happens automatically using the icon you choose within its setup.]
[Update 2: See my new post on how to assign custom icons to web clips of websites you don't control. For example, you can use a custom icon for a specific Google Docs file.]
The procedure is similar to that for favicon’s, but doesn’t require the image to be in ICO format. All you need is a 60×60 png file. Some references say it should be 57×57, but 60×60 works. See below for a handy site to assist in creating the file.
Site-wide Implementation
Simply name the file apple-touch-icon.png and store the file in your web root folder.
Page Specific Implementation
In the <head> section of the page, paste the following code
<link rel="apple-touch-icon" href="/apple-touch-icon.png"/>
Careful with that slash in the href before the filename. If the png is in the same folder as the page accessing it, you won’t need it.
Now for a really simple way to create this icon, try this site. It lets you upload your image and apply various effects like rounded corners, borders, shine, etc. For the apple-touch-icon, you won’t need to add shine or rounded corners as the iPhone will do that on its own to make it match the other home screen icons. In one download, the site will return several files in a ZIP.
- 256×256 PNG Graphic with transparent background. (for any use)
- 60×60 PNG Graphic for use as a apple-touch-icon. (iPhone & iTouch)
- An ICO File with transparent background for use as a favicon for your website or to use as a windows icon for anything you desire. (icon sizes up to 256×256 are included in .ico file)
- A readme.txt file showing the proper implementation of the favicons for both normal web browsers and the iPhone/iPod Touch browsers.
-
Welcome to NeutralAxis
TED talks- TED: Mike deGruy: Hooked by an octopus - Mike deGruy (2010)
- TED: Danny Hillis: Back to the future (of 1994) - Danny Hillis (1994)
- TED: Erica Frenkel: The universal anesthesia machine - Erica Frenkel (2011)
- TED: Shawn Achor: The happy secret to better work - Shawn Achor (2011)
- TED: Bill Doyle: Treating cancer with electric fields - Bill Doyle (2011)
