Close
Close

Favicons on Blogs

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.

Problogger.net runs on the Genesis Framework

Genesis Framework

The Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Check out the incredible features and the selection of designs. It's that simple - start using Genesis now!

Comments

  1. Mike Schnoor says:

    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. Andy Merrett says:

    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. Michele says:

    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. Tim Flight says:

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

  7. Mike Schnoor says:

    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. Julian says:

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

  9. damselfly says:

    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. John says:

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

  11. I have a post specifically written on this with some good links. Check out http://www.richardbyrom.com/index.php/weblog/entry/faviconico-404-error-when-analyzing-access-log-files/

  12. Cary says:

    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

  13. J Wynia says:

    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.

  14. Tiago Gaspar says:

    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

  15. DrDel says:

    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!

  16. HART says:

    I see your favicon.ico here on this permanent link http://www.problogger.net/archives/2005/09/17/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.

  17. Cashmore says:

    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.

  18. ChrisH says:

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

  19. Admin says:

    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/

  20. Happy New Year to Everyone!

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

Trackbacks

  1. [...] 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. [...]

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

  3. [...] 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. [...]

  4. [...] 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. [...]