|
|
How to create a custom Apple iPhone icon for your Web siteOne of the features added to the latest revision of the Apple iPhone operating system that's garnered quite a bit of attention is the ability to save Web page bookmark icons directly on the main screen of the phone. Experimentation reveals that some sites have cool icons while most are just miniature representations of the Web site. What's the difference? Read on and find out, including step-by-step directions on how you can easily ensure your own site (or blog!) has a custom iPhone icon too. I've had a variety of different cellphones in the last few years as the technology underlying the cellular network has evolved from being about phone calls to offering up a wide variety of services, many of which have a small but growing price tag associated. A year ago I had just bought a Blackberry Pearl and was finding it a wonderful evolutionary step from the Motorola RAZR which, upon reflection, was all about the form factor and definitely not about the phone capabilities (especially with the crippled Verizon RAZR operating system). The Apple iPhone represents a significant step in the evolution of these phone systems, however, because, like the iPod itself, Apple continually tweaks and tunes the operating system with updates. I can recall at least five updates since the phone was released, updates that generally improved stability and functionality, but also added new features and even entirely new applications (in this case I'm thinking of access to the iTunes Store, which just *poof* appeared one day). The latest update to the phone, 1.1.3, added a very important new feature to the phone system, one that finally gives you the ability to truly customize and tweak the phone's base screen for your personal tastes and requirements: Home Screen Bookmarks. Let me show you how it works, then I'll explain how to make a custom icon for those bookmarks too. Here's AskDaveTaylor as shown in the iPhone Safari browser: ![]() Cute, eh? Everything in miniature, even my shrunken voodoo head. To bookmark this - or any other page - you simply tap on the "+" symbol along the bottom of the screen, which brings up: ![]() "Add Bookmark" adds it to your bookmark menu, but the interesting feature here is Add to Home Screen. Tap it and you'll now have a chance to fine-tune the name of the bookmark: ![]() In this instance, shorter is definitely better. Even here, by adding the " 2" to the default "Tech Support" it kinda messes up the display on the iPhone screen, showing "Tech...port 2" to fit. Instead, I'll actually skip the "2" so you can see the default home screen bookmark: ![]() It's kind of hard to see, but the icon itself is a tiny representation of the home page of the site, with the "Ask Dave" button supplying the red dot on the right side. Above and to the right you can see custom home page bookmark icons for Meebo.com and Twitter.com. How'd they do it and how can I have my own custom icon too? It's surprisingly easy. You need to create a PNG format graphic file that's 45x45 pixels in size, name it apple-touch-icon.png and drop it in the root directory of your Web site. Here's what I had my graphics guy create: ![]() You'll notice that it's just a regular rectangular graphic image with no rounded corners or other fancy stuff. I've added the gray edge so you can see how big it is too, that's not part of the graphic. Later you'll see that the iPhone itself automatically rounds off the corners and adds a slight glassy reflection on the top half of the icon to make it more three-dimensional. Anyway, adding that graphic is enough that when I again try to bookmark the AskDaveTaylor site with a home page bookmark on the iPhone, it's a much improved icon: ![]() Cool, eh? I'm now busy creating similar little icons for all of my sites so that iPhone users can enjoy shortcuts to all of my sites. If you can't add the icon graphic to the root directory of your Web site, or just want to keep things organized in subfolders, you can add a link command to specify a different filename or different location for the apple-touch-icon.png file: <link rel="apple-touch-icon" href="/Graphics/iphone-icon.png" />
That's all there is to it. Go forth, create your icon, and enjoy! Thanks to Dan Dickinson, Anil Dash and, of course, Apple for detailing exactly how to accomplish this nifty trick.
More Useful Articles and Reviews Articles:
✔ Review: Verticus for iPad
iOS gamers everywhere are familiar with the genre of infinite forward progress apps - Mega Jump, Canabalt, and a host of other run/jump/fly-until-you-die...
✔ Review: Clear Spot Voyager 4G wifi hotspotClear Voyager 4g HotspotI'm constantly on the go and with just about every site I visit available via secure SSL connection, I typically...
✔ Review: Dropcam HD wifi video cameraWhether you're security paranoid, want to keep an eye on the nanny, have a summer or winter home you'd like to peek in...
✔ Audiovox Car Connection ReviewI have the smartest house on the block with a wifi-enabled thermostat and garage door opener, along with a complex web of wireless...
✔ Review: Slingbox 500I should start with a candid admission: I'm not a huge television watcher. I catch soccer matches on Fox Soccer Channel, and watch...
Let's stay in touch!
Sign up for my weekly AskDaveTaylor Newsletter and you'll receive even more tech and gadget help
right to your inbox, along with exclusive news and industry updates. It's good stuff. I promise!
Categorized:
Articles and Reviews
,
HTML, JavaScript and Web Site Programming
,
iPhone and Cell Phone Help
(Article 7850,
Written by Dave Taylor)
Tagged: apple iphone, custom icons, iphone icons, ipod touch Previous: What's the Google AdSense "See More" link? Next: How can I have Google AdSense ads open in a new window? Reader Comments To Date: 66ryguy61 said, on January 25, 2008 3:08 PM:
Sweet man, This was a 5 minute fix and will really impress the users for our site! Thanks for the info. Bryan A. said, on January 27, 2008 1:39 PM:
Found another site that said 158 pixels squared and it worked brilliantly! HUGE difference and clean, clean edges on the PNG icon. Never would have known about it or played with it if it weren't for you, Dave. Thanks! Tim Hunter said, on February 8, 2008 10:11 AM:
I found this website that has a decent collection of icons for popular websites. The site uses the same steps as described above, but it assigns the icons provided on the site instead of the actual icon. This is good for the sites that don't have and icon. Some of the icons look better than the real icons. Andrew said, on February 19, 2008 4:24 PM:
i got my iphone xmas of 2007, a few mths ago but i dont seen to see where i can "add" a icon just a book mark? Dave Taylor said, on February 20, 2008 11:30 PM:
Andrew, sounds like you need to update your iPhone to the latest firmware. That's where this feature shows up! magnetogurl said, on March 1, 2008 3:49 PM:
is there a way for the end user to create a new icon and assign it on the iphone to a home screen link that doesn't have an iphone icon?? Erica said, on March 14, 2008 1:28 PM:
Thanks for the help, I added an icon for my OWA mail. Seems to be working great. If I wanted to remove it at any point how would I go about doing that? Humberto said, on April 20, 2008 1:50 PM:
i can't insntall my mp4 aplication cd in my computer i have window xp it says is no a valid win 32 aplication,thanks - can you helpme. John Scrip said, on May 10, 2008 12:39 AM:
Thanks, Dave! That's just the ticket! Francisco said, on May 11, 2008 8:19 PM:
How can I do this on a blog? I have a blogspot site, and i'd love to have this icon on my iPod touch!! Thanks xizizon said, on June 30, 2008 12:36 AM:
hi all, you can use 'IconEdit2' to create your own icon. it is easy to use and supports various file formats. more info: Nick Owens said, on July 20, 2008 3:26 PM:
Dave: You're absolutely a life-saver w/ this post! Great instructions! I wasn't able to get this to work w/o using the "link" method from the header. I've been meaning to place my favicon.png the same way as well so it was a welcome modification. Also, Bryan A was right that the size of 158 pixels makes for a MUCH crisper image when sized down on the iPhone. I experimented w/ the 45 pixels at first and can see them side-by-side now on my iPhone - much cleaner at 158. dot said, on August 7, 2008 9:43 AM:
Any hack to be able to do this if you don't have access to your root, like if your using Blogger? thanks! dot said, on August 7, 2008 10:10 AM:
nevermind, apparently i don't read too well :) Chris Lim said, on August 14, 2008 12:53 PM:
Does this work on the Firmware 2.0 and up? Charles Scott said, on August 19, 2008 4:29 PM:
I saw that article on making the images 158x158. I tried this and did not see a noticeable difference. Gareth said, on September 9, 2008 7:20 AM:
Dave, It looks like you've been taking digital photos of your iPhone screen. Try this out: - Hold the Home button Dave Taylor said, on September 9, 2008 8:02 AM:
Ayup. The new iPhone 2.x OS supports screen shots, which is a great blessing for my work. This article was written before that feature was added... Peter said, on September 25, 2008 8:27 PM:
Just a bit to add: You can make your PNG with a transparent background, then make the home screen icon, and then drag it down to the mesh strip on the bottom... the mesh will show thru the transparent background. rob g said, on October 24, 2008 4:14 PM:
i was just wondering is there a place or site where we can submit ideas for the aplications of the ihone, for instance a shopping list with all the goods from a storehas to offer with pictures as icons to check on and off, another to keep track of your vehicle,miles, & service, ossibly advise you about 1 week of due dates for maintance...know what i mean? thanks Josh Hall said, on December 6, 2008 10:12 PM:
Awesome! Thanks for the info! cute! Nick said, on September 23, 2009 6:43 AM:
Why you don't make screenshot's on the iPhone. It looks a lot better.. Just hold down the power butten and then the homescreen button. FLASH on the screen and the screenshot is saved in your photo's Matthew S. Hicks said, on September 24, 2009 2:20 PM:
Ok I'm not web savvy but I understand root folder... However I'm using iWeb and can't access my root file... But I don't understand how to can you offer a little more detail about doing this?? P Mitchell said, on October 28, 2009 6:41 PM:
Wow This is brilliant. Will come in very handy for my sites. Thanks Mark said, on November 8, 2009 9:45 PM:
Thanks, this was actually very easy to do! I just renamed this 50x50 PNG file I already had to "iphone-icon.png" as instructed, and uploaded it onto the root of website. Without having to do anything else, it just worked great. Thanks again! TIP: it seems like the icon size is pretty flexible and doesn't have to be strictly 45x45, 57x57 or whatever ;) Sam Chandler said, on December 11, 2009 4:37 AM:
Just did this for my site - looks soo much more professional! Many Thanks! evelt said, on December 24, 2009 2:01 PM:
Thank you for the info, Dave. Very useful. Do you know if a way to add a Web Page bookmark to your Home Screen without using the "Add to Home Screen" feature on the iPhone? ... I would like my customers to be able to click on a link on my web site to do the same thing (i.e. "Add this web site to Home Screen")? Many Thanks. Altaïr said, on January 1, 2010 12:28 PM:
wow! Thank you! thats awesome! Chris said, on January 9, 2010 10:37 AM:
Ok, i cant figure this out, im not very computer inclined, i know how to use for everything i need to, but have no clue what a root directory is! i made a picture that i want as the icon in paint but dont know what to do with it, where do i put it? also, am i doing this on the computer or on my ipod? D.Black said, on January 17, 2010 9:49 AM:
Can someone provide more detail on how to do this with blogger (step by step). I dont really understand the techno vocab that is being used. thanks Lane said, on January 19, 2010 10:27 PM:
I have a Google Premier Site. I would like to add a png file for iphone icons. I uploaded a png button but am having trouble getting my site to allow me to add information to the html? Any ideas? Ed said, on January 27, 2010 10:34 AM:
YOu know you can take snapshots of the screen in Iphone by pressing both buttons HOME and On top. Connor Crosby said, on February 16, 2010 10:50 AM:
Wow, cool! Thanks so much! Bill Thayer said, on March 9, 2010 6:14 AM:
Thank you Dave! This was clear, accurate, and useful: within fifteen minutes I much improved my site, making it easier for others to use. The world would be a wonderful place if we all shared what we know and what we love. Selena said, on March 10, 2010 10:56 PM:
On sites with no esignated iPhone icon file, it is possible to zoom and position a segment of the screen to be used as an icon. Ie, I have bookmark icons on my phone for all the people I pay bills to, like AT&T. The icons look like perfect litte app buttons, but all I do is center on a portion of the page instead of the whole homepage as in your example. However, for sites that DO have a designated iPhone icon file, I can't get my screenshot icon to override theirs-like googledocs - I would love to bookmark my various google docs with different icons so I can go directly to the right one without having long text labels. But google's default icon takes over. Leslie Saeta said, on March 31, 2010 12:19 PM:
I am trying to do this with iweb. I have the PNG file created but I can't figure out what to do next. Can you help? Don said, on April 7, 2010 3:24 AM:
<link rel=”apple-touch-icon” href=”/customIcon.png”/> Must be placed just before the </head> tag. If you place it at the beginning of the head it WON'T work! pantrygirl said, on May 6, 2010 1:21 PM:
Thanks. Ed said, on May 26, 2010 6:16 AM:
Hi Dave Great article. many thanks My interest is also in getting my site Dooster the task productivity manager - which is an online app - into the app store. I am seeing this as a major marketing advantage Any ideas on what the most basic change - if any - you have to make to qualify it as an "iphone app" and get it in the store? anyone? many thanks ed Nick said, on June 22, 2010 11:43 AM:
Hi Dave, Quick Question: Is there a ay to specify the default text- rather than the title of the page. I want to help my users out by not making them create a shorter title. Better control for me as well. Thanks Enon said, on July 6, 2010 10:19 AM:
for iPhone 4 (high resolution), Apple guidelines advise to use a 114x114 image. JT Orlando said, on July 19, 2010 8:00 AM:
I used a 129x129 image of my blog logo, based on something I read elsewhere, and it works perfectly. Very crisp and clear. Bob said, on July 21, 2010 1:13 PM:
I use Contribute to create my web pages and do not have the ability to add the png file to the root directory. I also do not know what you mean by adding a link command to specify a different filename or different location for the apple-touch-icon.png file. I notice sometimes you call the icon apple-touch-icon.png and sometimes iphone-icon.png. Does that matter? Michael said, on September 22, 2010 3:34 PM:
Thanks! Handy tip, and useful too. Took 2 mins to do. If that! Hadds said, on September 28, 2010 2:18 AM:
Hi Dave I love your style - it's very easy to read. But, what have I done wrong please? I've added an icon with the right name into the root directory but all I see is a replica of the last page of the website I visited, not the logo. So just to be clear. I open Filezilla, drag the apple-touch-icon.png file to the root directory and save. Anything else? BTW it's a Wordpress.org blog. Does that make a difference? Thanks. Shai said, on October 1, 2010 10:13 AM:
Question: I’m having some difficulty. We built our website using CMS called Joomla! Ronnie said, on November 1, 2010 10:45 AM:
Thank you for the tip. Do you happen to know if these little icons are spidered/looked for by Apple related search engines. Of perhaps is there someplace to submit these things to? Dale Pavey Pavey said, on January 20, 2011 10:35 AM:
Can someone help. I can add a webclip to my homescreen but when I delete it it comes back automatically. How do I get rid of them for good? Plea email me at dcpavey@msn.com Sparkles said, on February 9, 2011 1:16 AM:
Thankyou soo much for the great info. :) Shahzad said, on February 9, 2011 2:44 AM:
now the generator do not working and do not make code plz help Kathy said, on April 7, 2011 6:42 PM:
I put an app of my site on my phone I also put a link to your instructions on my site. I was just wondering how I could put something on my site as a downloadable App like I see on some of the other sites..If you could email me any information that would be great.. Thank You Eivind said, on June 20, 2011 11:22 AM:
Job well done! Luc said, on June 22, 2011 12:17 PM:
Hi Dave, can you help me how to create a custom icon for other smarthphones than Apple for my Web site. Thanks in advance Jared Bulford said, on August 19, 2011 6:27 PM:
Hi Dave, thanks for sharing such great info. Like professionals we think that this article is really worth reading for everyone who'd like to have a custom app icon. Sergio said, on September 6, 2011 1:20 AM:
Try my online iPhone/ipad generator at http://www.quirco.com/iPhoneIcon/ Hoesje said, on January 9, 2012 5:27 AM:
Thanks, got my Iphone Icon now avaible for my Website. Handy Information Jack said, on January 9, 2012 5:29 AM:
Thanks, got my Iphone Icon now avaible for my Website. - Hoesje Alex said, on January 16, 2012 7:23 PM:
Incredible! I didn't know it until today! Now I can put it on my Diseño Gráfico minimalista website. Love it! Thanks Bruno said, on January 31, 2012 12:34 PM:
My website is prestashop based. It’s also hosted on my own unix server. it’s a subfolder in my www. there is also index.tpl but it just as a HOOK Header i’ve dropped the icon.png (for ipod ipad and iphone4) either in e-piazza folder and in prestashop where header.tpl is. i’ve even used an universal link http://voltumna….png but still no success. any idea? Tom Pizzano said, on March 18, 2012 2:52 PM:
Thank you, sarvar said, on April 7, 2012 1:05 PM:
HELLO MY NAME IS ........ Kenan said, on July 15, 2012 1:13 AM:
Thank you so much for this valuable information emmm said, on August 15, 2012 9:30 PM:
Hi, is there a way to create a non-glossy icon to the home screen? Di Ana said, on October 12, 2012 7:14 AM:
Hi, how do I delete all those icons which I created by the Add To Home Screen option? I have iOS6 and tried to delete it in the iTunes on my laptop, but there's none of those saved links in the list of apps that I can delete. Though it's fair enough, the saved links are not apps, yet how can I delete them, please? takis said, on December 8, 2012 2:38 PM:
Thanks for this information.. was really helpful. I'm trying the same method for my website iPhone service Επισκευή iphone
I do have a comment, now that you mention it!Check This Out Too... |
Recent Entries
Look for Answers
Recommended
All Our Categories
Apple iPad Help
Articles and Reviews Auctions and Online Shopping Blogs and Blogging Building Web Site Traffic Business and Management Computer and Internet Basics d) None of the Above Facebook Help Google Gmail Help Google Plus Help HTML, JavaScript and Web Site Programming Industry News and Trade Shows iPhone and Cell Phone Help iPod, Sony PSP and MP3 Player Help Kindle Fire Help Mac OS X Help Pay Per Click (PPC) Advertising Pinterest Help Search Engine Optimization (SEO) Shell Script Programming Tech Support Video Help The Writing Business Twitter, LinkedIn and Social Network Help Unix and Linux Help Video Game Tips and Help Windows PC Help Find Me on Google+ ADT on G+ |
The size for the icons is 57 x 57, not 45 x 45. Says on the Apple article.