How I Made My Favicon

I am going to write down the steps I took in creating and employing my new Favicon. That little scribbled icon in the URL field. This is a response to several people who have asked me how to do this in the last week. I Hope this helps them get themselves through the process.

The Graphics

  1. I needed a 16 X 16 pixel graphic. I didn’t bother using Photoshop. It needs a plugin from telegraphics in order to export the file type I need (.ico).
  2. To make things easy I used an online Favicon Editor.

Using the Favicon Editor I was able to create the favicon.ico image file I needed and save it to my Desktop.

The Code / Making It Work

  1. I uploaded my new favicon.ico from my Desktop to my sites Root directory. I used the FTP application in Coda to upload it.
  2. I placed the following line of code between the <head></head> tags in my html document: <link rel="shortcut icon" href="http://joshuavaage.com/favicon.ico" type="image/x-icon" />
  3. I visited my website and enjoyed seeing that it worked.

My favicon.ico is now properly referenced in my HTML and displays in the browser address bar.