How to Add a Favicon to Your WordPress Blog?

Update: This is for a 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.

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:
Favicon for Exploring The Internet
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).
  • 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 actual theme’s name.
  • Next login to your WordPress Admin dashboard; click on Appearance/Editor/Header (header.php).
  • Then insert the following code in your header.php file; more specifically between <head> and </head>.
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" />
  • 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.

Would you like to add a favicon to your WordPress blog? Why or why not? Please leave a comment below.

Related article
How to Add a Favicon to Your New Blogger?

Advertisements

55 responses to “How to Add a Favicon to Your WordPress Blog?

  1. 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…

  2. 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.

  3. Pingback: Create a Favicon With Free Favicon Generators Online « My Internet Stuff

  4. Your directions do not work.

  5. 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.

  6. Outstanding information. Just what I was looking for. With so many free favicon generators online, everyone can get one so easily.

  7. Pingback: Favicons For All My Friends ;) | WurdMess

  8. hopefully it works later, nothing’s happened yet. i tried many guides today, with those instructions im just going to wait

  9. 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

  10. 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!

  11. 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.

  12. @unit;
    Thanks for pointing out the problem.
    I know it works because all my other wordpress websites’ favicons have shown up. 🙂

  13. 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.

  14. Pingback: Adding favicon.ico to WordPress For Professional Appearance | Website In A Weekend

  15. Thanks your info, but in WP.com it is not work.
    Best regards.

  16. worked fine for me – many thanks!

  17. Pingback: The HS Favicon in the Address Bar | HyperSprite

  18. 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-blog-wordpress.html

  19. Im using xampp and it does not work (method to insert favicon)

    I’ll wait until I upload my file to my host and try again. But it should still work in xampp (myphpadmin)

  20. Thank you very much. I’ve added a favicon to my site using this method. I corrected the quotation marks by hand as Unit above pointed out. Before I did so, the code hadn’t worked.

    My current favicon doesn’t probably look nice enough, but God willing I’ll work on it some other time.

    Best regards from Canakkale, Turkey
    Ugur

  21. I really love this blog and the way its laid out, ty I have bookmarked.

  22. Thanks this helped!

  23. Oh my goodness! an incredible article dude. Thank you Nevertheless I am experiencing difficulty with ur rss . Don’t know why Unable to subscribe to it. Is there anybody getting an identical rss drawback? Anybody who is aware of kindly respond. Thnkx

  24. You should participate in a contest for probably the greatest blogs on the web. I’ll recommend this web site!

  25. Pingback: Cieltravel » Favicon pentru blog despre turism

  26. Really like the way you did this!
    This is my way http://www.mediadocks.co.uk/?p=374

  27. Hi guys,

    I created a plugin in wordpress for to add favicon to the site.Once visit my site http://www.wordpressstop.com and download the “add-favicon” plugin for free of cost.

    Prasad ASRK

  28. Alice in Wonderland

    just a quick question. Where can you find
    public_html/wp-content/themes/your-theme-name/
    and the header.php I’m new to all of this

  29. Pingback: How to Add a Favicon to a Static Website? | My Internet Stuff

  30. I did not understand this portion

    ■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 actual theme’s name.

    Where I can find this?

    • This step follows the last step. When you create a favicon online you need to download it to your PC. For me it is a zipped file, I needed to unzip it before uploading it to my theme.

      Some of the online favicon generators allow you to download a favicon without zipping it. In that case you don’t need to unzip it. Just upload it to your theme. Hope that helps.

  31. Nice tutorials….good one thanks..

  32. Thanks man…this was sweet

  33. It’s really a nice and useful piece of information. I am glad that you just shared this helpful information with us. Please stay us up to date like this. Thank you for sharing.

  34. To my surprise I got an email after so long time about this post. I guess somebody posted a comment here.

    Similarly it is a nice co-incident that the mail arrived when I’ve recently wrote a tutorial about the same topic. 🙂

  35. Looks like I’m gonna need to do some more research, but this was a good spring board.

  36. Howdy! This blog post couldn’t be written much better! Looking at this post reminds me of my previous roommate! He always kept talking about this. I am going to forward this information to him. Fairly certain he’ll have a very good read.
    Thanks for sharing!

  37. Cool article !

    Took me one day to find out. My favicon changed somehow by itself. I noticed sometimes when we install certain plugin, the favicon also changes. This time, thanks to you, I have my favicon in place.

    Thank you very much for sharing 🙂

  38. You really make it seem so easy with your presentation but I find this matter
    to be really something which I think I would
    never understand. It seems too complex and very broad for me.

    I’m looking forward for your next post, I’ll try to get the hang of it!

  39. Mine does not work and I think its because my directory is different: /public_html/wp/wp-content/themes/coraline/ notice the extra wp
    How do I fix this?

  40. Thanks to share to us a important posts , With the help of your post finally i set favicon in my theme . thanks again

  41. i use favicon.cc to create favicons.. its awesome online tool for favicons…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s