A Web Design Community curated by Chris Coyier

Code Snippets Gallery

Code Snippets > HTML > Set iPhone Bookmark Icon Submit one!

Set iPhone Bookmark Icon

Place this in your <head> section, and set the href attribute to an image to a 57px x 57px PNG file.

<link rel="apple-touch-icon" href="iphone-icon.png"/>

To prevent the iPhone from adding it’s own gloss:

<link rel="apple-touch-icon-precomposed" href="icon" />

4 Responses

  1. Scott says:
    03/01/2010 at 5:12 pm

    Always wondered how to do that, thanks!

    Also good to note, the image automatically gets rounded corners and a bit of a beveled effect…

    Reply
  2. Tony says:
    03/08/2010 at 12:28 am

    If you have the WPTouch iPhone Theme plugin installed, will it do that for you, so long as you upload the image?

    Reply

Leave a Comment

Remember:
  • Be nice.
  • Wrap multiline code in <pre> and <code> tags and escape it first (turn <'s into &lt;'s).
  • You may use regular HTML stuff like <a href="">, <em>, and <strong>
* This website may or may not contain any actual CSS or Tricks.