Favicon Icons

Alright, it is time for the long promised favicon walk-through.  So here we go:

Step 1. Design an icon.  Open Photoshop and create a new document.  Favicons are super small – in the browser they only show up as 16px by 16px, but if someone copies your link to their desktop, the icon will probably show up as a 48×48 or 57×57.  For that reason, I suggest an end goal of 57px by 57px.  However, designing at a 57×57 document is pretty hard because everything will be super blocky and pixilated.  300 x 300 is easier to design, BUT THE IMPORTANT PART – select a transparent background and 72 dpi (screen-size dots per inch)!

Step 2.  Re-size your icon.  In Photoshop, go Image -> Image Size.  Change the width/height to 57 pixels by 57 pixels.

Step 3.  Save your icon.  There are two different file types you can use: .png and .ico  There are pluses and minuses to both though.  .png works with nearly all browsers (EXCEPT Internet Explorer).  .ico works with ALL browsers but Photoshop cannot save as a .ico without a plugin.  There are many free/donation plugins but you have to download and install them which will allow you to save as an .ico.  Here is a link to one: http://www.telegraphics.com.au/sw/

Step 4:  Upload the file to your server and add in the code.  This code needs to go into the <head> section of your page (NOT the <header>).  Remember the <head> section is for things that are not inside the actual browser window (which is the <body> section).  The code is:

<link rel=”icon” type=”image/(filetype which is ico or png)” href=”(the file location on your server)” />

So an example would be:

<link rel=”icon” type=”image/png” href=”images/myicon.png” />

You will have to include this code in all of your html pages, so if you have different folders that html pages are in you will have to adjust your href file location.

There you go, have fun.

Advertisements

Posted on 03/16/2012, in design, web. Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

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

%d bloggers like this: