loading
I currently have availability
logo

Hi, I'mKevin Shoffner

Pinned Sites for Windows 8

With Windows 8 and Internet Explorer 10 out and about, some of you may have started seeing sites that allow for icons to display on your user’s pinned sites tiles. As the programmer, or designer, it’s time for you to learn how to do this and make your site branded better. It’s quite simple actually, and if you have ever made a Favicon, you will think this is a breeze. You just need to add some code inside your normal
<header> tag and an image, so lets get started.

  1. Start by creating an icon that fits your brand. You will need it to be 144px x 144px PNG
    file, and I always use transparent backgrounds, but it’s not required.For my site as an example, I stick with mostly black/white colors, with a clear font, so I open up PhotoShop and make a 144px
    x 144px square without a background and drop in some graphics and/or text. Tile
  2. Save it as a PNG, and upload to your site
  3. Go to your site, whether it be a standard HTML page, WordPress, or whatever you prefer and locate your
    <header> tag and copy&paste the following before the close of your header…
    <meta name="application-name" content="Kevin Shoffner's Site" /> <meta
    name="msapplication-tooltip" content="WordPress Awesome Sauce" /> <meta name="msapplication-starturl" content="https://kevinshoffner.com" /> <meta
    name="msapplication-TileColor" content="#eeeeee"/>
    <meta name="msapplication-TileImage" content="https://kevinshoffner.com/images/slydawgg-tile.png"/> <meta name="msapplication-navbutton-color" content="#aaaaaa"
    />
  4. Save
  5. Make changes as needed – “but Kevin, I don’t know what these mean” because you thought I was finished… Here is a breakdown of each line:

<meta name="application-name" content="Kevin Shoffner's Site" /> • This is what Window’s 8 will place in the Pinned site if not changed while saving. Think of how when you Save a Favorite, it will display/save the entire Title of the website, unless you type something else
like “Kevin’s Bank”
<meta name="msapplication-tooltip" content="WordPress Awesome Sauce" />

• This is what users will see when they hover over the Pinned site
<meta name="msapplication-starturl" content="https://kevinshoffner.com" />
• You can make this a particular link within your site or your homepage. If you don’t put anything by default it will be the current page when being Pinned. But if your starturl was something like
“./awesome-sauce” then the Pinned site should be kevinshoffner.com/awesome-sauce <meta name="msapplication-TileColor" content="#eeeeee"/>
• This is pretty straight-forward. You guessed it – the background color of your your Pinned button. It can be any name or hex color.
<meta name="msapplication-TileImage" content="https://kevinshoffner.com/images/slydawgg-tile.png"/>
• This is the image I made earlier. Of course, you do not have to use an image at all and it will just use the words and background tile color from what you declared earlier.

1 comment
  • Windows 8 | September 10, 2013

    […] – See more at my site. […]

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: