Adding a favicon to your blog/website is one way to express yourself. It tells people a little bit about your blog/website too. Professional blogs/websites will never leave it out. If you don’t know what a favicon is, it is a 16×16 pixels or 32×32 pixels image (icon) that is displaced in your browser’s address bar. Check the screenshot below:
I just added a favicon to my WordPress blog. Now it is your turn to add yours. If you don’t know how, the following steps could be useful:
- First you need to have your image ready in your PC (personal computer).
- Second visit FavIcon from Pics and follow its instructions there to create a favicon.ico image file.
- Third download favicon.ico image file to your PC and unzip the file.
- Next upload the unzipped favicon.ico image to public_html/wp-content/themes/your-theme-name/. Make sure you change your-theme-name to be your real theme name.
- Next login to your WordPress Admin Dashboard; click on Design/Theme Editor/Header (header.php).
- Then insert <link rel=”shortcut icon” href=”<?php bloginfo(’template_directory’); ?>/favicon.ico” /> in your header.php file; more specifically between <head></head>.
- Finally save your header.php file.
If you use Internet Explorer as your browser, then holding Ctrl and hit R at the same time to reload your blog/website. If you use Mozilla Firefox as your browser, then holding Ctrl and hit F5 at the same time to refresh your blog/website. You should be able to see a favicon which is next to your URL now. However, some people’s favicon may not be shown immediately.
Update: This is for full version WordPress blog only. If you have a WordPress.com blog, this will not apply to you since you don’t have access to all the files.
Related articles
How to Add a Favicon to Your New Blogger?
Create a Favicon With Free Favicon Generators Online
Stumble It!
14 responses so far ↓
anonyjw // May 24, 2008 at 10:11 pm |
Thanks for the posts!
Isn’t this tip for WordPress.org pages, though?
I’m a n00b to all this stuff… where and how can I edit my header.php file?
Thanks again…
Lanna // May 25, 2008 at 12:53 pm |
Yes, this is for WordPress.org blog only. For WordPress.com blog you don’t have access to all the files. When I talk about WordPress blog, it means WordPress.org blog. Sorry for the confusion.
Create a Favicon With Free Favicon Generators Online « My Internet Stuff // June 22, 2008 at 6:22 pm |
[...] Related articles How to Add a Favicon to Your New Blogger? How to Add a Favicon to Your WordPress Blog? [...]
Joe // August 28, 2008 at 10:46 am |
Your directions do not work.
Lanna // August 28, 2008 at 6:53 pm |
Hello Joe;
Thanks for visiting.
Like I said in the post. Sometimes the favicon doesn’t show up immediately for some people.
Wait a couple days later; and let me know it is working or not.
Avenuegirl // November 29, 2008 at 7:13 pm |
Outstanding information. Just what I was looking for. With so many free favicon generators online, everyone can get one so easily.
Favicons For All My Friends ;) | WurdMess // November 29, 2008 at 7:31 pm |
[...] blogs I just didn’t have a clue. Lucky for me, I was able to find this helpful post on My Internet Stuff providing instruction on how to get a favicon into your wordpress [...]
jared // March 4, 2009 at 8:06 pm |
hopefully it works later, nothing’s happened yet. i tried many guides today, with those instructions im just going to wait
srinivas // March 10, 2009 at 6:42 am |
It did not work at all.. i have tried many methods, but just that my ico file doesnt work.. evn on my localhost.. 2.7.1 is the version of wordpress i run
unit // April 4, 2009 at 3:23 pm |
hey every one. I tried the same steps and it didn’t work so i looked at the code. If you copied and pasted this code:
<link rel=”shortcut icon” href=”/favicon.ico” />
The quotation marks are incorrect. They should read like this:
<link rel=”shortcut icon” href=”/favicon.ico”/>
Once i corrected the quotations, the code worked fine. Hope that helps!
unit // April 4, 2009 at 3:31 pm |
sorry, disregard my above post…
The way i fixed the problem was by retyping all the quotation marks used in the “insert” code. If you copy and paste the code the way it is from the article above, it won’t work. When you put the code into your actual document just retype the quotation marks and it should work.
Lanna // April 4, 2009 at 6:06 pm |
@unit;
Thanks for pointing out the problem.
I know it works because all my other wordpress websites’ favicons have shown up.
Vikki // April 9, 2009 at 10:41 am |
Thanks for sharing this tip. I was able to add a favicon to my own site.
@unit, thanks for mentioning that. I encountered that problem but was able to fix it using your recommendation.
Adding favicon.ico to WordPress For Professional Appearance | Website In A Weekend // May 26, 2009 at 3:02 pm |
[...] A good “how to”. [...]