Ressources.online

Générateur de favicon

La petite icône de votre site dans les onglets, sur Google et sur l'écran d'accueil des téléphones. À partir de votre logo ou de vos initiales, en quelques secondes. Rien n'est envoyé : tout se fait dans votre navigateur.

Forme
Marge autour
6 %

Aperçu

Actualités
Météo

Dans les résultats Google

https://votre-site.fr

Sur l'écran d'accueil

iPhone
Android

Votre logo reste sur votre appareil : les icônes sont fabriquées par votre navigateur, rien n'est envoyé ni enregistré.

Installer les icônes

WordPress
  1. Cliquez sur « Icône pour WordPress (512 px) » ci-dessus.
  2. Dans l'administration : Apparence › Personnaliser › Identité du site › Icône du site (ou, avec un thème récent, Réglages › Général › Icône du site).
  3. Choisissez l'image, puis Publier. WordPress fabrique lui-même les autres tailles : pas besoin du .zip.
Site fait main (HTML, PHP)
  1. Téléchargez le .zip et décompressez-le.
  2. Déposez les fichiers à la racine du site (à côté de la page d'accueil), par FTP ou avec le gestionnaire de fichiers de votre hébergeur.
  3. Collez le code ci-dessus dans la partie <head> de chaque page.
Wix, Squarespace, Shopify, Jimdo…

Ces services ont leur propre réglage, souvent nommé « Favicon » ou « Icône du site » dans les paramètres du site. Envoyez-y l'image de 512 pixels (bouton « Icône pour WordPress ») : elle convient partout.

Bon à savoir

Mon logo est illisible en tout petit
  • Dans un onglet, l'icône fait 16 pixels : un texte ou des détails fins disparaissent. Gardez seulement le symbole de votre logo, ou passez aux initiales.
  • Un logo très allongé devient minuscule dans un carré : utilisez sa partie gauche (le symbole) ou la première lettre.
  • Réduisez la marge pour que le dessin remplisse mieux le carré.
Je ne vois pas ma nouvelle icône

Les navigateurs gardent l'ancienne icône longtemps en mémoire. Ouvrez votre site dans une fenêtre de navigation privée pour vérifier. Sur Google, le changement peut prendre quelques jours à quelques semaines.

À quoi servent tous ces fichiers ?
  • favicon.ico : l'onglet du navigateur et les favoris, lu partout, même par les anciens logiciels.
  • icon.svg (si votre logo est en SVG) : une icône nette à toutes les tailles pour les navigateurs récents.
  • apple-touch-icon.png : l'icône quand on ajoute votre site à l'écran d'accueil d'un iPhone ou d'un iPad.
  • icon-192.png, icon-512.png, icon-maskable-512.png et site.webmanifest : la même chose pour Android, qui découpe l'icône en rond ou en carré arrondi.

Vérifier ensuite votre site avec le bilan de santé