Changing website favicon dynamically

Question

I have a web application that s branded according to the user that s currently logged in  I d like to change the favicon of the page to be the logo of the private label  but I m unable to find any code or any examples of how to do this  Has anybody successfully done this before   I m picturing having a dozen icons in a folder  and the reference to which favicon ico file to use is just generated dynamically along with the HTML page  Thoughts

User · Answer

I use this feature all the time when developing sites ... so I can see at-a-glance which tab has local, dev or prod running in it.

Now that Chrome supports SVG favicons it makes it a whole lot easier.

Tampermonkey Script

Have a gander at https://gist.github.com/elliz/bb7661d8ed1535c93d03afcd0609360f for a tampermonkey script that points to a demo site I chucked up at https://elliz.github.io/svg-favicon/

Basic code

Adapted this from another answer ... could be improved but good enough for my needs.

(function() {
    'use strict';

    // play with https://codepen.io/elliz/full/ygvgay for getting it right
    // viewBox is required but does not need to be 16x16
    const svg = `
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
      <circle cx="8" cy="8" r="7.2" fill="gold" stroke="#000" stroke-width="1" />
      <circle cx="8" cy="8" r="3.1" fill="#fff" stroke="#000" stroke-width="1" />
    </svg>
    `;

    var favicon_link_html = document.createElement('link');
    favicon_link_html.rel = 'icon';
    favicon_link_html.href = svgToDataUri(svg);
    favicon_link_html.type = 'image/svg+xml';

    try {
        let favicons = document.querySelectorAll('link[rel~="icon"]');
        favicons.forEach(function(favicon) {
            favicon.parentNode.removeChild(favicon);
        });

        const head = document.getElementsByTagName('head')[0];
        head.insertBefore( favicon_link_html, head.firstChild );
    }
    catch(e) { }

    // functions -------------------------------
    function escapeRegExp(str) {
        return str.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
    }

    function replaceAll(str, find, replace) {
        return str.replace(new RegExp(escapeRegExp(find), 'g'), replace);
    }

    function svgToDataUri(svg) {
        // these may not all be needed - used to be for uri-encoded svg in old browsers
        var encoded = svg.replace(/\s+/g, " ")
        encoded = replaceAll(encoded, "%", "%25");
        encoded = replaceAll(encoded, "> <", "><"); // normalise spaces elements
        encoded = replaceAll(encoded, "; }", ";}"); // normalise spaces css
        encoded = replaceAll(encoded, "<", "%3c");
        encoded = replaceAll(encoded, ">", "%3e");
        encoded = replaceAll(encoded, "\"", "'"); // normalise quotes ... possible issues with quotes in <text>
        encoded = replaceAll(encoded, "#", "%23"); // needed for ie and firefox
        encoded = replaceAll(encoded, "{", "%7b");
        encoded = replaceAll(encoded, "}", "%7d");
        encoded = replaceAll(encoded, "|", "%7c");
        encoded = replaceAll(encoded, "^", "%5e");
        encoded = replaceAll(encoded, "`", "%60");
        encoded = replaceAll(encoded, "@", "%40");
        var dataUri = 'data:image/svg+xml;charset=UTF-8,' + encoded.trim();
        return dataUri;
    }

})();

Just pop your own SVG (maybe cleaned with Jake Archibald's SVGOMG if you're using a tool) into the const at the top. Make sure it is square (using the viewBox attribute) and you're good to go.

User · Answer

Here   s some code that works in Firefox  Opera  and Chrome  unlike every other answer posted here   Here is a different demo of code that works in IE11 too  The following example might not work in Safari or Internet Explorer          Dynamically changing favicons with JavaScript    Works in all A-grade browsers except Safari and Internet Explorer    Demo  http   mathiasbynens be demo dynamic-favicons         HTML5     baby  http   mathiasbynens be notes document-head document head   document head    document getElementsByTagName  head   0    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      document head removeChild oldLink       document head appendChild link       You would then use it as follows   var btn   document getElementsByTagName  button   0   btn onclick   function      changeFavicon  http   www google com favicon ico         Fork away or view a demo

User · Answer

I would use Greg s approach and make a custom handler for favicon ico Here is a  simplified  handler that works   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           byte   imageData   imageToByteArray context Server MapPath   ear ico             context Response BinaryWrite imageData              public bool IsReusable               get   return true               public byte   imageToByteArray string imagePath                byte   imageByteArray          using  FileStream fs   new FileStream imagePath  FileMode Open  FileAccess Read                     imageByteArray   new byte fs Length           fs Read imageByteArray  0  imageByteArray Length                      return imageByteArray                  Then you can use that handler in the httpHandlers section of the web config in IIS6 or use the  Handler Mappings  feature in IIS7

User · Answer

According to WikiPedia  you can specify which favicon file to load using the link tag in the head section  with a parameter of rel  icon     For example     lt link rel  icon  type  image png  href   path image png  gt    I imagine if you wanted to write some dynamic content for that call  you would have access to cookies so you could retrieve your session information that way and present appropriate content   You may fall foul of file formats  IE reportedly only supports it s  ICO format  whilst most everyone else supports PNG and GIF images  and possibly caching issues  both on the browser and through proxies  This would be because of the original itention of favicon  specifically  for marking a bookmark with a site s mini-logo

User · Answer

I use favico js in my projects   It allows to change the favicon to a range of predefined shapes and also custom ones   Internally it uses canvas for rendering and base64 data URL for icon encoding   The library also has nice features  icon badges and animations  purportedly  you can even stream the webcam video into the icon

User · Answer

According to WikiPedia  you can specify which favicon file to load using the link tag in the head section  with a parameter of rel  icon     For example     lt link rel  icon  type  image png  href   path image png  gt    I imagine if you wanted to write some dynamic content for that call  you would have access to cookies so you could retrieve your session information that way and present appropriate content   You may fall foul of file formats  IE reportedly only supports it s  ICO format  whilst most everyone else supports PNG and GIF images  and possibly caching issues  both on the browser and through proxies  This would be because of the original itention of favicon  specifically  for marking a bookmark with a site s mini-logo

User · Answer

The favicon is declared in the head tag with something like    lt link rel  shortcut icon  type  image ico  href  favicon ico  gt    You should be able to just pass the name of the icon you want along in the view data and throw it into the head tag

User · Answer

Here s some code I use to add dynamic favicon support to Opera  Firefox and Chrome  I couldn t get IE or Safari working though  Basically Chrome allows dynamic favicons  but it only updates them when the page s location  or an iframe etc in it  changes as far as I can tell   var IE   navigator userAgent indexOf  MSIE    -1 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              even to about blank   it updates the favicon for some reason            It doesn t work on Safari at all though  -          if   IE       Disable the IE  click  sound             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                  document body appendChild   IFrame                 IFrame src    about blank          addLink  function iconURL  relValue            var link   document createElement  link           link type    image x-icon          link rel   relValue         link href   iconURL         this removeLinkIfExists relValue          this docHead appendChild link         removeLinkIfExists  function relValue            var links   this docHead getElementsByTagName  link            for  var i 0  i lt links length  i                  var link   links i              if  link type     image x-icon   amp  amp  link rel    relValue                    this docHead removeChild link                  return        Assuming only one match at most       docHead  document getElementsByTagName  head   0     To change favicons  just go favicon change  ICON URL   using the above    credits to http   softwareas com dynamic-favicons for the code I based this on

User · Answer

If you have the following HTML snippet    lt link id  favicon  rel  shortcut icon  type  image png  href  favicon png    gt    You can change the favicon using Javascript by changing the HREF element on this link  for instance  assuming you re using JQuery        favicon   attr  href   favicon2 png      You can also create a Canvas element and set the HREF as a ToDataURL   of the canvas  much like the Favicon Defender does

User · Answer

Why not  var link   document querySelector  quot link rel   icon   quot    if   link        link   document createElement  link        link rel    icon       document getElementsByTagName  head   0  appendChild link     link href    https   stackoverflow com favicon ico

User · Answer

According to WikiPedia  you can specify which favicon file to load using the link tag in the head section  with a parameter of rel  icon     For example     lt link rel  icon  type  image png  href   path image png  gt    I imagine if you wanted to write some dynamic content for that call  you would have access to cookies so you could retrieve your session information that way and present appropriate content   You may fall foul of file formats  IE reportedly only supports it s  ICO format  whilst most everyone else supports PNG and GIF images  and possibly caching issues  both on the browser and through proxies  This would be because of the original itention of favicon  specifically  for marking a bookmark with a site s mini-logo

User · Answer

I use favico js in my projects   It allows to change the favicon to a range of predefined shapes and also custom ones   Internally it uses canvas for rendering and base64 data URL for icon encoding   The library also has nice features  icon badges and animations  purportedly  you can even stream the webcam video into the icon

User · Answer

If you have the following HTML snippet    lt link id  favicon  rel  shortcut icon  type  image png  href  favicon png    gt    You can change the favicon using Javascript by changing the HREF element on this link  for instance  assuming you re using JQuery        favicon   attr  href   favicon2 png      You can also create a Canvas element and set the HREF as a ToDataURL   of the canvas  much like the Favicon Defender does

User · Answer

According to WikiPedia  you can specify which favicon file to load using the link tag in the head section  with a parameter of rel  icon     For example     lt link rel  icon  type  image png  href   path image png  gt    I imagine if you wanted to write some dynamic content for that call  you would have access to cookies so you could retrieve your session information that way and present appropriate content   You may fall foul of file formats  IE reportedly only supports it s  ICO format  whilst most everyone else supports PNG and GIF images  and possibly caching issues  both on the browser and through proxies  This would be because of the original itention of favicon  specifically  for marking a bookmark with a site s mini-logo

User · Answer

Here s some code I use to add dynamic favicon support to Opera  Firefox and Chrome  I couldn t get IE or Safari working though  Basically Chrome allows dynamic favicons  but it only updates them when the page s location  or an iframe etc in it  changes as far as I can tell   var IE   navigator userAgent indexOf  MSIE    -1 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              even to about blank   it updates the favicon for some reason            It doesn t work on Safari at all though  -          if   IE       Disable the IE  click  sound             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                  document body appendChild   IFrame                 IFrame src    about blank          addLink  function iconURL  relValue            var link   document createElement  link           link type    image x-icon          link rel   relValue         link href   iconURL         this removeLinkIfExists relValue          this docHead appendChild link         removeLinkIfExists  function relValue            var links   this docHead getElementsByTagName  link            for  var i 0  i lt links length  i                  var link   links i              if  link type     image x-icon   amp  amp  link rel    relValue                    this docHead removeChild link                  return        Assuming only one match at most       docHead  document getElementsByTagName  head   0     To change favicons  just go favicon change  ICON URL   using the above    credits to http   softwareas com dynamic-favicons for the code I based this on

User · Answer

I use this feature all the time when developing sites ... so I can see at-a-glance which tab has local, dev or prod running in it.

Now that Chrome supports SVG favicons it makes it a whole lot easier.

Tampermonkey Script

Have a gander at https://gist.github.com/elliz/bb7661d8ed1535c93d03afcd0609360f for a tampermonkey script that points to a demo site I chucked up at https://elliz.github.io/svg-favicon/

Basic code

Adapted this from another answer ... could be improved but good enough for my needs.

(function() {
    'use strict';

    // play with https://codepen.io/elliz/full/ygvgay for getting it right
    // viewBox is required but does not need to be 16x16
    const svg = `
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
      <circle cx="8" cy="8" r="7.2" fill="gold" stroke="#000" stroke-width="1" />
      <circle cx="8" cy="8" r="3.1" fill="#fff" stroke="#000" stroke-width="1" />
    </svg>
    `;

    var favicon_link_html = document.createElement('link');
    favicon_link_html.rel = 'icon';
    favicon_link_html.href = svgToDataUri(svg);
    favicon_link_html.type = 'image/svg+xml';

    try {
        let favicons = document.querySelectorAll('link[rel~="icon"]');
        favicons.forEach(function(favicon) {
            favicon.parentNode.removeChild(favicon);
        });

        const head = document.getElementsByTagName('head')[0];
        head.insertBefore( favicon_link_html, head.firstChild );
    }
    catch(e) { }

    // functions -------------------------------
    function escapeRegExp(str) {
        return str.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
    }

    function replaceAll(str, find, replace) {
        return str.replace(new RegExp(escapeRegExp(find), 'g'), replace);
    }

    function svgToDataUri(svg) {
        // these may not all be needed - used to be for uri-encoded svg in old browsers
        var encoded = svg.replace(/\s+/g, " ")
        encoded = replaceAll(encoded, "%", "%25");
        encoded = replaceAll(encoded, "> <", "><"); // normalise spaces elements
        encoded = replaceAll(encoded, "; }", ";}"); // normalise spaces css
        encoded = replaceAll(encoded, "<", "%3c");
        encoded = replaceAll(encoded, ">", "%3e");
        encoded = replaceAll(encoded, "\"", "'"); // normalise quotes ... possible issues with quotes in <text>
        encoded = replaceAll(encoded, "#", "%23"); // needed for ie and firefox
        encoded = replaceAll(encoded, "{", "%7b");
        encoded = replaceAll(encoded, "}", "%7d");
        encoded = replaceAll(encoded, "|", "%7c");
        encoded = replaceAll(encoded, "^", "%5e");
        encoded = replaceAll(encoded, "`", "%60");
        encoded = replaceAll(encoded, "@", "%40");
        var dataUri = 'data:image/svg+xml;charset=UTF-8,' + encoded.trim();
        return dataUri;
    }

})();

Just pop your own SVG (maybe cleaned with Jake Archibald's SVGOMG if you're using a tool) into the const at the top. Make sure it is square (using the viewBox attribute) and you're good to go.

User · Answer

The favicon is declared in the head tag with something like    lt link rel  shortcut icon  type  image ico  href  favicon ico  gt    You should be able to just pass the name of the icon you want along in the view data and throw it into the head tag

User · Answer

Or if you want an emoticon     var canvas   document createElement  canvas    canvas height   64  canvas width   64   var ctx   canvas getContext  2d    ctx font    64px serif   ctx fillText       0  64        link rel   icon     prop  href   canvas toDataURL       Props to https   koddsson com posts emoji-favicon

User · Answer

A more modern approach   const changeFavicon   link   gt      let  favicon   document querySelector  link rel  icon          If a  lt link rel  icon  gt  element already exists       change its href to the given link    if   favicon     null         favicon href   link      Otherwise  create a new element and append it to  lt head gt       else        favicon   document createElement  link        favicon rel    icon       favicon href   link     document head appendChild  favicon          You can then use it like this   changeFavicon  http   www stackoverflow com favicon ico

User · Answer

The favicon is declared in the head tag with something like    lt link rel  shortcut icon  type  image ico  href  favicon ico  gt    You should be able to just pass the name of the icon you want along in the view data and throw it into the head tag

User · Answer

There is a single line solution for those who use jQuery      link rel   icon     prop  href   https   www stackoverflow com favicon ico

User · Answer

The only way to make this work for IE is to set you web server to treat requests for   ico to call your server side scripting language  PHP   NET  etc    Also setup   ico to redirect to a single script and have this script deliver the correct favicon file   I m sure there is still going to be some interesting issues with cache if you want to be able to bounce back and forth in the same browser between different favicons

User · Answer

jQuery Version      link rel  shortcut icon     attr  href    favicon ico      or even better      link rel   icon     attr  href    favicon ico      Vanilla JS version   document querySelector  link rel  shortcut icon     href    favicon ico    document querySelector  link rel   icon     href    favicon ico

User · Answer

If you have the following HTML snippet    lt link id  favicon  rel  shortcut icon  type  image png  href  favicon png    gt    You can change the favicon using Javascript by changing the HREF element on this link  for instance  assuming you re using JQuery        favicon   attr  href   favicon2 png      You can also create a Canvas element and set the HREF as a ToDataURL   of the canvas  much like the Favicon Defender does

User · Answer

A more modern approach   const changeFavicon   link   gt      let  favicon   document querySelector  link rel  icon          If a  lt link rel  icon  gt  element already exists       change its href to the given link    if   favicon     null         favicon href   link      Otherwise  create a new element and append it to  lt head gt       else        favicon   document createElement  link        favicon rel    icon       favicon href   link     document head appendChild  favicon          You can then use it like this   changeFavicon  http   www stackoverflow com favicon ico

User · Answer

Why not  var link   document querySelector  quot link rel   icon   quot    if   link        link   document createElement  link        link rel    icon       document getElementsByTagName  head   0  appendChild link     link href    https   stackoverflow com favicon ico

User · Answer

Yes totally possible   Use a querystring after the favicon ico  and other files links - see answer link below   Simply make sure the server responds to the  someUserId  with the correct image file  that could be static routing rules  or dynamic server side code     e g     lt link rel  shortcut icon  href   favicon ico userId someUserId  gt    Then whatever server side language   framework you use should easily be able to find the file based on the userId and serve it up in response to that request     But to do favicons properly  its actually a really complex subject  please see the answer here https   stackoverflow com a 45301651 661584   A lot lot easier than working out all the details yourself    Enjoy

User · Answer

I would use Greg s approach and make a custom handler for favicon ico Here is a  simplified  handler that works   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           byte   imageData   imageToByteArray context Server MapPath   ear ico             context Response BinaryWrite imageData              public bool IsReusable               get   return true               public byte   imageToByteArray string imagePath                byte   imageByteArray          using  FileStream fs   new FileStream imagePath  FileMode Open  FileAccess Read                     imageByteArray   new byte fs Length           fs Read imageByteArray  0  imageByteArray Length                      return imageByteArray                  Then you can use that handler in the httpHandlers section of the web config in IIS6 or use the  Handler Mappings  feature in IIS7

User · Answer

Or if you want an emoticon     var canvas   document createElement  canvas    canvas height   64  canvas width   64   var ctx   canvas getContext  2d    ctx font    64px serif   ctx fillText       0  64        link rel   icon     prop  href   canvas toDataURL       Props to https   koddsson com posts emoji-favicon

User · Answer

If you have the following HTML snippet    lt link id  favicon  rel  shortcut icon  type  image png  href  favicon png    gt    You can change the favicon using Javascript by changing the HREF element on this link  for instance  assuming you re using JQuery        favicon   attr  href   favicon2 png      You can also create a Canvas element and set the HREF as a ToDataURL   of the canvas  much like the Favicon Defender does

User · Answer

Yes totally possible   Use a querystring after the favicon ico  and other files links - see answer link below   Simply make sure the server responds to the  someUserId  with the correct image file  that could be static routing rules  or dynamic server side code     e g     lt link rel  shortcut icon  href   favicon ico userId someUserId  gt    Then whatever server side language   framework you use should easily be able to find the file based on the userId and serve it up in response to that request     But to do favicons properly  its actually a really complex subject  please see the answer here https   stackoverflow com a 45301651 661584   A lot lot easier than working out all the details yourself    Enjoy

User · Answer

Why not  var link   document querySelector  quot link rel   icon   quot    if   link        link   document createElement  link        link rel    icon       document getElementsByTagName  head   0  appendChild link     link href    https   stackoverflow com favicon ico

User · Answer

There is a single line solution for those who use jQuery      link rel   icon     prop  href   https   www stackoverflow com favicon ico

User · Answer

Why not  var link   document querySelector  quot link rel   icon   quot    if   link        link   document createElement  link        link rel    icon       document getElementsByTagName  head   0  appendChild link     link href    https   stackoverflow com favicon ico

User · Answer

The favicon is declared in the head tag with something like    lt link rel  shortcut icon  type  image ico  href  favicon ico  gt    You should be able to just pass the name of the icon you want along in the view data and throw it into the head tag

User · Answer

jQuery Version      link rel  shortcut icon     attr  href    favicon ico      or even better      link rel   icon     attr  href    favicon ico      Vanilla JS version   document querySelector  link rel  shortcut icon     href    favicon ico    document querySelector  link rel   icon     href    favicon ico

User · Answer

Here   s some code that works in Firefox  Opera  and Chrome  unlike every other answer posted here   Here is a different demo of code that works in IE11 too  The following example might not work in Safari or Internet Explorer          Dynamically changing favicons with JavaScript    Works in all A-grade browsers except Safari and Internet Explorer    Demo  http   mathiasbynens be demo dynamic-favicons         HTML5     baby  http   mathiasbynens be notes document-head document head   document head    document getElementsByTagName  head   0    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      document head removeChild oldLink       document head appendChild link       You would then use it as follows   var btn   document getElementsByTagName  button   0   btn onclick   function      changeFavicon  http   www google com favicon ico         Fork away or view a demo

User · Answer

The only way to make this work for IE is to set you web server to treat requests for   ico to call your server side scripting language  PHP   NET  etc    Also setup   ico to redirect to a single script and have this script deliver the correct favicon file   I m sure there is still going to be some interesting issues with cache if you want to be able to bounce back and forth in the same browser between different favicons

[javascript] Changing website favicon dynamically

Tampermonkey Script

Basic code

Examples related to javascript

Examples related to html

Examples related to dom

Examples related to favicon