How do I customize the browser favicon?

Powerchoice shared this problem 13 months ago

As the title suggests, I want to replace the default web browser "JustInMind" favicon with my own prototype favicon. See attached. Thanks.

Comments (2)


It's a little complicated, but here's what to do

1. Export your prototype to HTML.

2. Open the generated folder and navigate to Resources > jim > images > common > in this folder remove the file faveicon.ico and replace it with your own file. Make sure it's called faveicon.ico

3. Go back to the generated folder root (where index.html is shown). Right-click on the index.html file and open it with a text editor.

4. Look for this text

<link rel="shortcut icon" type="image/x-icon" href="./resources/jim/images/common/favicon.ico" sizes="128x128" />
and replace it with this:

<link rel="icon" href=".resources/jim/images/common/favicon.ico" type="image/x-icon"> 
This should work for Firefox.

To make it work for Chrome, you need a few extra steps:

1. Go to this link, upload your faveicon.ico image, and click 'Convert the source data'. This will generate a really long text string that's basically the data of the image.

2. Go back to the index.html file and open it with a text editor. Under the icon text you added earlier, add this:

<link href="data:image/x-icon;base64,reallylongtext"rel="icon" type="image/x-icon" />
replacing the 'reallylongtext' with the text you generated earlier.

3. Lastly, clear your Cache in Chrome.

Hope this helps!


Thanks Danielle!