O'Reilly

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.

Track.js Error Reporting

Upcoming Events

Recent Features

  • Create a CSS Flipping Animation

    CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...

  • I&#8217;m an Impostor

    This is the hardest thing I've ever had to write, much less admit to myself.  I've written resignation letters from jobs I've loved, I've ended relationships, I've failed at a host of tasks, and let myself down in my life.  All of those feelings were very...

Incredible Demos

  • Translate Content with the Google Translate API and JavaScript

    Note:  For this tutorial, I'm using version1 of the Google Translate API.  A newer REST-based version is available. In an ideal world, all websites would have a feature that allowed the user to translate a website into their native language (or even more ideally, translation would be...

  • Using Opacity to Show Focus with jQuery

    A few days back I debuted a sweet article that made use of MooTools JavaScript and opacity to show focus on a specified element. Here's how to accomplish that feat using jQuery. The jQuery JavaScript There you have it. Opacity is a very simple but effective...

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.

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

Recently on David Walsh Blog

  • Get Node.js Command Line Arguments with yargs

    Using command line arguments within Node.js apps is par for the course, especially when you're like me and you use JavaScript to code tasks (instead of bash scripts).  Node.js provides process.argv but that doesn't provide a key: value object like you'd expect: Bleh.  If you want to work with a...

  • OâReilly Velocity Conference â New York

    My favorite front-end conference has always been O'Reilly's Velocity Conference because the conference series has focused on one of the most undervalued parts of client side coding:  speed.  So often we're so excited that our JavaScript works that we forget that speed, efficiency, and performance are just as important. The next Velocity...

  • Free Download: Font Bundle Featuring 17 Incredible Typefaces

    The only thing we love more than a good font, is a good free font. So we’ve combed the Web for some of our favorite free fonts, and gathered them here in a single download. You’ll find a variety of useful typefaces, from highly geometric designs...

  • OâReilly Velocity Conference â Amsterdam

    My favorite front-end conference has always been O'Reilly's Velocity Conference because the conference series has focused on one of the most undervalued parts of client side coding:  speed.  So often we're so excited that our JavaScript works that we forget that speed, efficiency, and performance are just as important. The next Velocity...

  • CanIUse Command Line

    Every front-end developer should be well acquainted with CanIUse, the website that lets you view browser support for browser features.  When people criticize my blog posts for not detailing browser support for features within the post, I tell them to check CanIUse:  always up to date, unlike...