FavIcons and 404 Errors

By  on  

As you probably already know, adding a favorite icon to your website is a great way to add subtle branding to your website. It's an easy, one-time update to your website that you never need to think about once it's done.

Lets say you don't care about the favicon or don't have a logo to use as a favicon. Since each browser looks for a "favicon.ico" file when no favicon is assigned, your server may throw off 404 errors on every site visit. What a bunch of wasted bandwidth and server strain!

The solution is to use a blank favicon file. It's tiny in size, prevents the useless 404 error, and decreases load on the server. Don't have a blank favicon file? I do. Click here to download it.

Recent Features

  • By
    Chris Coyier’s Favorite CodePen Demos

    David asked me if I'd be up for a guest post picking out some of my favorite Pens from CodePen. A daunting task! There are so many! I managed to pick a few though that have blown me away over the past few months. If you...

  • By
    CSS Animations Between Media Queries

    CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...

Incredible Demos

  • By
    Dijit’s TabContainer Layout:  Easy Tabbed Content

    One of Dojo's major advantages over other JavaScript toolkits is its Dijit library.  Dijit is a UI framework comprised of JavaScript widget classes, CSS files, and HTML templates.  One very useful layout class is the TabContainer.  TabContainer allows you to quickly create a tabbed content...

  • By
    Fade Images with MooTools LazyLoad

    I recently received an email from a MooTools developer asking a great question about my LazyLoad class: "I'm using your LazyLoad MooTools plugin (which is great, by the way). I have been trying to figure out how to modify it so that once an image scrolls into...

Discussion

  1. I think that’s interesting for development, if you want to remove the error form your logs but don’t want to make an icon at that moment. But I’d highly recommend to replace it with a real icon for the live version. favicons are really useful for bookmarks. Not only it help the visitor to find you site easily once he has associated it with the icon, but also, if it is catchy enough, it will get his attention in the middle of other bookmarks and he will be more likely to click your link when, you know, randomly browsing at work. Anyway your other article about favicon clearly says it, it’s not much work and definitely worth it. So my conclusion : if you bother adding a favicon, add a real one.

  2. Yeah, Olivier has a point regard the bookmarks. I’ve probably got a couple of hundred bookmarks in my browser (yeah, I should’ve sorted it and added many of them to Digg/Delicious), but the favicon helps be very much with navigating through my bookmarks. And just like you mentioned, favicons make your site stand out a little more when you navigate around a website.
    Overall I think you’ve come up with a good idea that I’ve never thought about, but I think it would be easier to just add a real favicon. A website’s logo works very well (most sites do have a logo anyways).

  3. I don’t think the 404 error message takes more bandwidth than the blank favicon file…

  4. @amos

    Im not sure about the size but for sure it will be faster with the blank favicon.

  5. @amos
    it is a 404 error page has: 289 B
    the transparent favicon hast: 22 B so should be 13 times faster !

  6. Good one, especially useful for sites that have custom 404’s like WordPress, which not only wastes bandwidth but processing power.

  7. Nice tip Adam surely a blank favicon would be beneficial specially after the Google Panda update.

    I was curious to know if the process of looking for a particular a page and on not finding it returns a 404 page will result in use of some other bandwidth and resources other that the weight of the 404 page which @alelo pointed out is 289B?

    @Adam you have a nice protfolio picture – I’m dying to habe one as well. Can you refer a service which does this?

    Keep up the good work.

    Cheers.

  8. This is an interesting point Adam, thanks for raising it. I often use word press for clients and even from an aesthetic point of view this is a good idea as it will remove the CMS favicon or browser icon and swap it for – well – nothing.

    Thanks for sharing you revalation with us. I’ll pop back and see you soon :)

  9. Lucas Rolff

    Not serving a favicon, first of all returns a 404, which will be logged (which is longer than a normal get request to the favicon) bytes saved in your log!

    Also, returning a 404 is ‘expensive’ for a webserver – let’s say you have 4 files that doesn’t exist, if you have 2 million visitors a day, that extra load you add to the server, is more than you think, a lot more handling on the server is going on, but also load time on the website actually will be higher, because returning a 404 usually takes more time, than serving the request itself.

  10. Seedan Furpot

    Broken download link

  11. Sahil Mepani

    @seedan you need to right click on link to download the favicon.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!