Take the 2-minute tour ×



share|improve this question
Note that Chrome's dynamic favicon implementation is buggy and uses too much CPU. See code.google.com/p/chromium/issues/detail?id=121333 –  brillout.com Apr 30 '12 at 17:59

10 Answers 10

up vote 101 down vote accepted

Why not?

(function() {
    var link = document.createElement('link');
    link.type = 'image/x-icon';
    link.rel = 'shortcut icon';
    link.href = 'http://www.stackoverflow.com/favicon.ico';

Firefox should be cool with it.

share|improve this answer
I'm thinking this is close to what I'm looking for, but how would I get the appropriate HREF from the database. I suppose I'll have to do a server lookup from javascript, but I don't want it to get too complicated. Thanks for the tip. –  SqlRyan Nov 4 '08 at 4:57
Sure, you can always look them up from a database or a filesystem. If there are only a few, you could simply hard code an array of strings. –  keparo Nov 4 '08 at 5:26
Since this doesn’t work in IE anyway, you can remove shortcut from the rel attribute. shortcut is an invalid IE-proprietary link relation! –  Mathias Bynens Jun 7 '10 at 12:45
You could just as easily look for an existing favicon link and update it or replace it. –  keparo Mar 31 '11 at 23:51
Should entering this in the Javascript console in Chrome work? I can't get it to change favicons on various sites that way. –  powerj1984 May 25 '13 at 1:46

There is an arcade game in a favicon.

share|improve this answer
However, be careful because that method isn't working on IE –  paulgreg May 12 '09 at 8:20
While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. –  giannis christofakis Sep 30 at 15:42

Here’s some code that works in Firefox, Opera, and Chrome (unlike every other answer posted here). Still fails in Safari and Internet Explorer though.

 * Dynamically changing favicons with JavaScript


function changeFavicon(src) {
 var link = document.createElement('link'),
     oldLink = document.getElementById('dynamic-favicon');
 link.id = 'dynamic-favicon';
 link.rel = 'shortcut icon';
 link.href = src;
 if (oldLink) {

You would then use it as follows:

btn.onclick = function() {

Fork away or view a demo.

share|improve this answer
The Chrome bug was fixed in Chrome 6 (released Sep 10), so the Chrome hack isn't really necessary anymore -- in fact, I'd strongly suggest not using it since it breaks the forward button. –  josh3736 Apr 29 '11 at 1:17
The Chrome bug might have been fixed, but it’s broken again in 14.0.835.187. –  danorton Oct 7 '11 at 21:05
The demo isn't working for me with Chrome 21/WinXP. –  Hugo Sep 8 '12 at 9:47
Demo isn't working for me in Chrome 26/Win7. document.head || document.head = document.getElementsByTagName('head')[0]; Uncaught ReferenceError: Invalid left-hand side in assignment –  Patrick May 7 '13 at 20:20
There was a typo in the code. There should be parentheses surrounding the assignment expression, like in the example gist. Fixed. –  Mathias Bynens May 8 '13 at 7:47

If you have the following HTML snippet:





share|improve this answer
I think you mean $('#favicon') instead of $('favicon'). –  Mathias Bynens Jun 7 '10 at 12:44
you're right. Fixed. –  fserb Jun 10 '10 at 9:05
this method is not working in Mozilla Firefox –  user1432124 Jul 13 '12 at 14:30
I'd think by the time the JS runs, the browser will already have seen the link and tried to load favicon.png. This might need to be done server-side. –  cHao Jul 13 '12 at 14:42


var favicon = {
    change: function(iconURL) {
        if (arguments.length == 2) {
            document.title = optionalDocTitle}
        this.addLink(iconURL, "icon")
        this.addLink(iconURL, "shortcut icon")

        // Google Chrome HACK - whenever an IFrame changes location 
            if (!window.__IFrame) {
                __IFrame = document.createElement('iframe')
                var s = __IFrame.style
                s.height = s.width = s.left = s.top = s.border = 0
                s.position = 'absolute'
                s.visibility = 'hidden'
            __IFrame.src = 'about:blank'}},

    addLink: function(iconURL, relValue) {
        var link = document.createElement("link")
        link.type = "image/x-icon"
        link.rel = relValue
        link.href = iconURL

    removeLinkIfExists: function(relValue) {
        var links = this.docHead.getElementsByTagName("link");
            var link = links[i]

    docHead: document.getElementsByTagName("head")[0]}



share|improve this answer
Chrome still has that same bug, albeit in slightly different circumstances than the specific bug noted. code.google.com/p/chromium/issues/detail?id=99549 –  danorton Oct 8 '11 at 0:41

The favicon is declared in the head tag with something like:



share|improve this answer
IIRC, however, some browsers (I'm looking in your direction, IE) don't really respect this sometimes. –  Matthew Schinckel Nov 4 '08 at 4:22
(I found I had better results just having the icon file in the right location, rather than the explicit link). –  Matthew Schinckel Nov 4 '08 at 4:23


share|improve this answer

How about:

$("link[rel='shortcut icon'").attr("href","favicon.ico");

or even better:

share|improve this answer
Short and works! Best! –  Prosto Trader Jul 15 at 13:09
Not working on Firefox 31. –  pkExec Aug 21 at 7:59


For example:




share|improve this answer


using System;
using System.IO;
using System.Web;

namespace FaviconOverrider
    public class IcoHandler : IHttpHandler
    public void ProcessRequest(HttpContext context)
        context.Response.ContentType = "image/x-icon";

    public bool IsReusable
        get { return true; }

    public byte[] imageToByteArray(string imagePath)
        byte[] imageByteArray;
        imageByteArray = new byte[fs.Length];
        fs.Read(imageByteArray, 0, imageByteArray.Length);

        return imageByteArray;


share|improve this answer

Your Answer


