Changing the favicon

API & Customization Show & Tell
1

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

1 Like
2

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);
}

3

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

4

That code is Javascript.

5

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);
}
2 Likes
6

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

7

Hey BJ -

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

image
image995Ɨ249 53.8 KB

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!

8

Is the object assets public facing or behind a login?

9

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?

10

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
11

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

3 Likes
12

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!

13

Works great, thanks!

14

Thanks! Worked perfectly! Also thanks for the tip to watch @carlhomes vide on site collateralā€¦

1 Like