Change favicon

Configuration
1

Is there a way to change favicon? Or maybe for HA developers to change either the HA one or home-assistant.io one? With the forum and web site opened it’s hard to distinguish where is you own HA instance

1 Like
2

do you found a solution to this ?

3

This is a solution I came up with that mostly works. If you add the icons.html to your www directory and put icons in the correct location (www/icons/) it will change things at runtime. Do a view source to see what you need to change the icon names too. It isn’t perfect because there are times it gets the old versions or just doesn’t update the icon. Make sure your cache is cleared, if it doesn’t work try again :slight_smile:

<!-- icons.html -->
<html>

<head>
  <script>
    (function () {

      let metaContent = document.querySelectorAll("meta[content^='/static/'");
      metaContent.forEach(x => {
        x.content = x.content.replace('/static/', '/local/');
      });

      let linkHref = document.querySelector("link[rel='icon'");
      linkHref.href = linkHref.href.replace('/static/', '/local/');

      let linkManifest = document.querySelector("link[rel='manifest'");
      linkManifest.href = "/local/icons/manifest.json";

      let appleTouchIcon = document.querySelector("link[rel='apple-touch-icon'");
      appleTouchIcon.href = linkHref.href.replace('/static/', '/local/');

    })();
  </script>

# Configuration.yaml
frontend:
  extra_html_url:
    - /local/icons.html
2 Likes
4

Wow… I am impressed with your workaround…

I took a easy wayout. I run a reverse proxy and replace the favicon.ico file using rewrite rules…

1 Like
5

I just pin the tab in google chrome to identify it easily but I agree with you that it is pretty annoying having the same icon for your local HA install and the website/community pages (that’s why I searched for this online) .

6

  • Create your favicon files: favicon-192x192.png and favicon.ico. And copy them to CONFIG folder.
    (you can use Illustrator or MS Paint…)

  • SSH to Hass, and use cmd:
    cd /mnt
    find -name hass_frontend
    to show path of the hass_frontend folder, next:
    cd [hass_frontend_path]/icons
    ls //to show all

  • Then, use cmd CP to copy two files favicon-192x192.png and favicon.ico in the CONFIG folder to the hass_frontend/icons folder.

favicon

3 Likes
7

seems doable but wouldn’t it be even better if everyones local HA installation has per default a different icon(color?) than the HA website? Or that there was a simple way to specify an icon or color in the frontend?

I’m using docker and creating special icons just for this purpose seems a bit much work.

8

I just released a custom component which changes favicons for Home Assistant!

If someone still wants it; here you go.

1 Like
9

Thanks for the brilliant tip!
I did not think about that possibility…:see_no_evil:

10

Hi Tomas,thanks you component worked. But in login windows no change of favicon. There is another option image

11

Yes. That’s a known limitation, and one I will not fix.
When you log into Home Assistant, you should know that it’s Home Assistant you’re logging into.

12

/usr/local/lib/python3.11/site-packages/hass_frontend/
is where you find everything like icons.