šŸ”¹ favicon - Change the favicon or title of your Home Assistant interface

upon installing HA 109.1:

Logboekdetails (WARNING)
Logger: homeassistant.helpers.translation
Source: helpers/translation.py:206 
First occurred: 16:42:37 (4 occurrences) 
Last logged: 16:42:42

favicon: the '.translations' directory has been moved, the new name is 'translations', starting with Home Assistant 0.111 your translations will no longer load if you do not move/rename this

an issue is already posted, sorry for the doubling: https://github.com/thomasloven/hass-favicon/issues/12

Thank you @thomasloven, this helps me recognising what is HA and what is other HA related stuff in my busy browser.

1 Like

Hi @thomasloven hope youā€™re well.

Iā€™ve noticed since updating to 0.118 the system name at the top of the sidebar is now ā€˜Home Assistantā€™ instead of the the page title as set in favicon changer as it was previously, is this something that can be easily fixed?

yep, been happening since the previous beta, now permanently in 118 unfortunately,see https://github.com/thomasloven/hass-favicon/issues/14

hope Maykarā€™s fix can be incorporated.

to make it just that bit niftier, please consider importing name: from configuration.yaml.

1 Like

Thanks @Mariusthvdb, Iā€™ve implemented Maykarā€™s fix for now and itā€™s working well.

Thomas fixed this today, check the latest update

thanks Thomas!

1 Like

Just saw the fix and updated, back to normal now!

Thanks @thomasloven and @Mariusthvdb

Hi @thomasloven hope youā€™re doing well, thanks for a great session at the HA conference!

Since updating to HA 1.0.0.b0 and 2020.12.0 a strange thing has happened with the sidebar, I originally raised an issue on the HA Github #7977 but have now confirmed the behaviour seems to be caused by the hass-favicon integration.

Have you seen this?

Please let me know if you need any more information to assist in resolving.

@thomasloven Thank you for this very helpful integration! Based on what I saw in the source code and the HA page source, it looks like favicon.ico and favicon-apple-180x180.png are the only two files that would ever get replaced. Is that correct? It might be helpful to document that (I can throw a PR your way later this week if youā€™d like), especially since realfavicongenerator.net (which was recommended in your README.md) names the latter apple-touch-icon.png and includes other files by default that are unused by your integration.

EDIT: Looks like favicon-192x192.png, favicon-384x384.png, favicon-512x512.png, and favicon-1024x1024.png (all defined in /manifest.json) also get replaced.

EDIT #2: Iā€™m an idiot, or Iā€™m blind. Somehow I missed that section of the README entirely. The only thing Iā€™d add is that while favicon-apple-<anything>.png technically works with any size, only the href attribute gets replaced but not the sizes property, resulting in e.g.

<link rel="apple-touch-icon" sizes="180x180" href="/local/favicons/home/favicon-apple-512x512.png">

Thank you again for this integration, and sorry for the error in my original post.

1 Like

The readme explains what the icons should be named and where each of them will be used.
What more did you expect?

2 Likes

I just tried it but this githublink is not working. Might be worth to update.

There are some nice ones available here, and you can generate favicons from them using an online tool, such as this one.

For all those looking for some FavIcons here is a link to a set of those more beautiful ones while the previous github link for a favicon collection is not working. Open the link and then you will see a file with a lot of colours to chose from.
I like the idea cause I have been messing aroung for over 10 days with the nightmare of blue houses in my tabs.

Therefore big thanks to thomasloven

There are favicons on @thomasloven 's github.

1 Like

Could you link it please. Right now I can find 3 project like google keep and so on.
but nothing to favoicon or I am too blind to see it.
thx.

I donā€™t know where you got your link from, because it was changed in May last yearā€¦

1 Like

Thanks, but my inital description was not specific enough:

I had meant the example Favicon icons mentionend here, cause back then the fiert link was not working , which is now working again. Therefore I had mentioned the sources I had found and cut them out. If the link had been working I would not have posted here .

** Get some iconsThere are some nice ones available here, and you can generate favicons from them using an online tool, such as this one. "

At least right now it works again and I will have a look what I have missed.
They look great for example on Echo Show where you can add HA as a favorite and then call it by ā€œalexa start silkā€ cause it starts the last page that had been opened and if not the you have the favorites with the HA icon. Looks great with a good FavIcon .

Thanks for the solution.

No, seriously? Where did you find the link you posted 7 days ago? Itā€™s 13 months since I changed it.
Maybe I need to update somewhere else.

I have to check the history, but I am sure that the link was not working otherwise I would not have taken all the efforts to search Icons and cut them down and to write a comment.
I will check it later where I had been.

1 Like

believe it or not, I found it:

I do not know how I came to that page but from here I got that link I menitioned and got the error 404.

  • Get some iconsThere are some nice ones available here, and you can generate favicons from them using an online tool, such as this one.

Hope that it is solved but can not tell you from where I got that link to 10.4 ā€¦ but I guess from here somewhere.

At least I loved it and will know check the Icons you had recommanded.

Took me way too long to figure this outā€¦

Iā€™m using Chrome desktop shortcuts for two home assistant instances. I wanted just the basic icon, but a different color.

I used assets/logo at master Ā· home-assistant/assets Ā· GitHub, and edited the svg colors, then followed the realfavicongenerator stuff. I actually used both the small, and regular sized logos (more/less branches) and uploaded both of them to the various spots. Lastly, to make ā€œcommand+tabā€ show a high-res icon, youā€™ve got to have a few favicon-XXXxYYY.png in higher resolution than the generator creates. You also probably want to use a site to round the corners, and set a transparent background. Itā€™s still not perfect, thereā€™s slight differences. But itā€™s close enough for now, for me.