Is it possible change favicon on site when users change themes?

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)

just change the href to different file – Kris Ivanov Feb 02 '11 at 14:39 — Kris Ivanov, Feb 02 '11 at 14:39

score 38 · Accepted Answer · edited May 23 '17 at 12:00

38

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.

edited May 23 '17 at 12:00

Community

1
1

answered Feb 02 '11 at 14:40

Todd Moses

10,969
10
47
65

2

In some cases you need remove first favicon $('#favicon").remove(); and then add $('').appendTo('head'); – user956584 Jul 15 '12 at 23:37
does this have any effect in ie? – Fresheyeball May 11 '13 at 22:43
The favicon changes in firebug html but did not reflect on browser. What is the issue ? – Nilesh Kumar Feb 11 '16 at 16:53

score 6 · Answer 2 · answered Jul 11 '13 at 04:59

6

Yeah, there is another way. Just do it

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

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

answered Jul 11 '13 at 04:59

user2571141

69
1
1

you answer is a little bit vage as you failed to explain what it does and why it is the best possible solution. cheers :) – Efe Omoregie Elijah Jul 06 '17 at 14:39

Is it possible change favicon on site when users change themes?

2 Answers2

Linked