When working on local HA config via the web UI, while also referencing pages on the HA website, one’s browser tab bar is a sea of the same icon and (mostly) also the same text. The colour/shape of the favicon should at least differ. And varying the page title (i.e. tab text) would help too. Why do config/areas/dashboard and config/cloud/account (and everything else) all just put “Settings” in the tab text?
This. I know I can set a custom favicon for my HA instance. But it shouldn’t even be the same by default. Just invert the colors, or change one of the colors, etc.
Completely agree and can’t believe I didn’t think of posting this as a WTH. I’ve installed the custom component for favicon. But it is much more work then it should be.
(I wonder if this WTH should have favicon in the title to be more recognizable.)
At a minimum, out of the box, the HA web site and the actual HA web app should use different icons to be easily distinguishable.
Ideally the would be some ability to change the icon without having to install and maintain a custom component.
1 Like
Yep, it’s annoying. I usually keep blank tabs between them and group them in sections
2 Likes
I totally agree. I found this post because I was wondering how to change the favicon for my local instance.
Agree, I use a custom component for this, but it shouldn’t be necessary.
I wound up changing it manually. I downloaded a copy of favicon.ico via the page info dialog in Firefox. Edited it with MS Paint. Then put it on an http(web) server on my local LAN (I didn’t see any other way to easily transfer files), so I could use wget from the SSH & Web Terminal (from the Community Add-ons), and replace the stock file (after renaming it, by appending “.org” to it) in the appropriate directory.
You will need to disable the SSH & Web Terminal’s protected mode (on the add-on’s Info tab) in order to proceed. You’ll have to access the homeassistant container. If you’re not familiar with docker and its containers (I wasn’t before setting up Home Assistant OS), I would advise getting a little info before accessing the homeassistant container. First, after you’ve opened the terminal, type docker --help, as well as docker exec --help (so you understand the command line options), and finally docker ps which lists the containers (it’s a wide table, so you might have to maximize your window to see it correctly).
For those unfamiliar with Linux and the command line, here are some commands that you’ll need to be familiar with. First, pwd (present working directory) shows what directory you’re currently in. Second, cd (change directory) changes to the directory you specify after the command. Third, mv (move), which can be used to move fiiles from on directory to another, or in this case, to rename a file. Finally, exit, which will exit the current command shell, and in this context return you to the original context (the SSH & Web Terminal add-on container) when you opened the terminal add-on. Oh, one other: ls to list the files in a directory (current directory, if not specified).
A final word of caution: When you get into the homeassistant container, you’ll have root privileges and power, meaning you can essentially execute any command and manipulate any file in that container. Be very careful.
After opening the Terminal, the following commands should do the trick.
docker exec -it homeassistant bash
bash is the shell in which to work Bash (Unix shell) - Wikipedia
cd /usr/local/lib/python3.10/site-packages/hass_frontend/static/icons/
mv -i favicon.ico favicon.ico.org
The -i option will cause it to ask if you’re sure you want to overwrite a file, otherwise it won’t ask anything.
wget <URL to your local http/web server, including full path and filename>
My personal example: wget http://192.168.0.191:8080/Downloads/myfavicon2.ico
This will save the file in the current directrory.
The name of the file needs to be “favicon.ico” so you might need to mv -i <your file's name> favicon.ico before finishing.
Reload your local Home Assistant instance in your browser to check if it worked. It might not work at first reload. I had to do a force reload in Firefox by holding down shift and clicking the refresh button.
Assuming it worked, you can exit and you’re done.
One last tip: I’ve done this twice now, having next to no experience with favicon.ico files. I’ve made the modification a bit too small both times, about 1/4 the size of the whole, in the top left corner. So maybe aim to make it a bit bigger than that, in order to be highly visible.
Good luck! And easier management for all!
Hello,
I’m currently managing two Home Assistant instances – one locally and the other remotely via Nabu Casa. I’m looking for a more straightforward way to manage and differentiate between these two instances.
Came across this post just as I was creating my own bookmarks for chrome.
Surely there must be a way to differentiate the pages by now?
I respect the lengths you guys went in order to sort this out, but It’d be too time consuming for a newbie.
Anything new after a year?
1 Like