# Can the built in favicon be replaced using javascript? **URL:** \ **Category:** API & Custom Code\ **Created:** [December 7, 2018, 12:31pm UTC](https://forums.knack.com/t/can-the-built-in-favicon-be-replaced-using-javascript/9242 "2018-12-07T12:31:26Z")\ **Posts on this page:** 14\ **Page:** 1
**Author:** ![MichaelLom68171](https://avatars.discourse-cdn.com/v4/letter/m/b19c9b/32.png) [@MichaelLom68171](https://forums.knack.com/u/MichaelLom68171)\ **Post date:** [December 7, 2018, 12:31pm UTC](https://forums.knack.com/t/can-the-built-in-favicon-be-replaced-using-javascript/9242/1 "2018-12-07T12:31:26Z")
I'd like to replace the default Knack favicon. My understanding is that CSS won't work. How can I do it with Javascript? ---
**Author:** ![TonyLewis75327](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/tonylewis75327/32/261_2.png) [@TonyLewis75327](https://forums.knack.com/u/TonyLewis75327)\ **Post date:** [March 22, 2019, 6:56pm UTC](https://forums.knack.com/t/can-the-built-in-favicon-be-replaced-using-javascript/9242/2 "2019-03-22T18:56:56Z")
I'll never get over how you can call a function before it's declared like that. lol ---
**Author:** ![Guilhermeb42087](https://avatars.discourse-cdn.com/v4/letter/g/a87d85/32.png) [@Guilhermeb42087](https://forums.knack.com/u/Guilhermeb42087)\ **Post date:** [March 22, 2019, 2:39am UTC](https://forums.knack.com/t/can-the-built-in-favicon-be-replaced-using-javascript/9242/3 "2019-03-22T02:39:18Z")
Worked! Tks! ---
**Author:** ![BradStevens](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/bradstevens/32/140_2.png) [@BradStevens](https://forums.knack.com/u/BradStevens)\ **Post date:** [March 22, 2019, 2:33am UTC](https://forums.knack.com/t/can-the-built-in-favicon-be-replaced-using-javascript/9242/4 "2019-03-22T02:33:44Z")
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); } ``` ---
**Author:** ![BradStevens](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/bradstevens/32/140_2.png) [@BradStevens](https://forums.knack.com/u/BradStevens)\ **Post date:** [March 22, 2019, 2:21am UTC](https://forums.knack.com/t/can-the-built-in-favicon-be-replaced-using-javascript/9242/5 "2019-03-22T02:21:24Z")
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... ---
**Author:** ![BradStevens](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/bradstevens/32/140_2.png) [@BradStevens](https://forums.knack.com/u/BradStevens)\ **Post date:** [March 22, 2019, 2:02am UTC](https://forums.knack.com/t/can-the-built-in-favicon-be-replaced-using-javascript/9242/6 "2019-03-22T02:02:26Z")
Ours is hosted in our wordpress site XXXX. What's the console error being reported? ---
**Author:** ![Guilhermeb42087](https://avatars.discourse-cdn.com/v4/letter/g/a87d85/32.png) [@Guilhermeb42087](https://forums.knack.com/u/Guilhermeb42087)\ **Post date:** [March 22, 2019, 1:57am UTC](https://forums.knack.com/t/can-the-built-in-favicon-be-replaced-using-javascript/9242/7 "2019-03-22T01:57:38Z")
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! ---
**Author:** ![BradStevens](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/bradstevens/32/140_2.png) [@BradStevens](https://forums.knack.com/u/BradStevens)\ **Post date:** [March 22, 2019, 1:13am UTC](https://forums.knack.com/t/can-the-built-in-favicon-be-replaced-using-javascript/9242/8 "2019-03-22T01:13:23Z")
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. ---
**Author:** ![BradStevens](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/bradstevens/32/140_2.png) [@BradStevens](https://forums.knack.com/u/BradStevens)\ **Post date:** [December 20, 2018, 5:23pm UTC](https://forums.knack.com/t/can-the-built-in-favicon-be-replaced-using-javascript/9242/9 "2018-12-20T17:23:18Z")
We're running that code on 2 apps right now Michael. ---
**Author:** ![MichaelLom71959](https://avatars.discourse-cdn.com/v4/letter/m/a3d4f5/32.png) [@MichaelLom71959](https://forums.knack.com/u/MichaelLom71959)\ **Post date:** [December 20, 2018, 11:45am UTC](https://forums.knack.com/t/can-the-built-in-favicon-be-replaced-using-javascript/9242/10 "2018-12-20T11:45:39Z")
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?  ---
**Author:** ![BradStevens](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/bradstevens/32/140_2.png) [@BradStevens](https://forums.knack.com/u/BradStevens)\ **Post date:** [December 19, 2018, 10:45pm UTC](https://forums.knack.com/t/can-the-built-in-favicon-be-replaced-using-javascript/9242/11 "2018-12-19T22:45:43Z")
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); } ``` ---
**Author:** ![TonyLewis75327](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/tonylewis75327/32/261_2.png) [@TonyLewis75327](https://forums.knack.com/u/TonyLewis75327)\ **Post date:** [December 7, 2018, 11:29pm UTC](https://forums.knack.com/t/can-the-built-in-favicon-be-replaced-using-javascript/9242/12 "2018-12-07T23:29:06Z")
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](https://www.knack.com/developer-documentation/#change-custom-icon-mobile) ---
**Author:** ![Sindy](https://avatars.discourse-cdn.com/v4/letter/s/bc79bd/32.png) [@Sindy](https://forums.knack.com/u/Sindy)\ **Post date:** [September 27, 2021, 8:46am UTC](https://forums.knack.com/t/can-the-built-in-favicon-be-replaced-using-javascript/9242/13 "2021-09-27T08:46:22Z")
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? ---
**Author:** ![Jessie](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/jessie/32/5_2.png) [@Jessie](https://forums.knack.com/u/Jessie)\ **Post date:** [September 27, 2021, 1:27pm UTC](https://forums.knack.com/t/can-the-built-in-favicon-be-replaced-using-javascript/9242/14 "2021-09-27T13:27:32Z")
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](https://docs.knack.com/docs/javascript-jquery-examples#use-a-custom-icon-for-saving-your-app-to-a-mobile-devices-home-screen) Hope that helps.