Mode d’emploi

Choisissez Lettres et saisissez un ou deux caractères avec vos couleurs, ou choisissez Image et sélectionnez un logo (idéalement carré et d’au moins 512 px).
Vérifiez les aperçus de toutes les tailles, en particulier ceux de 16 et 32 px, utilisés dans les onglets du navigateur.
Téléchargez le ZIP et importez ses fichiers à la racine de votre site.
Collez les balises HTML dans la section head de vos pages et modifiez le nom dans site.webmanifest si nécessaire.

Fonctionnement

Les navigateurs et les appareils recherchent les icônes à différents endroits. Le jeu généré ici couvre les cas les plus courants : favicon.ico avec des images de 16, 32 et 48 px pour les onglets du navigateur, les favoris et les anciens logiciels qui recherchent automatiquement /favicon.ico ; des fichiers PNG de 16 et 32 px référencés par des balises link ; une apple-touch-icon de 180 × 180 utilisée lorsqu’une personne ajoute votre site à l’écran d’accueil d’un iPhone ou d’un iPad ; et des icônes de 192 et 512 px référencées dans site.webmanifest pour les écrans d’accueil Android et les applications web installables.

Le fichier favicon.ico contient les icônes au format PNG dans un conteneur ICO, lisible par tous les navigateurs actuels et par Windows Vista ou version ultérieure. Les fichiers ICO et ZIP sont assemblés par du code exécuté sur cette page ; rien n’est envoyé à un serveur.

Les petites tailles nécessitent un design simple : à 16 × 16 pixels, les lignes fines et les petits textes disparaissent. Une lettre en gras ou un logo simplifié fonctionne donc mieux qu’un logo complet avec du texte. L’image est réduite en plusieurs étapes de haute qualité. L’apple-touch-icon reçoit toujours une couleur d’arrière-plan unie, car iOS affiche les zones transparentes en noir et arrondit lui-même ses angles.

Après l’ajout de nouvelles icônes, les navigateurs peuvent continuer à afficher l’ancienne favicon pendant un certain temps, car ils la mettent en cache de façon intensive. Un rechargement forcé ou l’ouverture directe de /favicon.ico suffit généralement.

Exemples

Icône avec des lettres pour un nouveau projet

Saisir « TG » en lettres blanches sur un carré arrondi vert foncé crée une icône nette qui reste lisible à 16 × 16 px dans un onglet de navigateur, sans avoir besoin d’un logo conçu spécialement.

Créer une icône à partir d’un logo existant

Un logo PNG de 1024 × 1024 avec un arrière-plan transparent et l’option Ajuster l’image entière produit des icônes d’onglet transparentes et une apple-touch-icon sur la couleur de votre marque.

Logo horizontal

Pour un logo horizontal de 1200 × 300, l’option Recadrer le centre ne conserve que les lettres du milieu. Ajuster l’image entière conserve tout, mais rend l’image minuscule ; un logo carré distinct est généralement préférable.

Foire aux questions

Ai-je encore besoin de favicon.ico ?

Oui, elle reste utile. Certains navigateurs, lecteurs de flux et outils recherchent /favicon.ico à la racine du site, même sans balise link. Les navigateurs modernes utilisent également les icônes PNG référencées dans le HTML.

Où dois-je placer les fichiers ?

Importez-les dans le dossier racine de votre site, à côté de la page d’accueil, afin que /favicon.ico et les autres chemins du HTML fonctionnent. Si vous utilisez un sous-dossier, modifiez les chemins dans les balises link et dans site.webmanifest.

Pourquoi mon ancienne favicon s’affiche-t-elle encore ?

Les navigateurs mettent les favicons en cache séparément et pendant longtemps. Essayez un rechargement forcé, ouvrez /favicon.ico dans un nouvel onglet ou vérifiez dans une fenêtre privée. Renommer les fichiers, par exemple en favicon-v2.ico, force également leur rechargement.

Cet outil crée-t-il une favicon SVG ?

Non. Il crée des fichiers PNG et ICO, compatibles avec tous les environnements. Si vous avez déjà un logo SVG, vous pouvez l’ajouter vous-même avec une balise link de type image/svg+xml, en plus de ces fichiers.

Confidentialité

Les icônes, le fichier ICO et le ZIP sont créés dans votre navigateur. Votre image et votre texte ne sont ni envoyés, ni stockés, ni inclus dans les données d’analyse.