Top Menu

Add a Favicon to Your Blog

Worlwide InternetHave you noticed that some blogs sport a tiny icon next to their URL, in your browser tab and bookmark lists and wondered how you can do that for your blog?  That small image is called a ‘favicon’ and it is relatively simple to do once you get going on the right track.

Many blog themes allow uploads of GIF or PNG files to use as favicon however, it is important to note that while this is the simplest, shortest route to get results, these will not appear to your IE users.  Internet Explorer only recognizes .ICO files as favicons.  If you want IE to recognize your favicon, you will need to create a .ICO image file.

Image Selection

The first step of course, is to choose your image. It should be simple enough to be clearly discernible at 16 x 16 pixels (very small scale).  If you have a complicated logo for instance that won’t translate well, you might consider using one of your initials or a related symbol that represents your blog.

Creating Images

If you do not have an image in mind that will work and want to create one in Photoshop, a favicon plug-in is  that you can download from Telegraphics that will allow you to save your file as a .ICO file.  Once the plug-in is installed, and you have created your new icon, be sure to remember to “save as” “favicon” and select the Windows .ICO file format. Your new favicon is now created and you are ready to upload it to your server.

If you aren’t using Photoshop, you can use any graphic program to serve as a starting point and can use HTML-kit.com’s online favicon generator to convert that image to a .ico file.  If using this service, the easiest way to create your image is to create the image at 32 x 32 pixels.  This size will work on the site.

Now that you have your image, you simply need to upload it to your site or blog.

Server Upload

Favicons are not stored in your images folder with all of your other images.  You’ll want to be sure that you upload your new .ICO file into the your public_html folder (at the same level as your home page, the index.html file) as a loose file.

Favicons are special in one final way.  Some browsers look for links to the favicon.  If you want to ensure that all browsers read your favicon on every page of your site you will need to include a line of code in the html head section of your pages;

<link rel=”Shortcut Icon” href=”/favicon.ico”>

OR

<link rel=”icon” href=”/favicon.ico” type=”image/x-icon”> (some say this is more correct)

OR

both.

Refresh your page and VOILA!  you should see your happy favicon in your URL and browser tab.  You may need to refresh your page several times for it to show up.

Related Posts with Thumbnails

,

26 Responses to Add a Favicon to Your Blog

  1. Kimberly Wagner May 14, 2010 at 3:44 pm #

    Very cool. I didn’t realize that you could change this icon. I’m going to do this right now. Thanks.

  2. admin May 14, 2010 at 4:01 pm #

    Hi Kim,

    Glad to be of help. Let me know how it works for you.
    Thanks for stopping by.

  3. Connie May 14, 2010 at 7:42 pm #

    That is cool to know and just as soon as I get the blog basics finished, I’ll move onto the details.

  4. lvkline May 14, 2010 at 9:24 pm #

    Hey Connie,

    Yes, this isn’t on that “top priority” list but I think it does help with branding when you get your basic structure in place.

  5. Wendy Maynard May 16, 2010 at 3:35 pm #

    Hi Linnea,

    Thanks for this great tip and making it so easy to do. I’m off to add mine right now!
    .-= Wendy Maynard´s last blog ..How Leaving Blog Comments Can Accelerate Your Alexa Ranking =-.

  6. Linnea May 16, 2010 at 4:39 pm #

    Great, Wendy.
    I’ll be looking for it on your blog.
    Let me know how it works for you!
    Linnea

  7. Evelyn May 16, 2010 at 8:28 pm #

    See? How cool is it to have a custom favicon. I’ve not tried this yet, but you make it look so easy. Thanks 😉
    .-= Evelyn´s last blog ..The Ultimate Dream Project: A Personal Review =-.

  8. Linnea May 17, 2010 at 9:03 am #

    Hi Evelyn,
    Pretty cool, I agree. Couldn’t wait to share it.
    Let me know how it works for you.

  9. Ally May 17, 2010 at 1:31 pm #

    Hey Linnea. I will give this a go. These great tips make the difference between a good blog and a great one. Thankyou for the advice..

    Ally
    .-= Ally´s last blog ..Law of Attraction: finding and living your purpose =-.

  10. Linnea May 17, 2010 at 7:42 pm #

    Hi Ally,

    You are very welcome. Plan to give you much, much more.
    Do you have any favorite plugins?
    Linnea

  11. Chris Bernardo May 19, 2010 at 4:23 pm #

    Linnea,

    Glad that you shared this with us, I think i am going to come up with some Favicons for my site that are unique and have my style to it.
    .-= Chris Bernardo´s last blog ..20 Ways to Engage Your Fans and Get Responses =-.

  12. Linnea May 19, 2010 at 9:03 pm #

    Cool Chris,

    Can’t wait to see your favicons. Let me know how it goes for you.

    Linnea

  13. Emily | Marketing for WAHM May 20, 2010 at 4:46 pm #

    Thanks for the tip. It was something I have been wanting to learn to do.

  14. Linnea May 20, 2010 at 4:50 pm #

    Hi Emily,

    You are very welcome.
    Thought it might come in handy for a good number of folks.

    Enjoy!

  15. Chris Bernardo May 22, 2010 at 2:00 pm #

    Thanks for sharing this information, I am going to share this with my list as i find great value in it. Have an Awesome Day!
    Chris

  16. Linnea May 22, 2010 at 8:48 pm #

    Thanks, Chris.

    Glad to be of value. You have a great one too!

    Linnea

  17. Marty Ware May 27, 2010 at 9:38 pm #

    Thanks for the info, I will be doing this real soon!
    Marty Ware
    .-= Marty Ware´s last blog ..Make Money With Your Facebook Fan Page =-.

  18. Linnea May 28, 2010 at 2:10 am #

    Thanks for stopping by, Marty.
    Glad you found this post of use…let me know how it works out for you.

    ~ Linnea

  19. Jane June 2, 2010 at 11:22 am #

    Linnea

    Could not figure out what the favicon was for on my theme and tried to upload a picture and that did not work.

    Thank you for the information on how to add a Favicon on the blog. This is really helpful.
    .-= Jane´s last blog ..Have You Signed Up For the 30 Day Blog Challenge? =-.

  20. Linnea June 3, 2010 at 8:22 am #

    Hi Jane,

    Really glad you found my post to be helpful. Favicons just make your site look more polished and professional. I’m often surprised when I see a popular site still not using one when they really can be pretty simple to implement, given the knowledge. ~ Linnea

  21. Yorinda July 30, 2010 at 9:39 pm #

    Hi Linnea,

    interesting information.

    I just got a favicon plugin. I wonder whether what you said about the browser etc still applies. The favicon seems to work even though I used a link from my picture file.

    Thank you for the inforrmation.

    To your Success
    Yorinda
    Yorinda recently posted..Joy is the GoalMy Profile

  22. Linnea July 31, 2010 at 6:24 pm #

    Hey Yorinda,

    Good to know – about the plugin. You may just want to double check that your favicon is visible in IE as well as Firefox…otherwise it sounds as though you found a great simple solution. Thanks for sharing it.

  23. Nat August 11, 2010 at 8:11 pm #

    Hey Linnea

    Great post, I personally don’t like seeing sites without a favicon, and I certainly dont bother to bookmark them either, simply because they are to hard to distinguish from others. I actually created a video to show people how to create them for my blog.
    A favicon is a great Personal Branding tool and a great way to leave your Personal Branding breadcrumb across the internet!
    great post
    cheers
    Nat recently posted..I Found It – Wibiya’s Cool Cousin!! What Is It and How To Install It!My Profile

  24. Linnea August 12, 2010 at 8:43 am #

    Hi Nat,

    Great to see you! Glad to hear you’ve created a video on favicons to your blog. I’ll have to check it out. I do believe that favicons made sites appear so much more professional and they are so easy to add that it just doesn’t make sense not to add them. I think that a lot of people just aren’t aware of them or don’t know what they are. Thanks for helping to spread the word.

  25. Michael Berry August 14, 2010 at 3:33 pm #

    Thanks Linnea I have noticed these before but really did not understand it or know what it was. Now I know. It never ceases to amaze me of how much I learn from all of you.

    Thanks again,

    Michael

  26. Linnea August 17, 2010 at 8:55 pm #

    Hi Michael,

    Glad to be of help! There are so many opportunities to learn in this business that I think we can all be learning from each other for some time to come. Enjoy!

Leave a Reply

CommentLuv badge