When bookmarking a site on your iOS device using the “Save to Home Screen” button, Safari will save an icon on your device which is simply based on a snapshot of the site homepage itself. However, you can add your own custom bookmark icons to be used instead. Plus it’s very easy to do. Here’s how:

1. Create 3 versions of your icon in 57×57, 72×72 and 114×114 pixel sizes.
2. Add your images to the root folder.
3. Add code to your site:

WordPress

Add this code into your header.php file in your theme folder, just above the closing </head> tag.

1
2
3

<link rel="apple-touch-icon-precomposed" href="<?php bloginfo('template_url'); ?>/apple-touch-icon.png" />
<link rel="apple-touch-icon-precomposed" href="<?php bloginfo('template_url'); ?>/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" href="<?php bloginfo('template_url'); ?>/apple-touch-icon-114x114.png" />

The above code allows for the icon to be left as it is, and not for the device to add the gloss highlight. However if you want the highlight added to the icon by the device, use this instead:

1
2
3

<link rel="apple-touch-icon" href="<?php bloginfo('template_url'); ?>/apple-touch-icon.png" />
<link rel="apple-touch-icon" href="<?php bloginfo('template_url'); ?>/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" href="<?php bloginfo('template_url'); ?>/apple-touch-icon-114x114.png" />

Static html

Add this code to the index.html file, just above the closing </head> tag.

1
2
3

<link rel="apple-touch-icon-precomposed" href="apple-touch-icon.png"/>
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-72x72.png"/>
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-114x114.png"/>

The above code allows for the icon to be left as it is, and not for the device to add the gloss highlight. However if you want the highlight added to the icon by the device, use this instead:

1
2
3

<link rel="apple-touch-icon" href="apple-touch-icon.png"/>
<link rel="apple-touch-icon" href="apple-touch-icon-72x72.png"/>
<link rel="apple-touch-icon" href="apple-touch-icon-114x114.png"/>

That's it.

from Wikipedia:

“Above the fold” is a graphic design concept that refers to the location of an important news story or a visually appealing photograph on the upper half of the front page of a newspaper, or in case of webpages, the part of a page that’s visible without scrolling.

I was asked by a client the other day to reduce the height of the header of his website, to bring more of the information “above the fold”. Now there is a term I hadn’t heard in quite some time.

“Above the fold” is an old newspaper term that dictates all the most important information needs to be on the top half of the paper. As most papers were folded back then, people would see everything they needed to in order to be enticed to buy the paper itself. This term may have had some validity before, when the choice of monitors and screen resolution were both quite small. But not any more. With the high quality of screen technology, and prices becoming a lot more affordable, most of us can afford to have at the very least a 17″ screen size.

Also, as designer Paddy Donnelly explains in his article “Life, Below 600px“, if the story you are telling is interesting enough, people will gladly scroll further down, without giving it a second thought. Plus, keep in mind that Apple themselves determined that scrolling was just second nature to all of us, that they removed the scroll bar altogether.

So when I was given this instruction, I must admit I wasn’t exactly sure what to do. If I was to alter any sizes to comply with the clients instructions, I would need to know his monitor’s screen size, and resolution, as I saw all the information on my 27″ iMac quite nicely.