Customize your website’s tile in Windows 8 and Windows 8.1 Preview and your website’s icon in iOS.

New tiles and new icons. Yay! I just finished creating my new tiles and icons, and this is how they look when you pin kiewic.com to your start screen or home screen.

The 310×310 tile in Windows 8.1 Preview:

Windows Large Tile 310x310

The 310×150 tile in Windows 8.1 Preview:

Windows Wide Tile 310x150

The 150×150 tile in Windows 8.1 Preview:

Windows Medium Tile 150x150

The 70×70 tile in Windows 8.1 Preview:

Windows Small Tile 70x70

The tile in Windows 8:

Windows 8 Tile

The icons with gloss/reflection effect in iOS:

Apple Icon WithEffect

The icon without effect in iOS:

Apple Icon Without Effect

How do you create your own Windows tiles and iOS icons?

Well, create PNG images for each tile or icon size, and reference them in the “head” of your website using  “meta” tags for Windows and “link” tags for iOS.

In Windows 8.1 Preview there are four tile sizes: 310×310, 310×150, 150×150 and 70×70.

Use “meta” elements:

<head>
  <meta name="msapplication-square310x310logo" content="/msapplication-square310x310logo.png" />
  <meta name="msapplication-wide310x150logo" content="/msapplication-wide310x150logo.png" />
  <meta name="msapplication-square150x150logo" content="/msapplication-square150x150logo.png" />
  <meta name="msapplication-square70x70logo" content="/msapplication-square70x70logo.png" />

In Windows 8 there is only one tile size, use a “meta” element:

  <meta name="msapplication-TileImage" content="/msapplication-TileImage.png" />

And in iOS there are four icon resolutions: 57×57 for iPhone, 114×114 for iPhone with high resolution, 72×72 for iPad and 144×144 for iPad with high resolution.

Use “link” elements:

  <link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png" />
  <link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png" />
  <link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png" />
  <link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png" />

If you prefer to use your original icon without the shiny bubble effect, replace “apple-touch-icon” with “apple-touch-icon-precomposed”:

  <link rel="apple-touch-icon-precomposed" sizes="57x57" href="/apple-touch-icon-57x57.png" />
  <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114.png" />
  <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72.png" />
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144.png" />

To support old iOS versions, include a 57×57 icon like this:

  <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57.png" />
</head>

Now your website should look good in the start/home screen!!

About these ads

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s