Just curious - I’ve already uploaded my main brand’s favicon to the webflow settings area and that works just fine.
But I was wondering…I’ve got a second, separate brand I’m creating pages for, and I’d like to use a different favicon for those specific pages. Is it possible to do this? And if so, how might one accomplish that?
Thanks! 
Anyone, anyone?? Is there a way to do this? Thanks!
Hi @KPMT
That’s a good question - I would imagine adding header code in the page settings could achieve this, but would need to ensure it overwrites the default Webflow favicon on each page.
I came across this link in a google search:
https://forums.adobe.com/thread/2288314
One of the posts mentions trying this code:
<link href="myfavicon.ico" rel="icon">
But I guess I’m not entirely sure how this would work with Webflow’s structure? Would it be as simple as copying and pasting that code into the header (as you mentioned), and then uploading a new .ico file with my desired new favicon, and then just change out the name of the .ico file in the header code?
Thanks!
I just tried adding that code to another page in a project here: http://diffrent-favicons.webflow.io/ and it don’t work sadly.
Edit: This is what I did. Uploaded a new 16 by 16 png img to the designer and linked to that image in the code but still not working.
<link rel="icon"
type="image/png"
href="https://uploads-ssl.webflow.com/5b03c6a9f551b277ed058b89/5b03c74eca0d64657c8095d9_favicon.png">
Nope, sorry should be more clear it’s not working. Looking at the published code looks like it should though.
@Brando - Is there anything built-in Webflow-side that would prevent this working?
@jorn - is it the same result whether or not you set a custom favicon in the settings?
@StuM, @jorn, @Brando - thanks, all, for looking into this! Will be eager to see if there’s a way to get this to work.
OMG it works!
Check it out: http://diffrent-favicons.webflow.io/
You need to set the global favicon for this to work as Stu suggests. And then the code of course.
Team work makes the dream work 
Hi @jorn!
I tried implementing the code you mentioned above in my custom code head tag of the webpage I’d like the new favicon to show up:
<link rel="icon"
type="image/png"
href="https://uploads-ssl.webflow.com/5b03c6a9f551b277ed058b89/5b03c74eca0d64657c8095d9_favicon.png">
And I uploaded the different favicon I’d like to use and copied that link into the code. I’ve set the global favicon already (it’s the main favicon I’m already using, so a different one from the new one I’d like to use), but I still only see the main favicon instead of the new one on the page with the code in the head tag.
Hopefully I’m not being totally dumb here, but is there something else that I need to be doing to get this to work? Thank you!
Also, on my end when viewing the link you shared, the favicon appears to be the same red circle with the M in it for both pages. Is this a browser display issue maybe? I’m using Google Chrome.
Oh my… On my end, it is only working with Chrome. With Safari I got the M Icon on the wrong page and Webflow icon on the home page. With Firefox I got the M on the home page as expected but none on the second page. So this is not working as expected at all. I assumed that it was working when I only tried in Chrome.
@Brando What is going on? 
Anyone have any other ideas for a solution to this? I’m still at a loss as to what to do. 
The only thing I can think to do is to replace this line of html code that Webflow generates:
<link href="https://thefaviconfileiuploadedtomywebflowsitesettings.png" rel="shortcut icon" type="image/x-icon">
With a link to the favicon I’d like to replace it with.
So, does anyone know, would it be possible to write some custom code to replace that webflow-generated html with a link to the favicon I’d like to use for the few specific pages I’d like the new favicon on?
Thanks!
Wait wait wait…I think I flipping figured this out!!! 
In case anyone else wants to do what I’m doing, here’s the custom code I entered in the head tag based on info found here:
<script>
//to change out default site Favicon
var anchors = document.querySelectorAll('link[href*="http://www.EnterWebflow'sGeneratedDefaultFaviconLinkPathHere.png"]');
Array.prototype.forEach.call(anchors, function (element, index) {
element.href = "http://www.EnterYourPreferredFaviconLinkPathHere.png";
});
</script>
Holy Toledo am I a happy camper!
Ahhh I missed the dramatic conclusion to this epic!!
Well played Kristine! Webflow Ninja!
It does not work on me.
Is this correct?
<script>
//to change out default site Favicon
var anchors = document.querySelectorAll('link[href*="https://assets.website-files.com/img/favicon.ico"]');
Array.prototype.forEach.call(anchors, function (element, index) {
element.href = "https://www.abc.com/favicon.png";
});
</script>
Did you replace “https://assets.website-files.com/img/favicon.ico” or “https://assets.website-files.com/img/webclip.png” ?
By the way, I also tried adding the below two lines just before </head>.
<link href=https://www.abc.com/favicon.png-32.png" rel="shortcut icon" type="image/x-icon" />
<link href="https://www.abc.com/favicon.png-256.png" rel="apple-touch-icon" />
It looks like it works on all browsers, except Safari.