How to: create a website bookmark icon for the iPhone

For those of you who follow me on twitter - you may have read that I recently became the owner of an Apple iPhone. I must admit that it was quite a hard decision, the lack of a camera above 3 megapixels being the main reason I didn’t really want to join the Apple masses. Nevertheless, I now have the device and must admit: I love it!

One of the first things I did with my new iPhone was to check out my site to see how it looks and feels, to be honest I think the theme could do with some tweaks to make it more mobile device friendly, but at the moment I am concentrating more on other projects so it is sitting on the back burner!

In the meantime, I added my site to the iPhone home screen to see what sort of icon came up for the bookmark - I thought it may take the favicon already in place and use that for the bookmark icon but it didn’t. So I did some searching online and found that it is ridiculously simple to add a custom bookmark icon for your own website for use with the iPhone and iPod Touch.

Here is how it’s done:

1. Create your custom icon.

Apple provide some official guidelines for creating a custom bookmark:

iPhone-bookmark-dimensions

iPhone-bookmark-square-corners

iPhone-bookmark-no-gloss

The optimal dimensions for an iPhone bookmark icon are 57 x 57 px - any image larger than this will be scaled to fit but ideally you want to work to 57x57.

Although all the iPhone icons have rounded corners and gloss, this is actually added by the iPhone itself - this function basically ensures all the icons all conform to the same general look.

Once you are happy with your new icon image - save it as: apple-touch-icon.png

2.Upload your custom icon

Once you have your saved image simply upload it to your websites root directory!

3.Check it out!

Visit your website from your iPhone or iPod Touch - click on the plus icon and add it to the homescreen:

iPhone-bookmark-homescreen

And that’s it!

Links: Apple Safari development reference library, iPhone development reference library

Filed under:

Rewilding the planet with freelance animation and motion design

We've only got one planet, and right now it needs all the help it can get. Climate change and biodiversity loss are massive challenges that we need to tackle head on.

That's why, for every freelance animation project over £1000 a donation of 1% of the total budget will be made to the World Land Trust, on your behalf.

The money will go towards WLT's "buy an acre" programme; buying up and protecting vital habitats around the world, and helping fight against climate change.

Any motion design projects under £1000 will have a tree planted on your behalf.

Acres saved so far:

Thanks to my wonderful clients and the animations we've produced, enough money has been donated to save around:

17.5 Acres of vital habitats around the world.

Just think, your animated explainer video or logo animation could also be helping fight the climate crisis!

If you're interested in some freelance animation work and saving the planet, get in touch and let's chat!