- Add-Ons 2
- Articles 330
- Ask iBAM 27
- Contributors 109
- Design & Typography 14
- Essential Apps 52
- Friends of iBAM 14
- Heroic Hardware 9
- Hot News 42
- How do I? 46
- iBAM Email 3
- iBAM Podcast 6
- iPad 7
- iPhone 49
- iPhone App Spotlight 27
- Mac in the Media 18
- Neat & Nifty 61
- Pointless Posts 22
- Reviews 76
- The Cronicles 19
- Troubleshooting 10
- Tutorials 10
- Useful Links 21
Making an iPhone/iPod Touch Webclips Favicon
1473 days ago in Tutorials by Brent | 9 Comments
Here’s a pretty easy one. The newest release of the iPhone firmware brings us all sorts of fun and necessary updates. We can now create webclip icons on our home page from inside Safari. If you’re a design geek like me, a crappy snapshot of a website screen isn’t on my list of things I want to see as icons on my home screen. So Apple has given us a workaround.
Just like with browsers and favicons, your iPhone looks for a special image in the root of the site to use as a webclip icon. If it can’t find anything, you get a screenshot. Making the icon is a snap. All you need to do is create a PNG image that is 57×57 pixels in size and save it as “apple-touch-icon.png” in the root of your website. Here’s what mine looks like:
Additionally you can specify any image as your icon in your CSS (like you do with the favicon). Here’s the syntax:
<link rel="apple-touch-icon" href="/whatever.jpg"/>
Place that in your website code between your <head> tags and you’re golden. That’s it!
Now… I really want to see your icons, so if you don’t mind, post a link in the comments to your webclip icon so we can all see.
Unwrapped a new Mac?
iBoughtAMac aims to deliver a well rounded collection of information for the Mac user. You've got questions, iBoughtAMac hopes to have the answers. If, after browsing the archives your question has not yet been answered, shoot us a friendly email at help@iboughtamac.com.Featured Sponsor
Pingback: iJohn » Blog Archive » iPhone/iPod Touch Webclip