Générateur de favicon : créer favicon.ico, des PNG et l’icône Apple Touch
Créez favicon.ico, des PNG, une icône Apple Touch et un manifeste web à partir d’une image ou d’un texte dans le navigateur, avec les balises HTML à copier.
Déposez une image ici ou choisissez-en une
PNG, JPG, WebP, GIF (première image), BMP ou SVG. Une image carrée d’au moins 512 × 512 pixels donne les meilleurs résultats.
Le texte est dessiné avec les polices installées sur cet appareil : les lettres et les emoji peuvent donc avoir un autre aspect sur un autre ordinateur ou téléphone. Les fichiers PNG et ICO téléchargés conservent l’aspect que vous voyez ici.
Aperçu
Les tailles 16, 32 et 48 sont affichées en taille réelle ; les icônes plus grandes sont affichées en plus petit. Le damier signale les zones transparentes.
Dans un onglet de navigateur
Une barre d’onglets simplifiée, en thème clair et en thème sombre. Vérifiez que l’icône est visible dans les deux : un logo foncé sur fond transparent peut disparaître sur une barre d’onglets sombre.
Fichiers
Certains appareils Apple affichent en noir les parties transparentes d’une icône d’écran d’accueil : apple-touch-icon.png est donc enregistré sans transparence, et les zones transparentes sont remplies avec cette couleur. Le réglage de forme ne s’y applique pas, car l’iPhone et l’iPad arrondissent eux-mêmes les coins des icônes de l’écran d’accueil.
Utilisé dans les balises HTML et le manifeste. « / » désigne le dossier racine du site web.
Les réglages de fond, de forme, de marge intérieure et de recadrage ne s’appliquent pas à favicon.svg.
Les navigateurs peuvent utiliser la couleur du thème pour teinter la barre d’adresse ou le titre de la fenêtre. La couleur de fond de l’application s’affiche pendant le démarrage d’une application web installée.
Choisissez une image ou passez au mode texte pour commencer.
Contenu de site.webmanifest
Remarques
- Téléversez les fichiers dans le dossier racine de votre site web (le dossier qui contient la page d’accueil), ou indiquez un autre dossier ci-dessus pour que les chemins du HTML et du manifeste correspondent.
- favicon.ico contient des images de 16 × 16, 32 × 32 et 48 × 48 pixels stockées sous forme de données PNG. Les navigateurs actuels et Windows Vista ou version ultérieure savent les lire ; certains programmes très anciens ne lisent que les images d’icône non compressées.
- Les petites sources, comme une image de 64 × 64 pixels, sont agrandies pour les grandes icônes et paraissent floues. Utilisez si possible une image d’au moins 512 × 512 pixels ou un fichier SVG.
- Les icônes texte utilisent les polices installées sur l’appareil sur lequel vous les créez. Les fichiers PNG et ICO conservent cet aspect, mais recréer l’icône sur un autre appareil peut donner un résultat différent.
- Les fichiers SVG sont dessinés par votre navigateur. Les images, polices ou styles qu’un fichier SVG charge depuis d’autres fichiers ou sites web ne sont pas chargés et peuvent manquer sur les icônes.
- Les navigateurs conservent longtemps les favicons dans leur cache. Après le remplacement d’un favicon, l’ancien peut encore apparaître pendant un certain temps ; une actualisation forcée, une fenêtre de navigation privée ou un nom de fichier modifié dans le HTML peuvent aider.
- Les images et le texte sont traités dans votre navigateur et ne sont pas envoyés à LeedyBox.
Mode d'emploi
- Choisissez Image et sélectionnez ou déposez votre logo, ou choisissez Texte ou emoji et saisissez jusqu’à trois caractères.
- Réglez le fond, la forme et la marge intérieure, puis vérifiez les aperçus et l’onglet de navigateur en thème clair et en thème sombre.
- Si vous le souhaitez, saisissez le nom du site web, le nom court, la couleur du thème et le dossier où les fichiers seront stockés.
- Cliquez sur « Créer les fichiers favicon », puis téléchargez les fichiers un par un ou tous ensemble dans favicon-package.zip.
- Téléversez les fichiers sur votre site web et collez les balises HTML copiées dans la section head de vos pages.
Questions fréquentes
Mes images sont-elles envoyées sur un serveur ?
Non. L’image ou le texte est dessiné et converti dans votre navigateur, et les fichiers sont créés sur votre appareil. Rien n’est envoyé à LeedyBox. Seule la bibliothèque ZIP est téléchargée au chargement de la page, depuis leedybox.com même.
Quelles images puis-je utiliser, et y a-t-il des limites ?
Les fichiers PNG, JPG, WebP, GIF (première image), BMP et SVG. Les fichiers SVG peuvent peser jusqu’à 10 Mo. Les très grandes photos (au-delà d’environ 50 mégapixels) peuvent échouer sur un téléphone en raison de la mémoire qu’elles demandent. Une image carrée d’au moins 512 × 512 pixels, ou un fichier SVG, donne les résultats les plus nets.
Pourquoi mon favicon paraît-il flou ou difficile à lire ?
Une icône de 16 pixels offre très peu de place. Des formes simples, un fort contraste et une ou deux lettres fonctionnent mieux que des logos détaillés ou un texte long. Les petites images sources sont agrandies pour les grandes tailles et paraissent floues. Vérifiez les aperçus et essayez une marge intérieure plus petite ou une version simplifiée de votre logo.
Desquels de ces fichiers ai-je besoin ?
favicon.ico et les fichiers PNG de 16 et 32 pixels sont utilisés par les navigateurs de bureau, et apple-touch-icon.png par l’iPhone et l’iPad. Les icônes de 192 et 512 pixels et site.webmanifest servent lorsque le site est ajouté à un écran d’accueil ou installé comme application web. Utiliser tous ces fichiers avec les balises HTML couvre les cas courants.
Pourquoi apple-touch-icon.png n’a-t-il pas de transparence ?
Certains appareils Apple affichent en noir les parties transparentes d’une icône d’écran d’accueil. L’outil remplit donc les zones transparentes avec la couleur que vous choisissez (blanc par défaut) et laisse les coins carrés, car l’iPhone et l’iPad les arrondissent eux-mêmes.