Create a Blank Favicon with Data

By  on  

I was recently setting up a virtual host and diving into development when I needed to debug a JavaScript issue.  One thing that started annoying me right away was the console message notifying me that the favicon.ico file couldn't be found.  I hadn't put one there and had no desire to...but that damn message was bugging the hell out of me.  I did a quick search and found a tiny data URL snippet to include a blank favicon within the page.

The HTML

The empty favicon is created with the LINK element:

<link href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABmJLR0T///////8JWPfcAAAACXBIWXMAAABIAAAASABGyWs+AAAAF0lEQVRIx2NgGAWjYBSMglEwCkbBSAcACBAAAeaR9cIAAAAASUVORK5CYII=" rel="icon" type="image/x-icon" />

Essentially, instead of linking the external ico file, the image data is placed in the HREF attribute.  Cool, huh?  No more annoying messages and no need to add another file to the repository.

Recent Features

  • By
    LightFace:  Facebook Lightbox for MooTools

    One of the web components I've always loved has been Facebook's modal dialog.  This "lightbox" isn't like others:  no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much."  With Facebook's dialog in mind, I've created LightFace:  a Facebook lightbox...

  • By
    Responsive Images: The Ultimate Guide

    Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...

Incredible Demos

  • By
    Highlighter: A MooTools Search &#038; Highlight Plugin

    Searching within the page is a major browser functionality, but what if we could code a search box in JavaScript that would do the same thing? I set out to do that using MooTools and ended up with a pretty decent solution. The MooTools JavaScript Class The...

  • By
    Create a Photo Stack Effect with Pure CSS Animations or MooTools

    My favorite technological piece of Google Plus is its image upload and display handling.  You can drag the images from your OS right into a browser's DIV element, the images upload right before your eyes, and the albums page displays a sexy photo deck animation...

Discussion

  1. Michael Tully

    The exact same thing annoyed me in the exact same environment, thanks for the heads up Dave :)

  2. Hi david,
    Favicon is the thing which people generally forgot to add in site and they got very massive 404 error for that, which is not shown to user but affect the site loading time, Thanks for easy and quick solution…

    Avinash

  3. It’s also probably worth noting this could be used for making dynamic icons without saving data to your host. Like a pretty graphic that displays the user’s name? Just throw the href attribute into the src attribute of a image tag.

    IE6 is the only browser I have found this not to work on.

  4. Thats pretty cool, i’ve seen the base64 images like that before, does anyone know the full browser compatibility for using that?

  5. This is the best solution, no more calls to /favicon.icon!

  6. The W3C Validator uses this technique, too, to show if the site is valid or not in the URL bar.

    http://validator.w3.org/check?uri=http%3A%2F%2Fjanbuschtoens.de%2F

  7. Did you use any converter to turn your favicon into a long base64 string?
    Thanks!

  8. I’m pretty sure Data URIs don’t work in IE7.

    http://stackoverflow.com/questions/1765342/which-browsers-support-data-uris-and-since-which-version

    However, now that IE9 is out, SCREW IE7!

    And IE6 has been dead to me for nigh on 3 years. Except where I’m currently working. : (

  9. Thanks a lot :), have a nice day sir!

  10. I’d really like to hear more about that… is it possible to change the favicon using JavaScript while the page is loaded? That would be neat for WebApplications stuck in an unopened tab to notify the user that something has happened, for instance with aninstant messenging thingy.

  11. Peter

    Surely that should be “debugging the hell out of me”?

    Sorry… couldn’t resist!

    :-)

  12. JR

    Beware of Internet Explorer!!!

    As someone have said, this doesn’t work in IE6 or 7. In IE8 and above works.

    Nevertheless there are solutions to integrate images this way with MHTML
    http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/

  13. Interesting article! Do you know about setting base64 favicons globally with .htaccess? My website is configured to include the favicon regardless of what file you’re viewing, including images, CSS, and JavaScript files.

  14. thanks a lot dude. i manage to change my favicon with this tutorial.

  15. Valtteri

    With GIF it’s even smaller: data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw

    (IE ≥ 11)

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