With iPhone v1.1.3 and the iPod touch January Software Upgrade come the ability to customize your home screen with bookmarks to your favorite sites. By default, the bookmark icon is a thumbnail of the website, but webmasters can specify a custom icon if they so desire.
Because tiny thumbnails are often indistinguishable and thus not very helpful, I whipped up some custom icons for popular sites that either lacked them (at the time) or had ones I weren’t quite satisfied with, as well as some generic app icons. All are designed to be as simple and recognizable as possible.
To use any of these icons, you’ll need Drew McLellan’s bookmarklet for setting custom bookmark icons, which I’ve reproduced here. Simply drag it to Safari’s Bookmarks Bar, and then sync it to your iPhone or iPod touch: Set touch icon
After you’ve done so, you can specify whichever icons you’d like directly from this web server: http://iphone.graphr.net/icons/
You can also grab a zip file of all 37 icons available so far. I will likely be adding more as I make them.
If there are any other popular sites for which you’d like a custom bookmark icon (either because it doesn’t have one or could use a better one), drop me a comment and I just might give it a shot.
22 Comments
Great work! They look fantastic. This is much needed (by me).
I just wanted to say this is a very fun blog to read, every couple posts follow their own style, it looks great.
Beautiful, thanks so much!
Very good work.
Do you think you could turn this into another of your beautiful webclip icons? http://preview.tinyurl.com/2rgxka
Here you go, Todd: backpack.png
(I’ve also made icons for the other 37signals apps: basecamp.png, highrise.png, campfire.png)
awesome Alex. Putting them on there now. Thanks a million!
you think you could make a myspace one, and a livejournal one?? :)!
For Andy: myspace.png, livejournal.png
Your page designs are awesome. Do you sell these? Do you give them away?
Nope, I don’t sell anything on this site. These icons are free for you to use however you wish :)
This makes my SpringBoard look soooo much cooler! Thanks! How about an eBay icon? :D
Also, can you do an icon for the Orkut website, please? That one’s for my girlfriend. :)
For Charlie: ebay.png, orkut.png
Thanks a bunch, Alex! You’re a gent! =o)
wow these are fantastic! so much better than all the default ones that are now popping up!
if you get the time, two generic blue-style ones that might be good for me and maybe others would be a £ sign (similar to the dollar one for us brits) and also an @ one for the stupid web based email thing i sometimes have to use for work!!!
thanks!!!!
david
Please explain how one replaces the icons from the webpage with the icons you have created. I have already bookmarked the “set touch icon” bookmarklet to my iphone. But now I’m lost….please explain. Thanks.
For David: finance2.png, email1.png, email2.png
Charlie: Go to the webpage you want to bookmark, then select the bookmarklet. A dialog box should pop up; type in the URL of the icon you want to use (for example: http://iphone.graphr.net/icons/im.png) and hit OK. Then hit the + toolbar button and select Add to Home Screen. It may take a few seconds for the custom icon to load, but when it does, just hit Add and you should be good to go.
Thanks - top man!! David.
this is awesome dude thanks a lot!
these have helped clean up my screen so much! 2 more that are on my dream list :) Blogger & Google Docs. just in case you are bored….
For cathi: blogger.png, gdocs.png