« I submitted my WordPress blog to the DMOZ Open Directory Project today | Home | Stompernet’s SiteSeer gives you a thorough SEO analysis of your web site »
Add a favicon to your WordPress blog’s URL address bar
By braddock | May 17, 2008
How can something that seems so easy become such a chore?
I finally decided to put one of those little favicons on my blog’s URL. A favicon is that little picture you’ve seen next to the address bar on lots of web sites. It also shows up in your favorites when you bookmark that site. It’s not as easy as it seems.
First off, the image you use has to be in windows icon format. That’s an .ico file. It’s has to be tiny too, at 16 x 16 pixels. There’s a free plugin for Photoshop that will let you edit .ico files. I used IrfanView though, it handles .ico files out of the box.
I should mention there are also some favicon editing sites that let you upload an image and convert it directly into a favicon. You can even preview how yours will look in your browser. If you’re not the artistic type this is definitely the way to go.
Once you have an image that looks okay at such a small size you need to upload it to your site’s root directory. If you must you can put it in another folder. Just take note of that directory, because you’ll need the path to the file later.
WordPress doesn’t load address bar icons by default, so we need to set it up to do so. Go to your theme editor and bring up the header.php file. We need to place a link to our favicon near the call for the title at the top of the header.php. This is what my header looks like with the addition of the favicon link:
The arrow shows the line you need to add.
I have included the full path to my favicon.ico file. If you’ve saved your favicon somewhere other than your root directory specify the path here.
The works done, your favicon will now show up in Firefox or Internet Explorer…eventually. This is where I got frustrated and lost about an hour out of my life. My favicon wasn’t showing up immediately so I started troubleshooting a problem I didn’t have.
In Firefox you’ll have to empty your cache and refresh your browser with <ctrl> + R before you see your favicon. In Internet Explorer I had to empty temporary files, cookies, and history before I could see it.
I hope this saves someone else the pain and confusion this simple bit of Internet fluff caused me.
Related posts:
Topics: WordPress |
