Favicons for Your WordPress Site
From WordPress.org: A favicon (short for “favorites icon”) is an icon associated with a website or webpage that is intended to be used when you bookmark the page, browsers also use them, typically in the URL bar.
- Create a favorites icon and call it “favicon.ico.” (See Making Favicons below)
- Upload your new favicon.ico file into the root of your website*. Test to make sure it uploaded properly – http://www.yoursite.com/favicon.ico. If the image shows up, it’s set.
- Now we need to tell the browser to pull up the favicon. Access your theme’s header file (either by opening header.php in a text editor or by going to your WordPress Admin, then clicking Design -> Theme Editor -> Header (on right side list). Add this line just above </head>
- Save the Header file.
That’s it!
Note: If you don’t see your favicon right away, don’t worry. Browsers can hang on to the cache for a long time. Try refreshing the browser and barring that quit the browser and restart. If that still doesn’t work congratulate your browser on its tenacity, then shut your computer down and restart.
Making a Favicon:
I’ve found the easiest way is to take any picture and then convert it using this site: http://www.html-kit.com/favicon/. Just remember your image should be square and will be squished down to 16×16.
* The WordPress Codex recommends uploading it to your root level and the images folder of you theme. The reason being that having in your root will display the favicon in your subscribers’ feedreaders. But then the site pulls it from the theme’s image folder. Seems like extra work to me. I believe it’s better to put it only in the site root and then access it from there for all purposes. Saves you some work if you change themes as well.
You don’t need to add the link to the favicon in the header as long as you put it in the root.
scottelkin.com is just one example.
True, if you put the favicon in the website root, or the root of the page, you won’t need the link tag in the head of the HTML code. However, if you should choose to put the favicon anywhere else, you’ll need the link tag in the header with the correct path to the favicon for the browser to find it. But, Scott is right – for the easiest solution, put the favicon in the site root and leave it at that. That solution will work independent of any theme you use (assuming the theme doesn’t have any favicon associated with it).