Top Nav Bar Categories

How to Add a Favicon to Your WordPress Blog

favicons A-Z
Creative Commons License photo credit: dan taylor

What is a Favicon and Why Should Your Blog Have One?

A favicon is short for “favorite icon.” It is the little image you see in your browser tab next to the name of the website you are viewing. All favicons are the same size: 16×16 pixels. The one for Life Learning Today blog is:

The reason why you want to have one is for branding purposes. People will get to know your favicon and can quickly switch to your site on one of their browser tabs simply by recognizing your favicon. They will also be able to quickly spot it in their list of bookmarks. So now that you see the value in doing this the next step is how to get a favicon image. It’s really easy and free. Here’s how:

How to Create Your own Favicon for Your WordPress Blog

The easiest way is to go to Favicon.cc. Here you can create your favicon in one of 4 ways:

  1. Create one from scratch using their design tool. You fill in each pixel separately with the colors you want. Very easy to use.
  2. Search for one that is already created by typing in search words for the types of images you want.
  3. Customize a favicon that you find through searching. Once you find one you can adjust the colors very easily.
  4. Upload an image and they will convert it to favicon size for you. You can customize that image too.

How to Install a Favicon for Your WordPress Blog

  1. Once you have your favicon image at Favicon.cc then click on “Download Favicon.”
  2. Upload the favicon image via FTP to your webhost. Use the “html” or “public_html” folder.
  3. In your WordPress dashboard click on “Editor” under “Appearance.”
  4. Locate the “header.php” file and edit by adding this code: (make sure your image is named “favicon.ico”)
  5. <linkrel="shortcut icon" href="favicon.ico" >
  6. Save your changes to “header.php.”
  7. Go to your site and do a hard refresh (Ctrl+F5 keys) to see your favicon in your browser tab.

Please Share

Did you like this article? Please see below to print, email, bookmark, or share socially! Thanks!

Subscribe

, , , ,

What do you think? Click any platform below to comment or read other comments.

Loading Facebook Comments ...

42 Responses to How to Add a Favicon to Your WordPress Blog

  1. Dan Nicolas April 16, 2010 at 5:29 am #

    Hi found your content to be very interesting appriciate the good work you doing… 🙂

  2. Thorn May 1, 2010 at 12:08 pm #

    I’m totally going to use this on my site. Put my little face on it as a favicon

  3. High-End Machines May 22, 2010 at 8:48 pm #

    very interesting. i think it can really make your site stand out from a crowd of tabs. just have to make a unique icon.

  4. NP Jara May 24, 2010 at 10:46 am #

    So that’s what those icons are actually called! This is the first time I’ve actually come across the word “Favicon”. Thanks for the clear explanation and step-by-step guide. Will try that with my blog.

  5. Used Vehicles September 9, 2010 at 4:53 am #

    This is what I was looking for. Can you explain the same for blogspot blogs.

    • AgentSully October 24, 2010 at 9:08 pm #

      Sorry, I don’t have info on favicons for blogspot blogs, but I’m sure if you did a simple search on Google, you’ll find just what you’re looking for!

  6. SenseiMattKlein September 18, 2010 at 7:48 am #

    This is great. Used it to put a favicon on my site. Thanks.

  7. Vic October 11, 2010 at 12:02 pm #

    Hi, I found your blog at the list of personal development blog in one blog I just visited. Favicons are very important in branding – as it can also represent our logo and personality. It’s easy to do using free online favicon generator.

    • AgentSully October 24, 2010 at 8:38 pm #

      Thanks Vic – glad to have you visit!

  8. Soohow November 7, 2010 at 11:45 am #

    Nice and easy to follow, great for my blog 🙂 Thank you

  9. Arnaud Powell November 12, 2010 at 3:35 am #

    Sounds like a nice way to add a personal touch on my wordpress blogs.I will surely do this to my wordpress blogs as soon as I can create a unique icon.Real helpful to me dude.

  10. Ada Harriotts November 14, 2010 at 6:20 pm #

    Yes thanks for the post. Its funny how quickly that we forget simple things to do with branding of our sites. I for one will put a favicon on my blog. I have changed my favourites and searching through the folder which is now alphabetical, I have a lot of problems that a favicon would ease

  11. sr22 insurance quotes December 6, 2010 at 1:37 pm #

    Thanks for the Favicon instructions because I didn’t know how to set that up. I’m going to bookmark this site because you have some great blogging tips here!

  12. Blazingtec December 7, 2010 at 12:42 pm #

    Thanks! Now I managed to get my favicon!

  13. Arbesdj February 22, 2011 at 12:57 pm #

    So many times i tried to do that things,thanks for your article,it’s make it easy right now…..

  14. eliathah March 29, 2011 at 10:33 am #

    awesome! i’ve been wondering how to do this for a while. who knew it was so simple…

  15. webpages April 19, 2011 at 4:25 am #

    Thanks for information i got a lot of idea how to optimize my blogs

  16. shareiteasy May 7, 2011 at 7:19 am #

    Favicon make your webite address attractive when you browse your site on the browser.It help you to branding your website.Also when you make bookmark or create shortcut of this site,there will display your favicon which make easy to distinguish your site from other.
    Thanks a lot for sharing this great idea here.

  17. Dialysis Technician August 14, 2011 at 9:04 pm #

    Thank You. Finally someone explained how to do this so even I could understand it. I’ve been building websites for about a year and finally I’m starting to earn some money and have been wanting to add a favicon to give my sites that “polished” professional look.

  18. ace November 4, 2011 at 2:39 pm #

    simple and easy way to add favicons.. thanks for the post!!

Trackbacks/Pingbacks

  1. What Is a Blog? « blogtalktip - October 4, 2011

    […] out how to add a Favicon to your site. A favicon the little image that appears in the tab of your browser along with the title of the […]

Loading Disqus Comments ...
  1. […] out how to add a Favicon to your site. A favicon the little image that appears in the tab of your browser along with the title of the […]

Powered by WordPress. Designed by WooThemes

UA-1513612-1