close
The Graphic Design Shop The Graphic Design Shop
Search
Create Your Own IPhone Icon
Jan 15th, 2010 @ 01:32 pm › michaelkrapf
↓ Leave a comment

Wouldn’t it be cool to have your very own custom IPhone icon? Well you can with this quick and easy tutorial.

I’m going to break this down into 3 steps.

  1. Design
  2. Creation
  3. Code

Design

The first consideration is the design. Since the IPhone icons are only 57px X 57px, you want your design to be simple and to the point. For instance, it wouldn’t make sense to use the entire GDS logo, so instead I used just the “G”.

Google Reader

Creation

Next we need to create the design. Start the design with a large image then you can reduce the scale when you are happy. Make sure your final image is a 57X57 png file.

An important note! It isn’t necessary to include the rounded corners in your design. The IPhone will take care of that step for you automatically.

Google Reader

Code

After you upload the newly created png file, enter this code in the head section of your website.

Use this bit of code for a glossy version of your icon:

1
2
3

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

Use this bit of code for a non-glossy version of your icon:

1
2
3

<head>
<link rel="apple-touch-icon-precomposed" href="gds_iphone.png" /> 
</head>

Not as bad as you thought i’m sure. As always, questions, comments and concerns are welcomed.

Categories: Blog, Tutorials

Leave A Comment