Posts Tagged ‘favicon’
Adding a favicon
Saturday, November 7th, 2009I have to say, adding a favicon to my site was one of the easiest things that I have done in this whole creating a website and blog process. Don’t know what a favicon is? Neither did I until I read about it in the book I used to help me create a website, The Complete Idiot’s Guide to Creating a Website . A favicon is a little picture or icon that sits to the left of the path name of the page that you are viewing in your web browser. One of the most famous favicons is Google’s “G”. For this site, it is the stylized “CL”. A favicon is a visual cue to your readers that they are at a specific site.
A favicon is either 16 pixels by 16 pixels (or 32×32). I chose to do a 16×16 pixel favicon. To create it, I opened the Windows Paint program (in the Start->All Programs->Accessories menu) and chose a font. I wanted something that looked handwritten but was easy to read. I think I ended up with Mistral, but it’s been a while so I’m not sure. I typed in my CL, I moved it to the top left corner, I resized the page so that it was just around the CL, I shrunk it down to 16×16, and then I saved it as a jpg file named favicon.jpg.
I then had to change it into a .ico file. To do this I used IrfanView, which I downloaded for free from their site at IrfanView.com. I opened up my favicon.jpg in IrfanView and saved it as a .ico file called favicon.ico. I moved that file to the home directory of my website and that’s it! Web browsers look for favicon.ico files in the home directories of websites and if they find them, they will automatically display them.
I did run into one problem: getting my favicon to display in my blog. My blog is a WordPress blog, so I did a search of the WordPress forums and found some instructions. Basically I had to update my header.php file by putting in (or in my case editting) the following line:
<link rel=”shortcut icon” href=”faviconpathname” />
Of course, I didn’t literally type in faviconpathname, I typed in the path and filename of my favicon.ico file. And that was it! As you can see, it works!