MacMost Now 34: iPhone Web Site Icons

Gary Rosenzweig looks at how to make png icons for your Web site that work with the new iPhone homepage Web clippings bookmarks.

You can also watch this video at YouTube (but with ads).

Video Transcript: Hi this is Gary Rosenzweig for MacMost Now.  When Apple introduced the new iPhone software version 1.1.3 two weeks ago it added the ability for us to webclips.  What webclips are basically are bookmarks.  You can bookmark a webpage but instead of having it in your bookmarks list in the Safari browser you can stick it in the home page of your iPhone.  So it gives you the ability to turn those cool webapps into actual apps, or at least as close as you can get.  These webclipping bookmarks are a problem though.  They take the entire webpage and they shrink them down and make an icon.  You usually can't tell what it is.  Lets take a look.  Okay so here you see the home page of the iPhone.  At the bottom you've got three icons that are basically made from the webpages themselves.  You can barely tell what they are on your iphone screen.  So a better way to go ahead and do it is to actually have the webmaster create a PNG file.  Now you can see theres three icons here and the first and the third are from one of our sites from our MacMost site and our iPhone games, we've made PNG icons. They're a lot better looking and a lot easier to tell what it is you're going to find at the other end of that webclipping.  Alright, so here's how you make the icons if you're the webmaster of the site.  The first thing you need to do is create a PNG file.  Now you can create this from just about any graphics program you'd like, Photoshop, Fireworks, whatever.  It's a pretty standard format.  You want to create a 57 by 57 icon.  Now you don't want to worry about the curved edges or the nice little glare that's always on these iPhone icons.  The iPhone is going to put them on itself.  So what you want to do is create a 57 by 57 square clean icon.  Now once you have that you're going to name it apple dash touch dash icon dot png and you stick it on the root main directory of your website.  Now this is going to use that icon for anything that anybody bookmarks on your website.  If you want to make a specific icon for a specific page, you can see this code that you need to actually put into the header of your html page and then you can specify the specific icon file, for that specific page.  And that's it.  It's pretty easy.  Special thanks to harry for the initial tip.  If you've enjoyed watching these MacMost podcasts, do us a favor and subscribe via iTunes if you haven't already, and tell your friends to do the same.  You can also review us at the iTunes music store.  Believe it or not, even though MacMost has been on the air for almost a year, we've never been featured on the front page of the iTunes podcast section.  We'd love to see that happen.  So, if you could subscribe and review us, that may help.  Till next time this is Gary Rosenzweig with MacMost Now.

MacMost Now 34: iPhone Web Site Icons

Welcome to MacMost

Free Weekly Newsletter

MacMost Online Courses

Keyboard Shortcuts PDF

Connect with MacMost

MacMost Sections

Popular Tutorials

Information