How to update Favicon?

Getting advice
1

Hi ,
I am looking for how to change the favicon( The browser tab icon) to desired icon.
I have created a custom theme and inside that created a new login folder as suggested in the docs.
keycloak-7.0.0/themes/customTheme/login/resources/img updated a new favicon in this path. But still the new favicon is not displaying.

2

I was the same doubt, but I can solve it editing the template.ftl file.
Following the documentation HTML Templates I could see that I could modify all page style and structure just coping the ftl files to my theme.

The file that has the tag <head> responsible to set the favicon is the template.tfl, then I did a copy of that file to my theme and changed the <link rel="icon" href="${url.resourcesPath}/img/favicon.ico"/> tag to use the URL of the favicon of my theme.

Bellow example of my theme directory:

`-- themes
    `-- myTheme
       `-- login
           |-- resources
           |   |-- css
           |   |   |-- login.css
           |   |   `-- styles.css
           |   `-- img
           |       |-- favicon.ico
           |       |-- img-bg.png
           |       `-- img-text.png
           |-- template.ftl
           `-- theme.properties

I hope that helps you.
Enjoy!

3 Likes
3

Thanks @RodolfoDella. Appreciate your response. However I was able to resolve the issue long back. The problem in my case was with the format of the file. I was trying to use an svg file with .ico extension which was the problem. I used a png file instead and changed it’s extension to .ico and it worked like a charm.

4

Hi All/Anubhav,
I have a same requirement to change with custom favicon.ico icon, however I tried in my local machine but not able to find where I need to change so that it will reflect all places.

After inspecting I found below content :

image
image1920×1083 230 KB

Not sure from this path :
How pv1ww is getting created, due to this not able to search exact match because does not exists.

Can you help me at locally where I should change, below is my app structure.

image
image309×641 10.6 KB

In some template.ftl I have ${url.resourcesPath}, , not sure till what path it is adding dyanamically.

Any help will be appreciated.