Générateur de favicon
Une seule image devient favicon.ico et les icônes PNG dont un site a besoin, avec les balises à coller.
Déposez une image pour commencer
Fonctionne dans votre navigateur. Aucun envoi.
Une favicon n'est plus un seul fichier. Les navigateurs vont toujours chercher `/favicon.ico` que vous la déclariez ou non, iOS veut un PNG de 180 pixels pour un raccourci sur l'écran d'accueil, et un manifeste d'application web réclame du 192 et du 512. Tout cela est écrit ici à partir d'une seule image source, pour que le jeu soit cohérent au lieu d'avoir été assemblé sur trois ans avec ce qui traînait.
Le `.ico` contient les versions 16, 32 et 48 pixels dans un seul fichier — c'est à cela que sert ce format : le navigateur choisit la taille qu'il lui faut pour l'onglet, la barre de favoris ou le raccourci du bureau sans requête supplémentaire. Il est écrit ici octet par octet plutôt que par un service, et chaque version est dessinée depuis l'original en pleine résolution, pas réduite depuis celle du dessus.
Le recadrage prend le carré central, parce que partout où une icône apparaît, c'est un carré. Un logo large perdra ses extrémités : il vaut donc mieux fournir un symbole qu'un logotype, car à 16 pixels un nom est de toute façon illisible. La transparence est conservée sauf si vous mettez une couleur derrière, ce qui vaut le coup pour un logo sombre qui disparaîtrait sinon dans un thème sombre.
Étape par étape
- 1Déposez un logo ou une image à peu près carrée.
- 2Choisissez ce qui va derrière : transparent, blanc ou noir.
- 3Téléchargez le jeu et copiez les trois balises link dans votre head.
Questions
De quelles tailles ai-je réellement besoin ?
Un favicon.ico contenant 16, 32 et 48, un apple-touch-icon de 180 pixels pour iOS, et des PNG de 192 et 512 pour le manifeste. C'est le jeu écrit ici, et il couvre les navigateurs et les téléphones actuels.
Où placer les fichiers ?
À la racine du site, à côté d'index.html, puis les trois balises link vont dans le head. favicon.ico est trouvé même sans balise, les autres doivent être déclarés.
Puis-je utiliser une photo ?
Vous pouvez, mais ce sera une tache à 16 pixels. Seul un symbole simple, très contrasté et peu détaillé, survit à la plus petite taille.
Mon logo est large — que se passe-t-il ?
Il est recadré sur son carré central, donc les extrémités sont perdues. Préparez une version carrée, ou utilisez le symbole du logo plutôt que le bloc complet.