Changing the favicon

Morning, hey does anyone know how to change the favicon and open graph settings of an app?

1 Like

ChangeFavicon();
function ChangeFavicon() {
var link = document.querySelector(“link[rel*=‘icon’]”) || document.createElement(‘link’);
link.type = ‘image/x-icon’;
link.rel = ‘shortcut icon’;

link.href = ‘https://s3.amazonaws.com/your_address’;
document.getElementsByTagName(‘head’)[0].appendChild(link);
}

Hi Justin, add this to the javascript or the CSS?

That code is Javascript.

Thanks for sharing this, Justin, it worked for me! Just a note to anybody else who tries, this forum does convert the quotes from straight to curly if it’s not part of a code block, so be sure to use straight quotes in your app settings’ custom JS:

ChangeFavicon();
function ChangeFavicon() {
 var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
 link.type = 'image/x-icon';
 link.rel = 'shortcut icon';

   link.href = 'https://s3.amazonaws.com/your_address';
  document.getElementsByTagName('head')[0].appendChild(link);
}

Hey, can you show a photo of the script showing the quote marks in the right format. So i can check mine ! As it dont work in my app! Lol… but I want it to!! Lol

Hey BJ -

Looks like this in the JS section of my app settings:

The favicon image is actually stored in an object called “Assets” - in an image field that I then grabbed the path for from a table view.

End result:
image

Hope that helps!

Is the object assets public facing or behind a login?

right, still cant get it to work! does the image need to be an ico file or jpeg? I have not added any other javascript so its on line 1. does that matter?

Sorry! My bad,lol…yes you do need to change the Marks from Curly to ’ or ", they are maked in red above…

I know have a fully branded app,just saved me thousands on a redesign!! thank you so much

image

1 Like

Woohoo! I know it’s the little things that make it all come together, right? Glad you got the favicon working, looks great.

To answer your previous questions - I uploaded a png file - ~200x200 px. I’d check out @CarlHolmes’s tutorial on what he calls “Site Collateral” which is what I called “Assets”: Site Collateral

2 Likes

I know this is a slightly older thread, but I just wanted to say thanks to everyone on this topic! This code works great and instantly adds personalization and credibility to my app! Thanks again!

Works great, thanks!