Adding a Favicon to your blog
Blog — By Matthew Tommasi on 19 April 2009 7:08 pm
A favicon (favourites icon) is a small, 16×16 image that is shown inside the browser’s location bar and bookmark menu when your site is called up. It is a good way to brand your site and increase its prominence in your visitor’s bookmark menu.
It is very easy to add a favicon to your self-hosted WordPress blog, I’ll show you how.
Creating a Favicon
Firstly find an image that you want to use.
Using the Favicon Generator upload the image, select 16×16, and click <Generate Favicon> button.
Once it has been generated click on the Download Your Favicon Here hyperlink. This will save to your computer as favicon.ico
Alternatively, if you have found a site with a cool favicon that you want to ‘borrow‘ then put its URL into here to download it.. once downloaded you will still need to convert it to ico format.
Installing a Favicon
Using your FTP client, upload favicon.ico into your current theme’s main folder (or if your theme has an images folder upload it there).
Upload another copy to your blog’s main directory, eg http://yourblog.com/blog/ so that it is visible in your subscriber’s feedreaders.
Now login to your blog and go to Appearance –> Editor
Click on Header
Search for the line that begin with, <link rel=”shortcut icon” and ends with /favicon.ico” />
Now either overwrite it with, (or if it doesn’t exist) add the following code below the <head> HTML tag,
<link rel=”shortcut icon” href=”<?php bloginfo(‘template_directory’); ?>/favicon.ico” />
Click <Update File> button
Empty your browser’s cache, then restart your browser.
Done! Your favicon will now appear in you browser address bar and tabs.
Tags: add, adding, favicon, guide, how, instructions, setup, wordpress
Tweet This
Share on Facebook
Digg This
Bookmark
Stumble
13 Comments
Thanks for the email.
I believe you are talking about the Site Identity Button present in the Firefox browser. This is to do with security and digital certificates.
You can get more info here http://support.mozilla.com/tr/kb/Site+Identity+...
This video also explains this http://www.mozilla.com/en-US/firefox/video/?vid...
Hope that helps.
————————————————–
To apply favicons and even to generate or apply our gravatar as favicon, there are plugins available, its just a matter of few searches.
I was wondering and I don’t know it yet what it is called for that rectangular part at the beginning of address bar itself. It is much larger than favicon and rectangular in shape like that of paypal site. Do you know what it is called and how to do that?
My recent post: http://icttrends.com/how-to-add-favicon-to-your...
Nice work. Great to hear. Thank for the comment.
________________________
Great article – works fine on my blog. thanks
Hey thanks! this worked a treat. I like the http://www.favicon.cc/ favicon generator too. Hey I've had the same problem with FF, sometimes it takes a while for it to see the new favicon. I hear the new v3.5 FF solves this issue.
Hi Jim
When I wrote this guide the browser I was (and still am) using is Firefox.
Double check you have followed the instructions exactly and then empty Firefox's cache, cookies, etc.
I have noticed that some users reporting that the favicon doesn't appear straight away when using Firefox.. which I am thinking that it could be a caching issue with your webserver?
Give it some time (maybe an hour) and it should appear.
Let me know how it goes.
I have just had a look at my site in Chrome and my favicon appears but it is static (not animated).
Matthew,
This worked super easily except it only shows up in Internet Explorer and not Chrome or Firefox. (I personally use Chrome.) I've Googled and tried a bunch of different suggestions to get it to work across all browsers, but it's not working yet. Any suggestions?
Thanks, Jim
Matthew,
Great instruction! Worked like a charm. Many thanks.
Jim
A couple of people have reported that their favicons are 0kb in size and don't show up immediately after following this guide.
The only thing I can think of would be there may be some caching happening on your webserver, as they do end up appearing on your site a couple hours later.
Matt I am getting the same thing I tried everything and cant get the favicon to show up
http://www.theportlander.com
Hi Jeremiah
Please double check you have done the following.
Upload a 16×16 image named favicon.ico into,
1. Your theme's main folder
2. Your blog's main directory
Copy my code above, and overwrite the existing code in the header.php file, then save it (see above screenshot)
(I have now updated my post to include) Empty your browser's cache..
Restart your browser
That is all that is needed. Your favicon should now appear.
Hi Matthew
I had a look on your site and it looks like your favicon is there.
Looks like you followed everything correctly
I followed your instruction step by step but it seems like it’s not working for me. Whenever i checked the browsers stats it says that my icon is 0px by 0px… I have uploaded the 16×16 ico in my ftp. I have checked the PHP codes from my index but it seems like it’s not working. Is there something wrong?? I have placed it under HTML tag, just like what you’ve indicated but it doesn’t seem to show up. Please help
Trackbacks