Create Your Own iPhone Icon

iPhone with custom iconNow that Apple is letting you play with your iPhone screen real estate, guess what web developers? When someone saves your home page to their iPhone, you can give them a nice little custom icon. It’s not unlike the favicons that show in browsers, except it’s several times bigger, and thus several times easier to design.

There are simple instructions on how to do this for your own website on Dan Dickinson’s blog. The one catch is your site has to be in the root folder. If it’s in a subdirectory (e.g. vanderbilt.edu/mydepartment/), it doesn’t work. If you do have access to the root folder, it boils down to creating a 57 x 57 pixel PNG image, naming it “apple-touch-icon.png” and saving it in said root. That’s it.

For Vanderbilt Med Center web developers, here’s an image I created that you can download and adapt for your VMC site. If you use the PSD file, it’s incredibly simple to change the background color so it matches your site.

[Thanks to colleague Chris for letting me know that this won’t work for non-root folders.]