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.
- Design
- Creation
- 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”.
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.
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.
Post a Comment