Un favicon n'est pas une seule image. C'est la petite icône d'un onglet de navigateur, la plus grande qu'un téléphone utilise quand un site est ajouté à l'écran d'accueil, et la plus grande encore qu'attendent un manifeste PWA et les sélecteurs d'applications. Chaque contexte veut une taille différente, et se tromper se voit : une icône de 16 pixels étirée pour remplir une tuile d'écran d'accueil paraît cassée d'une manière que les visiteurs remarquent.
Ce générateur produit le jeu complet à partir d'une seule image. Votre source est recadrée au centre en carré, mise à l'échelle vers chaque taille requise avec le rééchantillonneur pica plutôt que le filtre par défaut du navigateur — ce qui compte énormément à 16 pixels, où une mise à l'échelle naïve transforme un logo en tache — puis empaquetée dans un ZIP avec un véritable fichier .ico multirésolution.
Les icônes sont générées dans votre navigateur. Logos non publiés et éléments de marque ne sont pas téléversés vers un service d'icônes.
<head> de vos pages.| Fichier | Taille | Utilisé par |
|---|---|---|
| favicon.ico | 16, 32, 48 combinés | Onglets, favoris, compatibilité ancienne |
| favicon-16x16.png | 16 × 16 | Icône d'onglet sur écrans à densité standard |
| favicon-32x32.png | 32 × 32 | Icône d'onglet sur écrans haute densité |
| favicon-48x48.png | 48 × 48 | Raccourcis de site sous Windows |
| apple-touch-icon.png | 180 × 180 | Écran d'accueil iOS |
| icon-512.png | 512 × 512 | Écran d'accueil Android, manifeste PWA, sélecteurs d'applications |
Le .ico est un véritable conteneur multirésolution contenant les versions 16, 32 et 48 pixels, et non un PNG renommé. Windows et les navigateurs anciens choisissent la taille adaptée au contexte de rendu.
Décompressez le ZIP à la racine de votre site et ajoutez ceci au <head> de chaque page :
| Rôle | Balise |
|---|---|
| Favicon classique | <link rel='icon' href='/favicon.ico' sizes='any'> |
| Densité standard | <link rel='icon' type='image/png' sizes='16x16' href='/favicon-16x16.png'> |
| Haute densité | <link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'> |
| Écran d'accueil iOS | <link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'> |
L'icône de 512 pixels est référencée depuis votre manifeste d'application web plutôt que par une balise link.
Un favicon est souvent affiché à 16 pixels de côté, soit à peu près la taille d'un caractère de texte courant. Un logotype complet y est illisible ; une illustration détaillée devient du bruit.
Ce qui fonctionne : une lettre unique, un monogramme simple, ou une forme franche fortement contrastée sur fond d'onglet clair comme sombre. Testez en réduisant votre logo à 16 pixels et en le regardant à bout de bras : si vous ne l'identifiez pas, personne d'autre ne le fera.
Au moins 512 × 512, et carrée si possible. La source est recadrée au centre en carré : un logo large perdra ses extrémités. Complétez-le d'abord en carré avec l'outil Rendre carré si cela pose problème.
Oui. C'est un véritable conteneur ICO multirésolution contenant des images de 16, 32 et 48 pixels, et non un PNG dont on aurait changé l'extension. Windows et les navigateurs anciens le lisent correctement.
À la racine de votre site, pour qu'ils soient accessibles à des chemins comme /favicon.ico. Ajoutez ensuite les balises link indiquées ci-dessus à vos pages.
Les navigateurs mettent les favicons en cache de manière très agressive. Faites un rechargement forcé, ou ouvrez directement l'URL du fichier d'icône pour vérifier qu'il est bien servi, puis rechargez la page.
Oui pour les fichiers PNG, qui conservent leur canal alpha. Gardez à l'esprit qu'une icône transparente doit fonctionner sur fond d'onglet clair comme sombre.
Non. Le recadrage, la mise à l'échelle et l'assemblage de l'ICO se déroulent tous dans votre navigateur.