CSS-Tricks*

A Web Design Community curated by Chris Coyier

A little dab'll do ya

Code Snippets

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" />

Subscribe to The Thread

  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

It's Your Turn

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
--- The Management ---