Générateur de favicon
Tout se passe dans votre navigateur. Vos fichiers et vos données ne quittent jamais votre appareil.
16×16favicon-16x16.png
32×32favicon-32x32.png
48×48favicon-48x48.png
180×180apple-touch-icon.png
192×192icon-192.png
512×512icon-512.png
<link rel="icon" href="/favicon.ico" sizes="32x32"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">
À propos de cet outil
Déposez un logo ou une image à peu près carrée, et la page la redessine dans les six tailles dont un site a besoin : 16, 32 et 48 pixels pour l’onglet du navigateur, 180 pour l’icône qu’iOS enregistre sur l’écran d’accueil, et 192 et 512 pour Android. Le téléchargement est un unique ZIP contenant ces PNG, un favicon.ico, un site.webmanifest et une copie du HTML à coller dans le <head>.
Que contient le ZIP ?
Six PNG (favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, apple-touch-icon.png, icon-192.png et icon-512.png), plus un favicon.ico qui regroupe les versions 16, 32 et 48 pixels dans un seul fichier. Le format ICO accepte des images compressées en PNG depuis Windows Vista, ce qui garde le fichier léger tout en restant compatible avec les vieux navigateurs qui ne cherchent que /favicon.ico.
Le fichier site.webmanifest liste les icônes 192 et 512 pixels et reprend le nom d’application saisi dans le menu de réglages, avec un short_name tronqué à 12 caractères, à peu près ce qu’Android affiche sous une icône d’écran d’accueil. Si le champ reste vide, le nom par défaut est “My site”. Le dernier fichier, favicon.html, contient les cinq mêmes balises <link> que le bouton de copie place dans le presse-papiers.
Mes images sont-elles envoyées quelque part ?
Non. L’image est dessinée sur un élément canvas dans la page et encodée en PNG par le navigateur lui-même, puis compressée en ZIP dans le même onglet. Rien n’est transmis à un serveur : un logo pas encore dévoilé ou la charte graphique d’un client ne quitte jamais votre machine. Vous pouvez ouvrir la page, débrancher le câble réseau, tout continue de fonctionner.
Quels formats accepte-t-il ?
PNG, JPEG, WebP et SVG sont acceptés. Une source carrée donne le meilleur résultat, car l’image est mise à l’échelle et centrée : une bannière large se retrouve donc avec des bandes transparentes en haut et en bas. Le SVG est le format le plus adapté pour un logo, puisque chaque taille est redessinée depuis le vecteur plutôt qu’à partir d’un bitmap redimensionné. Quel que soit le fichier envoyé, gardez en tête que 16 pixels, c’est minuscule : un logo avec du texte devient illisible à cette taille, alors qu’une simple lettre ou un symbole s’en sort bien mieux.
Une fois les fichiers en place, les navigateurs mettent les favicons en cache longtemps, un rechargement forcé est parfois nécessaire pour voir la nouvelle icône apparaître. La page MDN sur les types de lien explique le rôle de chaque balise du snippet.