User Tools

Site Tools


mobile_home_screen_icons

Mobile "Home Screen" Icons

When users visit your website on an iPhone or iPad, they have the capability to save your site to their Home screen. As a part of your branding strategy, you may wish to provide custom Home screen icons for just such an occasion. For this, you will need a square-cropped icon saved in PNG format at four sizes:

57-by-57-pixels for iPhone

72-by-72-pixels for iPad, iPad Mini

114-by-114-pixels for Retina iPhone (4, 4S, 5 and so on)

144-by-144-pixels for iPad with Retina Display

When added to an iOS Home screen, your icon will look like this:

The OS will add the round corners and gloss automatically, so you don't need to worry about it when creating your icon. And if you don't like it, well then too bad because there's nothing you can do to prevent it. For my TTG icons above, the “white” areas are actually transparent, which is why they appear to be black in the iPhone screen capture.

Having made your icons, upload them to your server. The likeliest place to put them is into:

/phplugins/images/

Give the icons simple, identifiable names. For example, icon_57.png, icon_72.png, icon_114.png and icon_144.png.

The code we'll be added to the head of your document is this:

<link rel="apple-touch-icon" href="phplugins/images/icon_57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="phplugins/images/icon_72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="phplugins/images/icon_114.png" />
<link rel="apple-touch-icon" sizes="144x144" href="phplugins/images/icon_144.png" />

If you're already using the ttg_head_end function in your phplugins.php file, then just add this code via echo statement.

Otherwise, we can create a function in this way:

function ttg_head_end( $style, $path ) {
echo '
<link rel="apple-touch-icon" href="phplugins/images/icon_57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="phplugins/images/icon_72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="phplugins/images/icon_114.png" />
<link rel="apple-touch-icon" sizes="144x144" href="phplugins/images/icon_144.png" />
';
}

This will add the icons to all galleries and pages enabled for PHPlugins.

mobile_home_screen_icons.txt · Last modified: 2013/02/15 04:48 by admin