The Graphic Design Shop is a full service provider of Website Design and Graphic Design. We would be happy to assist you with everything from web design and web development to Logo Design and Promotion. If you're in business, whether you need a website or a full corporate identity, The Graphic Design Shop can help you increase your company's visibility and improve its graphic image.

Create Your Own IPhone Icon

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.

  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • LinkedIn
  • StumbleUpon
  • Twitter
  • Reddit
This entry was posted in Blog, Tutorials. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

Post a Comment

Your email is never published nor shared.