Is it possible change favicon on site when users change themes? [duplicate]

Question

I have two themes on my site: Red, and Blue. This works fine.

I must know if I can make something to change the favicon, when users change the theme.

I know this code is for implementing favicon:

<link rel="shortcut icon" href="favicon.ico" />
<link rel="icon" href="favicon.ico" />

What do I need to make this possible? Using jQuery?

---

I have this script which I use for changing themes:

$("#painel_faccao li a").click(function() { 
        $("link#faccao").attr("href",$(this).attr('rel'));      
        $.cookie("css",$(this).attr('rel'), {expires: 365, path: '/'});
     return false;
     
  });

How I can implement this here?

(This question has a more modern approach to this function)

Answer 1

There is an answer on here on Stack Overflow: Changing website favicon dynamically

I like this answer best:

If you have the following HTML snippet:

<link id="favicon" rel="shortcut icon" type="image/png" href="favicon.png" />

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");

Just use JQuery to check the stylesheet and change the favicon based on it.

Answer 2

Yeah, there is another way. Just do it

1. Remove <link rel="shortcut icon" ...>
2. Add the code below

$(window).load(function () {
    $('head').append('<link href="your_favicon_name.ico" rel="shortcut icon" type="image/x-icon" />');
  });