Générateur de favicon
Transformez votre logo en toutes les icônes dont un site a besoin : le favicon de l’onglet, l’icône de l’écran d’accueil de l’iPhone et les icônes d’appli Android. Récupérez-les dans un seul ZIP, avec le code HTML à coller.
Comment créer un favicon
- 1Choisissez votre logo. Un SVG ou un PNG carré de 512 px ou plus donne le meilleur résultat.
- 2Choisissez de faire tenir toute l’image dans un carré ou de la recadrer, ainsi que le fond.
- 3Vérifiez les aperçus, y compris le rendu de l’icône dans un onglet de navigateur.
- 4Téléchargez le ZIP, mettez ses fichiers dans le dossier racine de votre site, et collez le code HTML dans le <head> de vos pages.
Les icônes dont un site a vraiment besoin
Un site moderne n’a besoin que de quelques fichiers. favicon.ico contient des versions de 16, 32 et 48 px pour les onglets, les favoris et Windows ; tous les navigateurs le cherchent, même sur les pages qui ne le mentionnent pas. apple-touch-icon.png (180 px) sert quand quelqu’un ajoute votre site à l’écran d’accueil d’un iPhone ou d’un iPad. icon-192.png et icon-512.png, déclarées dans site.webmanifest, servent sur Android et quand votre site est installé comme une appli.
Si vous partez d’un SVG, le ZIP contient aussi icon.svg. La plupart des navigateurs récents l’utilisent pour l’icône d’onglet, et il reste net sur tous les écrans. Le code HTML le mentionne déjà et garde favicon.ico en secours pour les navigateurs qui en ont besoin.
Les petites icônes demandent des formes simples. À 16 px, les traits fins et le petit texte disparaissent : si votre logo complet comporte un nom, essayez juste son symbole ou sa première lettre. Regardez l’aperçu de l’onglet au-dessus des icônes : il montre l’icône de 16 px à sa taille réelle, dans un onglet clair et un onglet sombre.
Pourquoi utiliser Lilypad
100 % privé
Les fichiers sont traités directement dans votre navigateur. Rien n’est jamais envoyé sur un serveur.
Toutes les tailles d’un coup
favicon.ico, l’icône Apple Touch et les icônes d’appli Android à partir d’une seule image, dans un seul ZIP.
Rapide et gratuit
Utilise tous les cœurs de votre processeur. Sans inscription, sans filigrane, sans limite de fichiers.
Questions fréquentes
Où mettre les fichiers du favicon ?
Dans le dossier racine de votre site, celui qui contient la page d’accueil, pour qu’ils soient accessibles à /favicon.ico, /apple-touch-icon.png et ainsi de suite. Collez ensuite les lignes HTML dans la section <head> de chaque page, ou dans le modèle de votre site.
Pourquoi mon nouveau favicon ne s’affiche-t-il pas ?
Les navigateurs gardent les favicons en cache de façon très tenace. Ouvrez votre site dans une fenêtre privée, ou ajoutez « ?v=2 » aux liens d’icône dans votre HTML, pour voir le nouveau.
Puis-je utiliser une photo JPG ou HEIC ?
Oui, n’importe quelle image fonctionne. Mais une photo est rarement lisible à 16 px : un logo ou un symbole simple sur fond uni fait en général un meilleur favicon.
Mes fichiers sont-ils envoyés quelque part ?
Non. Tout se passe dans votre navigateur. Vos fichiers ne quittent jamais votre appareil, et nous ne les voyons jamais.