WebyTooly

Générateur de favicon

Envoie ton logo et télécharge toutes les tailles de favicon dont un site moderne a besoin, y compris le favicon.ico.

Espacio publicitario

Glisse ton logo ici ou clique pour le choisir

L'idéal est une image carrée de 512 × 512 px ou plus

Appliquée uniquement si ton image comporte des zones transparentes. Laisse sur transparent pour garder le canal alpha.

Espacio publicitario

Comment les favicons sont générés

On commence par découper le plus grand carré centré de ton image, pour qu'un logo panoramique ne soit pas écrasé. Ce carré est ensuite redessiné dans un canvas de chaque taille et exporté en PNG.

côté du recadrage = min(largeur, hauteur)

Le fichier favicon.ico est construit avec notre propre encodeur ICO : un en-tête ICONDIR, une entrée de répertoire par taille et les PNG de 16, 32 et 48 px intégrés tels quels. Depuis Windows Vista, le format ICO accepte des PNG à l'intérieur, et tous les navigateurs actuels les lisent.

Les grandes tailles ne sont pas décoratives : 180 px est l'icône qu'iOS utilise quand on ajoute le site à l'écran d'accueil, et 192 et 512 px sont réclamées par le manifeste d'une PWA.

Exemple pratique

Un logo de 1024 × 768 px est recadré sur le carré central de 768 × 768 px, d'où sortent les six PNG et le .ico, tous centrés et sans déformation.

Questions fréquemment posées

Quelle taille doit faire mon image de départ ?
Plus elle est grande, mieux c'est : à partir de 512 × 512 px, toutes les tailles sortent nettes. Depuis une petite image, les grandes tailles seront pixelisées.
Ai-je encore besoin du favicon.ico si j'ai les PNG ?
C'est toujours recommandé : certains navigateurs et beaucoup d'agrégateurs le demandent par défaut à la racine du domaine, sans lire les balises HTML.
La transparence est-elle conservée ?
Oui, sauf si tu choisis une couleur de fond. Les PNG générés gardent le canal alpha et le .ico intègre ces mêmes PNG 32 bits.
Où placer les fichiers ?
Le favicon.ico à la racine du site et les PNG où tu veux, référencés avec les balises link affichées après la génération.

Calculatrices connexes