Unique favicon for http://homeassistant.local:8123/

Feature Requests
1

Could the favicon of the frontend be made slightly different from the https://www.home-assistant.io/ pages?
For people like myself with dozens of documentation and forums opened in the browser it would be beneficial if the tab with the UI page would be identifiable.

I understand that while not hard to implement there my be concerns / discussions regarding aesthetics.
Thanks for considering!
Martin

2

There is a custom integration for that. GitHub - thomasloven/hass-favicon: 🔹 Change the favicon of your Home Assistant instance

1 Like
3

Thank you.
That sounds like what I wanted. I copied the custom integration, converted an (orange) icon

sudo apt install imagemagick
...
convert -resize x16 -gravity center -crop 16x16+0+0 orange.png -flatten -colors 256 -background transparent output/favicon.ico

and copied the file to
/root/config/www/favicons/favicon.ico
This is the path I understood from the description; similar to where the custom_components reside:
/root/config/custom_components/favicon/__init__.py

I must be missing something since the icon didn’t change.
I suspect that the dockerized system has the /www/ on a different path(?) (in a docker somewhere)

Thanks!

4

Did you try clearing your browser’s cache? Can you enter the direct URL to the favicon and does it display correctly?

1 Like
5

Did you set up the integration?

6

When I place the full local path of the favicon.ico to Chrome it does display a black screen with the (desired orange) icon in the middle. So I hope that is confirmed.

I rebooted Home Assistant, flushed browser cache and as a last resort I even launched Edge (that haven’t seen HASS yet).

HOWEVER I just tried to reconfigure the Favicon integration again.
I misunderstood the example and had the base-name favicon in the Icon Path.
Once removed:
image

and after another restart I got what I wanted.

image

Thanks!