Creating Pinned Websites

Creating Pinned Websites

Creating a High Resolution Favicon

Favicons have come a long way since the inception of them , but times have changed. Before they were a 16 X16 ugly little icon that appeared next to the URL in the browser to give your website that little bit of extra flair and autheticity. Modern browsers now let you cram an entire 64 X64 icon in that same space. Thats 4096 pixels as opposed to the previous 256 in the exact same space, or 16 times the detail. Also look at all the great places that logo will be used. It is used in the tab, next to the URL, in your task bar once pinned, and in the corner next to the navigation buttons to add a little bit of branding to the experience. A little bit of work goes a long way to creating a more powerful presence for your website.

 

 

 

After playing around with a couple of ways to create the icon i found that the best way of doing it is to create a vector image. The main advantage that vector images have over their rastor counter parts is that instead of the image being generated by being a coordinate plane of colored pixels it is generated by the wonderful power of math! What that translates into is that you can resize the image and zoom in and out as much as you want without makeing the image blurry. The process is even becuase when working with rastor images it is alot like trying to paint a portrait with a paint brush. You have to manipulate the individual pixels of the image. In vector art you can draw a line. Click on it. Then bend the line to perfection like a piece of wire.  Some popular image processors are Xara, Corel, Microsoft Expression Design, and the ever popular Adobe Illustrator. My favorite is the oper source project Inkscape. This tool is quite capable, and has more then enough bells and whistles for this project.

Now just make sure that your icon’s dimensions are 64X64 pixels. Now making the logo is a topic for its own post, and there is plenty of documentation out there to get you on your way to getting your final product. Once you get the logo made its time to create the icon. The first thing you will want to do is save a copy of your logo as a PNG file. The reasons for doing this is that PNG files support transperancy, are high quality, and are lossless. Also becuase the tools we will use next don’t support SVG which is the native file format of vector graphics. Now my tool of choice has always been iConvert. All you do is upload your image, and it will convert it for you. It then will let you download your file. Now its important to download the .ico format which is the prefered favicon format.

The final step is to configure the pinning feature. First, upload the .ico file to your web server. Then open the part of your site that contains the header. In between the tag we are going to add a and a few tags to pass on all the information that IE9 will need to configure the pinning feature.

There are two different sets of metadata. Theres installaion and runtime. We define them together, but they are used at different times. The installation metadata is used when we drag the tab to the taskbar, while the runtime metadata is used when we click on the icon in the taskbar.

Installation

Parameter Description
application-name The name of your web application.
application-tooltip The text that appears when you hover your mouse over the icon in the taskbar.
application-starturl This sets the URL that should be used when the taskbar icon is clicked on.
application-window This defines he size of the window that should be opened up.

Run-time

Parameter Description
msapplication-navbutton-color This metadate sets the color of the navigation buttons.
msapplication-task Used to create tasks for your jump list(I will cover this later).
msapplication-task-separator This creates visual seperations between tasks.

At this point the source code in my header looks something like this.

 

<link rel="shortcut icon" type="image/ico" href="/favicon.ico" />
<meta name="application-name" content="Tech Daemon" />
<meta name="msapplication-starturl" content="http://techdaemon.me" />
<meta name="msapplication-navbutton-color" content="#000000" />
<meta name="msapplication-window" content="width=1024;height=768" />
<meta name="msapplication-tooltip" content="Discover on Tech Daemon" />

The link tag is where I define where the favicon is located. Now we are ready to move on to creating our jump lists, and make your icon more then just a shortcut.

Creating the Jumplist

Now one of the reasons pinned sites are nice to have is that you can add a custom jumplist that is customized for your application. This allows users to “jump” right into a part of your site. The most effective way of using the jumplist is to create tasks.

It is made in much the same way that we defined the icon. More meta data! Here is one entry in the jumplist.

<meta name=”msapplication-task” content=”name=Shopping; action-uri=./?page_id=89; icon-uri=shared-resources/icons/cart.ico” />

THe kind of meta data we want to define is a msapplication-task. This lets the browser know that we want to create an entry in the task list. The key part is the content parameter. There are several different items we can add to it that will define the task.

Parameter Description
name The title of the entry. This is what your users see
action-uri This is the link that will open up.
icon-uri This is the URL for the icon you want to use for the entry
window-type This can be tab, self, or window. Tab opens a new tab in the current window with the action-uri. Self just changes the current tab. Finally, window opens up an entirely new window to open the URL.

The entry i described above therefore is called Shopping takes you to the “page_id” 89 and has a little icon located at “shared-resources/icons/cart.ico”. You have to define a tag per entry that you want in your task list.

So thats it. Making a pinnable site is quite easy and lets you give more functionality for your most loyal users. In the future I will make another post explaining more advanced concepts with site pinning such as how to make dynamic lists and notification icons. Happy coding!

References

MSDN
Build My Pinned Site

Leave a Reply

Your email address will not be published. Required fields are marked *