La plupart des conseils de favicon sont une liste d'une douzaine de tailles PNG copiées à partir d'un générateur qui a été écrit en 2014 La plupart de ces tailles ne font plus rien Ce dont un site a besoin aujourd'hui est court : un favicon.ico pour les navigateurs et les outils qui le recherchent encore, une icône évolutive ou haute résolution pour tout ce qui est moderne, et une icône tactile pour les téléphones La partie qui fait trébucher les gens est l'.ico lui-même, car ce n'est pas une image avec une extension impaire C'est un petit conteneur contenant plusieurs images.
Ce guide couvre la façon dont un fichier ICO est construit, quelles tailles appartiennent à un favicon.ico et pourquoi, quels autres fichiers d'icônes un site a besoin à côté, et les erreurs qui rendent une icône douce ou illisible dans un onglet du navigateur. Il se trouve sous le hub d'outils d'image4, et chaque taille indiquée pour le convertisseur Toolz provient de son code source.
tl;dr : Un fichier ICO est un conteneur : un répertoire court suivi de plusieurs images carrées, une par taille, à partir de laquelle le navigateur ou le système d'exploitation sélectionne la correspondance la plus proche Pour un favicon.ico, incluez 16, 32 et 48 px, et ajoutez 256 px si le même fichier double d'icône Windows Chaque entrée peut contenir au plus 256 x 256 pixels A côté, déclarez une icône SVG ou grand PNG et un 180 x 180
apple-touch-icon. le Convertisseur PNG en ICO écrit 16, 32, 48 et 256 entrées px en PNG avec transparence, côté client, rien téléchargé, gratuit, pas d'inscription.
Qu'est-ce qu'un fichier ICO ?
Un fichier ICO est le format d'icône Windows : un en-tête, un répertoire répertoriant chaque image à l'intérieur et les données d'image pour chaque entrée. Microsoft a documenté la mise en page dans son Article technique Icônes« , et c'est le format pour les icônes de programme, de raccourci et de dossier Windows depuis les premières versions de Windows. Les navigateurs l'ont adopté pour les favicons à la fin des années 1990, c'est pourquoi le fichier sur la plupart des sites Web est toujours appelé » favicon.ico.
Le répertoire est ce qui le rend différent d'un PNG ou d'un JPG. Un logiciel qui a besoin d'une icône à 16 pixels lit le répertoire, trouve l'entrée la plus proche de 16 et dessine celle-là Un onglet, une liste de signets, un bouton de barre des tâches et un raccourci de bureau peuvent chacun prendre une image différente du même fichier. Cela permet à un concepteur de fournir une marque simplifiée pour les petites tailles et une marque détaillée pour les grandes tailles, au lieu de laisser une seule image être mise à l'échelle partout.
Le format se décline par deux types de médias Listes IANA image/vnd.microsoft.icon, alors que la plupart des serveurs et navigateurs utilisent l'ancien image/x-icon. Les deux fonctionnent pour un favicon.
Comment un fichier ICO est-il structuré ?
Un fichier ICO commence par un en-tête de 6 octets, suivi d'une entrée de répertoire de 16 octets par image, suivi des données de l'image Tous les nombres sont petit-boutiste.
ICONDIR (6 bytes)
reserved 2 bytes always 0
type 2 bytes 1 = icon (2 = cursor)
count 2 bytes number of images
ICONDIRENTRY (16 bytes, repeated count times)
width 1 byte pixels; 0 means 256
height 1 byte pixels; 0 means 256
colorCount 1 byte palette size; 0 when there is no palette
reserved 1 byte 0
planes 2 bytes 1
bitCount 2 bytes bits per pixel, e.g. 32
bytesInRes 4 bytes size of this image's data
imageOffset 4 bytes where this image's data starts in the file
Image data (one block per entry)
either a BMP-style DIB (without the file header)
or a complete PNG file
Deux détails dans cette disposition expliquent la plupart des éléments déroutants concernant les icônes.
Le plafond de 256 pixels provient d'un seul octet. Largeur et hauteur sont chacune stockées dans un octet, qui peut contenir de 0 à 255 Le format réutilise 0 pour signifier 256, et il n'y a aucun moyen d'exprimer quoi que ce soit de plus grand Une entrée 512 x 512 ne peut pas exister dans une ICO valide, quoi qu'un générateur revendique.
Les entrées peuvent être PNG. Les premières icônes stockaient chaque image sous forme de bitmap non compressé avec un masque de transparence séparé de 1 bit. Depuis Windows Vista, une entrée peut plutôt contenir un fichier PNG complet, qui est beaucoup plus petit dans les grandes tailles et transporte un canal alpha approprié. Une icône de 256 x 256 stockée sous forme de bitmap non compressé de 32 bits est d'environ 256 Ko ; la même image que PNG est généralement une fraction de cela.
Le convertisseur Toolz écrit la variante moderne Son constructeur ICO définit le type 1, une entrée de répertoire par taille avec les plans 1 et 32 bits par pixel, écrit 256 comme 0, et stocke chaque entrée comme un PNG avec son canal alpha, lui demandant une taille en dehors de 1 à 256 est refusé avant que quoi que ce soit ne soit écrit, car le répertoire n'a aucun moyen de l'enregistrer.
Quelle taille doit avoir un favicon ?
Un favicon.ico doit contenir 16 x 16, 32 x 32 et 48 x 48 images, et une image 256 x 256 si vous voulez aussi que le fichier fonctionne comme une icône Windows Au-delà du .ico, les navigateurs modernes préfèrent un SVG ou un grand PNG déclaré avec une balise de lien, et les téléphones utilisent une icône tactile séparée.
Ce tableau mappe chaque taille à l'endroit où il est utilisé Le comportement exact varie avec le navigateur, le système d'exploitation et la mise à l'échelle de l'affichage, alors traitez-le comme le cas commun :
| Taille | Où ça se pointe | Besoin de favicon.ico? |
|---|---|---|
| 16x16 | Onglets du navigateur, barre d'adresse, signets sur les affichages standards | oui |
| 32x32 | Onglets sur les écrans haute densité, la barre des tâches Windows et les raccourcis | oui |
| 48x48 | Raccourcis de bureau Windows, vues d'icônes moyennes ; Google Search recommande d'aller plus grand que cela | oui |
| 256x256 | Vues d'icônes Windows grandes et extra grandes | Uniquement si utilisé comme icône Windows |
| 180 x 180 | Écran d'accueil pour iPhone et iPad (apple-touch-icon) |
Non, PNG séparée |
| 192 x 192 | Écran d'accueil Android, manifeste d'application Web | Non, PNG séparée |
| 512x512 | Écrans de manifeste, d'installation et de démarrage d'applications Web | Non, je ne peux pas entrer dans ICO |
| N'importe lequel (SVG) | Navigateurs modernes prenant en charge les icônes SVG, y compris les variantes en mode sombre | Non, séparez SVG |
Sur les résultats de recherche, Google' ; s lignes directrices favicon demandez une icône carrée et recommandez-en une de plus de 48 x 48 pixels, et Google la récupère à partir de l'icône déclarée sur votre page d'accueil. Un .ico qui dépasse 16 pixels est une raison courante pour laquelle une icône site' ; s semble floue à côté de son résultat de recherche.
De quels fichiers favicon un site a-t-il besoin ?
Un site a besoin de trois fichiers d'icônes et d'une entrée de manifeste pour couvrir chaque navigateur et appareil grand public Plus que cela est presque toujours des restes.
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">
{
"icons": [
{ "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
]
}
Chaque ligne a un travail :
favicon.icoest le repli. Le Norme HTML WHATWG permet aux navigateurs de demander/favicon.icodepuis la racine du site lorsqu'une page ne déclare aucune icône, et les lecteurs RSS, les robots d'exploration et les outils plus anciens le font toujours Gardez le fichier à la racine même si vous déclarez d'autres icônes.icon.svgest l'icône nette pour les navigateurs qui prennent en charge les favicons SVG. Il évolue à n'importe quelle densité et peut inclure unprefers-color-schemerequête multimédia pour que l'icône s'adapte aux onglets sombres Tous les navigateurs ne l'honorent pas, c'est pourquoi le .ico reste.apple-touch-icon.pngà 180 x 180, c'est ce qu'utilise iOS lorsque quelqu'un ajoute votre site à l'écran d'accueil Donnez-lui un arrière-plan opaque, puisque iOS ne conserve pas la transparence sur les icônes de l'écran d'accueil.- Les icônes du manifeste aux numéros 192 et 512 sont ce qu'utilisent les navigateurs basés sur Android et Chromium lorsqu'un site est installé en tant qu'application, comme décrit dans le Manifeste d'application Web W3C.
le sizes l'attribut sur le lien .ico compte d'une manière. Lorsqu'un navigateur voit un SVG et un .ico de taille, il peut indiquer que le SVG est le choix évolutif. Certaines configurations sont utilisées sizes="any" sur le .ico à la place, et certaines versions de Chrome ont répondu en choisissant le .ico plutôt que le SVG. Une taille spécifique évite cela.
Pourquoi mon favicon a-t-il l'air flou ou faux ?
La plupart des problèmes de favicon proviennent de l'image source, pas du format L'ICO stocke tout ce qui lui est donné à chaque taille, et la mise à l'échelle ne peut aller que bien dans une seule direction.
| Symptôme | Cause | Correction |
|---|---|---|
| Entrée douce et tachée de 256 px | Source inférieure à 256 px, elle a donc été étirée | Commencez à partir d’une exportation 512 x 512 ou plus |
| Logo écrasé ou étiré | Source non carrée étirée au carré | Cultivez ou pad en carré avant de convertir |
| Mot-symbole illisible dans l'onglet | Le texte dessiné à 16 px mesure deux pixels | Utilisez le symbole seul pour 16 et 32 px |
| Le contour fin disparaît | Coups inférieurs à 1 px à petites tailles | Coups épais dans une variante de petite taille |
| Boîte blanche autour de l'icône | La source JPG n'a aucune transparence | Utiliser un PNG avec un canal alpha |
| L'ancienne icône continue de s'afficher | Les navigateurs cachent les favicons de manière agressive | Renommez le fichier ou ajoutez une chaîne de requête, puis actualisez-la |
| Aucune icône dans les résultats Google | Icône sous 48 px, bloquée par robots.txt, ou non sur la page d'accueil | Servez une icône plus grande depuis la page d'accueil et autorisez l'exploration |
La première ligne vaut la peine d'être épelée, car elle attrape aussi les concepteurs expérimentés Une source de 64 px convertie avec 256 ticked produit une entrée de 256 px qui est l'image de 64 px agrandie quatre fois C'est exactement l'entrée des vues Windows haute densité et des grands raccourcis montrent La réduction d'échelle d'une grande source est la direction qui semble bonne.
La troisième ligne est une question d'arithmétique Une icône 16 x 16 a 256 pixels au total Un mot-symbole de cinq lettres pressé dans cette largeur obtient environ trois pixels par lettre, et l'anticrénelage transforme ceux-ci en taches grises Presque tous les sites bien connus utilisent une seule lettre ou un seul symbole pour son favicon pour cette raison.
Comment puis-je faire un favicon.ico à partir d'un PNG ?
Exportez un PNG carré d'au moins 512 x 512 pixels avec un fond transparent, convertissez-le en ICO avec les tailles dont vous avez besoin et vérifiez l'entrée 16 px en taille réelle avant de publier.
En utilisant le Convertisseur PNG en ICO sur Toolz :
- Lâchez le PNG. Plusieurs peuvent entrer à la fois ; chacun devient son propre .ico.
- Choisissez les tailles d'icônes Les quatre cases, 16, 32, 48 et 256 px, sont cochées pour démarrer Pour un favicon pur, décochez 256 pour alléger beaucoup le fichier, puisque l'entrée 256 est la majeure partie de son poids Si vous décochez les quatre, le convertisseur retombe sur l'écriture des quatre plutôt que de produire une icône vide.
- Appuyez sur Convertir en ICO. Un carré 512 x 512
logo.pngrevient commelogo.icoavec la note " ; Contient 16, 32, 48, 256 icônes px." ; - Téléchargez le fichier ou prenez un lot sous forme
converted-ico.zip.
Le convertisseur dessine votre image sur une toile à chaque taille, code chaque carré comme PNG, et les emballe le plus petit d'abord dans un .ico, tout côté client, de sorte que l'illustration ne quitte jamais l'appareil La transparence est conservée à chaque taille Une source non carrée est étirée pour remplir chaque carré plutôt que recadrée, et la note le dit : déposez un mot-symbole 1024 x 256 et il rapporte que l'image était 1024x256 et a été étirée sur des carrés des tailles que vous avez choisies Cette note est votre indice pour recadrer ou tamponner en premier.
Pour le meilleur résultat aux petites tailles, faites deux PNG : un détaillé pour 48 et 256 px et un symbole simplifié pour 16 et 32 px Convertissez chacun avec seulement ses tailles cochées Le convertisseur écrit une source par fichier, donc l'approche à deux images vous donne deux fichiers.ico ; utilisez le simplifié comme favicon.ico: puisque les navigateurs choisissent principalement les petites entrées et celles détaillées pour les icônes d'application ou de raccourci Windows.
Puis-je faire une ICO à partir d'un JPG ou d'un SVG ?
Oui aux deux, avec une mise en garde pour chacun.
Un JPG fonctionne, mais chaque entrée d'icône sort comme un carré rempli sans transparence, car JPEG n'a pas de canal alpha et aucun convertisseur ne peut en récupérer un. Le Convertisseur JPG en ICO rééchantillonne la photo dans les mêmes carrés de 16, 32, 48 et 256 px Les photos perdent également presque tous les détails à 16 px, alors recadrez étroitement autour d'un seul sujet à contraste élevé et faites le recadrage carré avant de convertir Une photo de téléphone 4032 x 3024 convertie telle quelle est pressée horizontalement, et la note vous l'indique.
Un SVG est la meilleure source possible, puisqu'il n'a pas de résolution fixe et rend net à chaque taille d'entrée L'itinéraire dépend de la quantité de contrôle que vous souhaitez Le Convertisseur SVG en PNG rend le SVG à un PNG que vous pouvez inspecter et modifier en premier ; tout SVG dont le côté le plus long est sous 512 px est dessiné à 512, donc un SVG icône 24 x 24 donne toujours une source propre pour l'entrée 256. ou déposez le SVG directement dans le général Convertisseur d'images(en), qui accepte SVG, PNG, JPG et une douzaine d'autres formats, et choisit ICO comme cible pour le restituer et le packer en une seule étape.
| Source | Transparence dans l'ICO | Aiguïté à 256 px | Meilleur usage |
|---|---|---|---|
| SVG | entretenu | Clair, rendu à partir de vecteurs | Logos que vous avez sous forme vectorielle |
| PNG 512 px ou plus | entretenu | Droite | La plupart des favicons |
| PNG sous 256 px | entretenu | Doux à 256 | Décollez 256 ou réexportez plus grand |
| JPG | Aucun, carré rempli | Dépend de la taille de la source | Icônes basées sur des photos uniquement |
| ICO existante | entretenu | Reconstruit à partir de l'entrée que le navigateur décode | Modification de la taille d'un fichier transporté |
Un .ico existant peut également être renvoyé. Le convertisseur ne traite jamais ICO en ICO comme un nom renommé ; il reconstruit toujours le fichier aux tailles que vous cochez. C'est un moyen rapide de réduire un favicon gonflé à 16, 32 et 48, bien qu'il reconstruise à partir de la seule entrée décodée par le navigateur, alors commencez à partir de l'illustration originale si vous l'avez. SVG contre PNG explique pourquoi le maître vectoriel vaut la peine d'être conservé exactement pour ce type de réexportation.
Favicon.ico a-t-il encore de l’importance en 2026 ?
Oui, en guise de solution de repli Les navigateurs actuels utilisent les icônes SVG ou PNG que vous déclarez, mais la racine /favicon.ico c'est toujours ce que certains navigateurs, lecteurs de flux, outils de signets et robots d'exploration récupèrent lorsqu'ils ne trouvent aucune déclaration ou ne prennent pas en charge le type déclaré. Un manquant remplit également les journaux du serveur avec des 404, puisque ces requêtes arrivent, que le fichier existe ou non.
Ce qui n'a plus d'importance, c'est la longue queue des tailles héritées Les icônes tactiles distinctes de 57, 60, 72, 76, 114, 120, 144 et 152 pixels datent des anciennes versions iOS et sont couvertes par le seul fichier de 180 images de tuiles Windows déclaré via browserconfig.xml appartenait à Windows 8 et 10 Démarrer les tuiles de l'écran Ni l'un ni l'autre n'est nécessaire pour un nouveau site.
Voici le minimum pratique défini avec les tailles de fichiers à prévoir :
| Fichier | Taille du pixel | Poids typique | Obligatoire ? |
|---|---|---|---|
favicon.ico avec 16, 32, 48 |
16, 32, 48 | Quelques Ko | Oui, comme solution de repli |
icon.svg |
Évolutif | Sous 2 Ko pour une simple note | recommandé |
apple-touch-icon.png |
180 x 180 | 5 à 20 Ko | Oui, pour iOS |
icon-192.png, icon-512.png |
192, 512 | 10 à 60 Ko | Si le site a un manifeste |
La conversion des icônes dans le navigateur est-elle privée ?
Oui. Sur Toolz, le décodage, le redimensionnement, l'encodage PNG et l'emballage du .ico se produisent tous côté client, à l'intérieur de l'onglet du navigateur, donc aucune image n'est téléchargée et la page continue de fonctionner hors ligne une fois chargée. Les métadonnées et les profils de couleurs attachés à la source sont supprimés par l'étape de canevas, qui pour une icône est inoffensive.
Les images supérieures à 100 mégapixels et les fichiers vides sont refusés avec un message, et les sources SVG supérieures à 50 Mo sont refusées Les outils sont gratuits, sans inscription, avec une limite quotidienne sur les conversions.
