How to Add Your Site’s Logo as an iPhone Bookmark

Here’s a neat little trick to implement on your site.

When iPhone and iPad users bookmark your website through their mobile browser (which makes the link look just like an app), you can set a default image that gets used on their homescreen.

So if you want your site’s logo to show up as the bookmark, all you need to do is this…

• Create a 57px by 57px PNG image of your logo
• Upload it to your server
• Add the following code to the header of your site:
  <link rel=”apple-touch-icon” href=”URL OF YOUR IMAGE”/>

And that’s it!

If you’ve got an iOS device, do a quick test by visiting your site in Safari (or your mobile browser of choice), click the “send” icon in the center of the footer, and choose “Add to Home Screen.” (Instructions may be different if you’re using a different mobile browser.)

It’s a simple but great update for every site.