Can the built in favicon be replaced using javascript?

I'd like to replace the default Knack favicon. My understanding is that CSS won't work. How can I do it with Javascript?

I'll never get over how you can call a function before it's declared like that. lol

Worked! Tks!

So maybe the function you have isn't being called anywhere is what I'm thinking.

Does this work?

ChangeFavicon();

function ChangeFavicon() {
var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
link.type = 'image/x-icon';
link.rel = 'shortcut icon';
link.href = 'XXX'; //path to your icon
document.getElementsByTagName('head')[0].appendChild(link);
}

Check that you're calling the code somewhere?  Place ChangeFavicon(); above the function on a separate line or inside a scene or view render (apologies if you've already done that).

I've removed my icon link for security...

Ours is hosted in our wordpress site XXXX.

What's the console error being reported?

Tried to host the favicon in other server and even used a file .ico from other site and it did not worked. Would you mind sharing the url of your favicon? Just to confirm if it will work with the code? Thanks!

Looks right - are there any errors reported in the browser console?

I suspect a cross-origin issue (http vs https or the location).

If that's the case the workaround is to place the icon inside your Knack app as a file and reference the saved path of the file instead.

We're running that code on 2 apps right now Michael.

Thanks Tony and Brad! I had looked in the Knack docs but hadn't found that Tony, and will give that code a try also Brad. Is that snippet something you have running on a Knack app? 

Happy to share this javascript function - call it at the top of your code before event handlers.

function ChangeFavicon() {
var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
link.type = 'image/x-icon';
link.rel = 'shortcut icon';
link.href = 'XXX'; //path to your icon
document.getElementsByTagName('head')[0].appendChild(link);
}

Its done by accessing DOM (document object model) using javascript you reference the object and replace or add text in the live HTML document after it's been rendered it's pretty slick if you are new to it.. Will change your life once you understand what and how it works.

I forget exactly where I saw how to change the favicon but this is close to the same thing changing the app icon on mobile phones you should probably be able to track it down with this knowledge.

https://www.knack.com/developer-documentation/#change-custom-icon-mobile

Hey there, I am having the same problem with updating the favicon on my app. When downloading the app on a mobile it asks “where is the favicon” it seems it does not pick up the favicon url. Is there a work around to load the favicon somewhere on my app itself?

Hey @Sindy - the favicon that was being discussed here is the one shown on the tab of a web browser.

For saving the app to your homescreen on mobile, try this! JavaScript & jQuery Examples

Hope that helps.