A quick discussion here today. This cool new hack was brought up to me by a good friend of mine. I was extremely shocked at how easy it was to add a custom favicon to your Web site. Most times when people add any Web site to their “dashboard” on their iPhone, it uses a screen capture of the entire Web site. That doesn’t really look to good. So start surprising your visitors with a custom designed icon.

This is very easy to do. After reading Kitsune Noir’s update with their favicon, I had to do this for my readers pleasure. It looked like Kitsune Noir figured out how to do this when cameron i/o wanted to add a better icon for his mint statistics. But everyone figured out, these same settings can be used for your entire Web site.

So here is how to do it!

1. The iPhone favicon is 57PX by 57PX. Make any image you want for the favicon, and make sure you save it as a PNG, do not use the “save for web” settings in photoshop (or any other adobe application).

2. Upload the icon to your server

3. Add this code to your header:
<link rel="apple-touch-icon" href="iphone.png"/>

Obviously you can point your iPhone icon to any location on your Web site, and thats it! You are all set for your visitors to add your Web site to their iPhone dashboard and enjoy!

Want to know how it looks and have an iPhone? Well, Hell Yeah Dude now has a custom iPhone icon, just add us to the dashboard and see what its like!