Michael Gaigg: Über UI/UX Design

9Feb0

Add Shortcut Icon to your Webpage

Posted by Michael Gaigg

Ok, nothing earth shattering but hopefully still useful to somebody out there.

Creating Icons in the Correct Size and Format

A shortcut icon must be square in size and at least 16 x 16 pixels.
It's important to save it in .ico format. Either create a bitmap using any image editor and rename it, or use the free online tool http://www.convertico.com/.

Include it in your page

Include the following code block into your main template or master page. If you don't have that, well, then include it into every page...

<head>
	<link rel="SHORTCUT ICON" href="favicon.ico">
	<link rel="icon" href="/favicon.ico" type="image/vnd.microsoft.icon">
	<title>My Title</title>
</head>

Ah, yes, add it to the default.aspx of your Silverlight web project will do the magic as well.

Include it in your WordPress Blog

Update: Maria mentions that it is shockingly simple to include a favicon to your wordpress blog - http://wordpress.org/extend/plugins/shockingly-simple-favicon/

Show me your shortcut icon!

Send me your page with shortcut icon and if I like the icon I will bookmark it 😉