# :white\_check\_mark: Changer l'icone de Home Assistant **URL:** \ **Category:** Intégration\ **Tags:** integration-personnalisee-custom-component\ **Created:** [Octobre 19, 2020, 9:30 UTC](https://forum.hacf.fr/t/changer-licone-de-home-assistant/697 "2020-10-19T21:30:59Z")\ **Posts on this page:** 2\ **Page:** 1
**Author:** ![Clemalex](https://forum.hacf.fr/user_avatar/forum.hacf.fr/clemalex/32/3691_2.png) [@Clemalex](https://forum.hacf.fr/u/Clemalex)\ **Post date:** [Octobre 19, 2020, 9:30 UTC](https://forum.hacf.fr/t/changer-licone-de-home-assistant/697/1 "2020-10-19T21:30:59Z")
![licence](https://forum.hacf.fr/uploads/default/original/2X/e/e1fead3f87ba19785badbf348ffefc0c7612c613.svg) Voici une intégration personnalisée (custom-component) permettant de personnaliser un peu plus Home Assistant : **`favicon`** Cette **intégration** permet de changer l'icone affichée dans l'onglet de votre navigateur préféré, l'icone de raccourci (sur le bureau ou sur votre launcher de smartphone) et le nom affiché dans la barre latérale : ![favicon-chrome](https://forum.hacf.fr/uploads/default/original/2X/7/754728720d1cdd0045454208a444e566b9b20ff9.jpeg) ![favicon-ajout-launcher](https://forum.hacf.fr/uploads/default/original/2X/6/6e72a8e721ebd2bc0242a30d2b9e0d1fe33339a7.jpeg) ![favicon-launcher](https://forum.hacf.fr/uploads/default/original/2X/d/db61e7eb0f061e365ff6565637ba63b18a20020c.jpeg) ## Niveau requis - **Débutant** / _Intermédiaire_ / _Avancé_ ## Matériels nécessaires / Matériels utilisés / Prérequis - un clavier (éventuellement une souris 😉 ) ## Ajouter l'intégration à Home Assistant Pour ce faire, 2 solutions : - Par HACS: en suivant les explications [[Article] Installer HACS sur Home Assistant et profiter d'un magasin alternatif](https://forum.hacf.fr/t/hacs-ajoutez-des-modules-et-des-cartes-personnalisees/359) et en cherchant `hass favicon` - Par le Git [hass-favicon](https://github.com/thomasloven/hass-favicon): en suivant les explications [Ajouter depuis GitHub une intégration](https://forum.hacf.fr/t/ajouter-depuis-github-une-integration/2599) ## Création des icones Pour les icônes, il faut respecter un certain [nommage](https://github.com/thomasloven/hass-favicon#about-the-icons) mais ne vous inquiétez pas, [ce site](https://realfavicongenerator.net/) le fera pour vous : 1. Créez votre image personnelle ou allez en chercher [ici](https://github.com/home-assistant/iOS/tree/master/icons/Alternates) ou [là](https://www.flaticon.com/packs?search-type=packs&license=selection&order_by=4) 2. Accédez au site [Real Favicon Generator](https://realfavicongenerator.net/) et suivez les instructions 3. Désarchivez le pack téléchargé dans un dossier au niveau du dossier que vous avez créé précédemment : 4. Il est nécessaire de renommer les icones comme ceci : Les images qui commencent par `android-chrome-YYYxYYY` en `favicon-YYYxYYY`pour l'affichage de raccourci sur Android Les images qui commencent par `apple-touch-icon-YYYxYYY` en `favicon-apple-YYYxYYY` pour l'affichage de raccourci sur iOS ## Utiliser l'intégration 1. Créez dans le dossier `www` un dossier `favicons` qui contiendra les images (garder bien l'arborescence `/www/favicons/` car sinon les icones ne seront pas prises en compte) > ℹ Si le dossier `www` n'existe pas, il suffit de le créer au même niveau que votre fichier `configuration.yaml` 1. Maintenant que l'intégration est dans le dossier `custom_components` et les icones dans `/www/favicons/vos_icones`, il ne reste plus qu'à redémarrer votre serveur HA pour la prise en compte de tout ça 2. Une fois HA de nouveau disponible, rendez-vous dans la partie `Configuration` ▶ `Intégrations`, puis cliquer sur le bouton `Ajouter une intégration` en bas à droite et tapez `favicon`. Dans la popup qui s'affiche, renseignez un nom (optionnel) et le chemin vers votre pack d'icones : ![favicon-settings](https://forum.hacf.fr/uploads/default/original/2X/a/a2ad734e8ed75ce5df9bd30558ac1e9fc85fefe2.webp) > ⚠ Sous HA, la référence au dossier `/www` se fait par `/local` donc dans notre cas précis il faut renseigner `/local/favicons/vos_icones`. ## Appliquer l'intégration Afin d'appliquer l'intégration, il est nécessaire de vider le cache de votre navigateur favori (`CTRL+F5` pour les navigateurs Chrome et Firefox) ## Conclusion Voici ce que vous devez obtenir à la suite de la bonne intégration de cette ... intégration 😉 : - Dans le navigateur du PC ![favicon-chrome](https://forum.hacf.fr/uploads/default/original/2X/7/754728720d1cdd0045454208a444e566b9b20ff9.jpeg) * * * - Pour le raccourci sur Android : ![favicon-ajout-launcher](https://forum.hacf.fr/uploads/default/original/2X/6/6e72a8e721ebd2bc0242a30d2b9e0d1fe33339a7.jpeg) ![favicon-launcher](https://forum.hacf.fr/uploads/default/original/2X/d/db61e7eb0f061e365ff6565637ba63b18a20020c.jpeg) * * * - Pour le raccourci sur iOS ([source](https://user-images.githubusercontent.com/1299821/62975899-c29d6480-be1b-11e9-9b6b-9d160ef8b439.jpg)) : ![image](https://forum.hacf.fr/uploads/default/original/1X/c0796b454f2987f060cb21b00220a36f3bfb2fbf.jpeg) ## Une question, un problème [Besoin d'aide ? Cliquez ici !](https://forum.hacf.fr/new-topic?title=Titre+de+votre+probl%C3%A8me&body=%23%23+Mon+probl%C3%A8me%0D%0A%0D%0A%2ARenseigner+votre+probl%C3%A8me%2A%0D%0A%0D%0A%23%23+Le+tutoriel+d%27origine%0D%0A%0D%0Ahttps%3A%2F%2Fforum.hacf.fr%2Ft%2Fchanger-licone-de-home-assistant%2F697%0D%0A%0D%0A%23%23+Ma+configuration%0D%0A___%0D%0A%5Bcenter%5DTexte+%C3%A0+remplacer+par+votre+configuration%5B%2Fcenter%5D%0D%0AComment+r%C3%A9cup%C3%A9rer+ma+configuration+%3A%0D%0ADans+votre+HA%2C+Menu+lat%C3%A9ral+%60Configuration%60+%3E+%60Info%60+%3E+bouton+copier+%3E+%60Pour+Github%60%0D%0A+++%21%5Bimage%7C648x167%2C+75%25%5D%28upload%3A%2F%2F1ietIxFU6nXP1GFrJTzwc2mh0j2.png%29%0D%0A&category=entraide-home-assistant&tags=aide) ## Remerciement - Merci 🙏 à [@thomasloven](https://github.com/thomasloven) pour son intégration ## Suivi des modifications - _01/02/2021_: Passage en article officiel (:hacf_tuto: ) @Clemalex - _19/10/2020_ : création @Clemalex ---
**Author:** ![Clemalex](https://forum.hacf.fr/user_avatar/forum.hacf.fr/clemalex/32/3691_2.png) [@Clemalex](https://forum.hacf.fr/u/Clemalex)\ **Post date:** [Février 1, 2021, 8:22 UTC](https://forum.hacf.fr/t/changer-licone-de-home-assistant/697/12 "2021-02-01T20:22:07Z")
A fermé ce sujet (le Février 1, 2021, 8:22 UTC)