What is an iOS Home Screen Icon?
With the Apple iPhone, adding an icon to the Home Screen allows you to access websites quickly without having to open your browser. Instead of a generic Apple logo appearing, you can create your own Home Screen icon allowing your logo or brand to appear in place of the generic icon. Click here for more information on the iOS Home Screen Icon.
Here is an example of a before and after shot of an iOS Home Screen Icon.
The first button you see is just a simple screenshot of the CoffeeCup homepage, which when touched will take you to the website. However it is hard to see what the image is and is not very noticable.
If you look the the right of that icon you will see the iOS Home Screen Icon that is built into the website. This is a customizable logo that when someone saves a link to their homescreen they will see it instead of just a crummy screenshot. How cool is that?!?
iOS Home Screen Creators
- http://www.pic2icon.com/site_icon_for_iphone_ipad_generator.php/
- http://www.gieson.com/Library/projects/utilities/icon_slayer/#.Ue6Lx2T704E
- http://manytools.org/http-html-text/apple-touch-icon-generator/
- http://www.iconj.com/iphone_style_icon_generator.php
- http://www.pixelresort.com/blog/start-making-ios-7-icons-with-the-app-icon-template-3-0/
Adding One To Your Page
After you create your icon, adding it to your page requires you to add a small block of HTML to each page on your website:
<link rel="apple-touch-icon" href="ios/icon.png" />
<link rel="apple-touch-icon" sizes="72x72" href="ios/icon-72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="ios/icon@2x.png" />
<link rel="apple-touch-icon" sizes="144x144" href="ios/icon-72@2x.png" />
