Give me 31 Days and I’ll Give You a Better Blog… Guaranteed

Check out 31 Days to Build a Better Blog

Give me 31 Days and I’ll Give You a Better Blog

Check it out

A Practical Podcast… to Help You Build a Better Blog

The ProBlogger Podcast

A Practical Podcast…

FREE Problogging tips delivered to your inbox  

Favicons on Blogs

Posted By Darren Rowse 17th of September 2005 Blog Design, General 25

Today I had a nice surprise waiting for me in my inbox – an email from Tiago who had kindly taken it upon himself to design me a favicon for my blog in thanks for the advice I’d given him and others through this blog.

For those not familiar with favicons – they are the little tiny 16×16 pixel pictures that appear to the left of a site’s URL. They also appear in the tabs of firefox and in bookmarks on some browsers. – in my case Tiago had taken the ‘p’ from my logo and constructed one as follows.

Picture 2

He then pointed me to this favicon instruction site which told me how to add it to my blog – it took about 2 minutes.

I’ve been meaning to add a favicon here to ProBlogger for some time as it adds another element of branding to the site, increases useability for tabbed browser users and those who use bookmarks regularly to surf – but unfortunately it’s always slipped to the bottom of my ‘to do list’ – so a big thank you to Tiago.

About Darren Rowse
Darren Rowse is the founder and editor of ProBlogger Blog Tips and Digital Photography School. Learn more about him here and connect with him on Twitter, Facebook, Google+ and LinkedIn.
Comments
  1. The graphic must not be 16×16, but may include other formats like 32×32 or 64×64 and can be stored in the same *.ico file. In this case, it is easier for i.e. Windows to extract desktop icons … if someone would ever save a copy of the website on your desktop. :)

    There’s also a plugin for WordPress called “Favatar” which determines the Avatar-Image from the favicon from your URL.

  2. When I reed feeds at Bloglines I’ve noticed that some blogs have an icon (for example Jeremy Zawodny’s blog), does anybody know how to add yours?

  3. I think Mac bloggers overlook these icons because their support has not been as well established as in Windows.

    Safari does a decent job with them now, but as far as I remember IE never did on the Mac.

  4. I had this on my “to do list …” for a long time now – just never got around to doing it … Favicons are an additonal way of branding yourself and setting yourself apart just a little. I like yours the ProBlogger one.

    Mine will be up this week – thanks for the unintentional nudge Darren ;-)

  5. You don’t actually need to add any link references into your blog for the favicon to display. If you place the favicon in your site’s root it will automatically be picked up by the browser.

  6. It actually depends on the browser, Michele. Some browsers will automatically look for it while others do need to be told about it.

  7. I wonder why my MS IE does not look it up automatically and I forgot on how to forge the favicon to become displayed. However, thank goodness – Firefox always displays the icons if they are available on the server :)

  8. Hey, finally you got a favicon! It looks very nice in the firefox tabs… Thank you.

  9. The good folks who create HTML-Kit provide a great online favicon generator, which will take a jpg or gif and turn it into a favicon (with varying sizes stored in the .ico file). You can find it at http://www.chami.com/html-kit/services/favicon/, for those who don’t have icon creation software.

  10. […] Darren Rowse wrote an article this morning about getting a new favicon (someone had designed one for him). So I thought I would write this post about adding favicon to your WordPress theme, which I have been doing since I started designing them. It’s easy to do, here’s how. […]

  11. Looks great!! For anyone else who wants to follow your example, I have some info about how to make a favicon, & links to a couple of useful online tools, at Freshblog as part of my “upgrade your graphics” how-to. There are 2 versions of the code for the head of your template to maximise the number fo browsers that can see the icon….

  12. […] Create a favicon, as described on ProBlogger. It looks easy enough, but… well… I have plenty of problems with the easiest of things, so we’ll see. […]

  13. Thanks for the great hint, Darren…I didn’t even know those things had a name.

    I just put one on my site.

    Sure is difficult to design in a 16×16 pixel square though :0

  14. I added one to my site last week based on the cartoon portrait of myself I had done a while back. You can make a quick one just by making a .bmp file, resizing it and renaming it to favicon.ico. It’s been funny ever since I added it because my bookmarks for working with my blog and the tabs when open all have my face now which makes it easy to pick them out on the screen.

    Incidentally, I started with the much larger graphic and resized. Make sure if you’re using a GIF as your source to change it to RGB mode (if using Photoshop) or it won’t resize smoothly. I also applied some sharpening to make it more recognizable at the small size.

    Given how much we rely on these icons in places like the Windows taskbar for finding the open application we’re working on, it’s amazing that more sites don’t use these given the parallels in tabbed browsing.

  15. I’m glad you liked it Darren. Now use it, and abuse it!

    for #7

    Internet Explorer has some bugs concerning the favicon. It only shows up next to the address bar after adding the site as a favourite, and even then, it is not certain that it will work.

    for #10

    “(someone had designed one for him)” – that someone has a name, it is Tiago! :P

  16. the thing I have never liked about favicons is that they are never consistent

    a lot of the time a favicon will not display

    if you SHIFT REFRESH the site then the favicon will display

    I used to use them a lot on the websites I developed, but no longer.. too damn buggy… you would think something as simple as a favicon would be fixed by now!

  17. I see your favicon.ico here on this permanent link http://www.problogger.net/favicons-on-blogs/ but, I do not see it on the main site http://www.problogger.net ?

    I found the same thing happens with me too – just like DrDel mentions.. it’s a hit and miss and I don’t know why it doesn’t work for me everytime. I have it at 1800HART.com and PetLvr.com .. do you see then? — sometimes. btw .. I made them in 2003 at this site online..http://www.favicon.co.uk/ (could never get my .bmp’s and .gif’s to shrink down to size and be readable) . for the simple ones .. it would never look as good as the one Tiago created for you, but takes only 30 seconds or so to create.

  18. Fernando – I don’t know if your question has been answered yet, but I’ve found that if you create a Feedburner feed of your blog, and it already has a favicon in the root directory (as well as the tag), Feedburner will pick it up and display it on newsreader services like Bloglines.

    Feedburner also lets you add an image which will appear next to the title of your blog in newsreaders, which is pretty cool.

  19. Thanks for the tip, Damselfly. Got myself a much nice favicon now

  20. […] My Favorite Blog, ProBlogger has just turned one. Darren Rowse, the man with the P, has over 1400 posts in his self-proclaimed infancy. That is amazing. ProBlogger has more knowledge and tremendous information in one place, than any other that I have found. […]

  21. There are plenty of resources to learn to make brand progress.
    Often times the issue is that many small business owners are wearing too many hats;
    We would be honored if we could be added to this business blogger. We are from the World Business for sale is the leading independent businesses for sale listing service http://www.worldbusinessforsale.com/

  22. Happy New Year to Everyone!

  23. […] Creating a favicon is a pain. I somehow don’t like to work in that 16×16 area. It’s too small. More over they don’t serve much purpose however I was partially persuaded by friends to create one. After getting some more inspiration from Matt Cutts, it was time to find the easiest way out. After some research and reading stuff at ProBlogger, Photo Matt and Alex King, I decided to use the favicon generator at Dynamic Drive as it allowed me to create icon in multiple sizes. […]

  24. It is important to brand your site, and the best way is to get rid of that anonymous default favicon, applied by IE and the others. But try to go beyond the usual boring Letter of the Alphabet (somebody else is probably using yours, anyway). Do it up finer, and make it animated to give a thrill to Firefox and Netscape users. Details along with special head section code here at http://www.cathetel.com/favicon.htm . Show your design talents, otherwise you may leave your visitors yawning.

Comments are closed for this post.