Générateur de favicon — ICO, PNG et Apple Touch Icon
Transformez une image en un jeu complet de favicons : favicon.ico, icônes PNG, apple-touch-icon et manifeste d'application web.
L'apple-touch-icon est toujours opaque. Lorsque le nom de l'application est vide, le manifeste utilise le nom du fichier image.
Aperçu
Fichiers dans le ZIP
Comment créer un favicon
- Choisissez une image carrée, idéalement d'au moins 512 par 512 pixels, au format PNG, JPG, WebP ou SVG.
- Choisissez comment adapter les images non carrées : contain les complète avec la couleur de fond, cover les recadre au centre.
- Définissez les couleurs de fond et de thème, la marge intérieure et si les petites icônes gardent un fond transparent.
- Saisissez le nom et le nom court que le manifeste d'application web doit contenir, puis vérifiez les aperçus en direct.
- Téléchargez le ZIP avec tous les fichiers, ou récupérez favicon.ico et apple-touch-icon.png séparément, et copiez l'extrait HTML.
Quand cela aide
- Donner un favicon à un nouveau site sans ouvrir d'éditeur d'images.
- Remplacer un favicon manquant ou flou qui s'affiche comme une icône de page vide dans les onglets.
- Ajouter un apple-touch-icon pour qu'un site soit correct lorsqu'il est enregistré sur l'écran d'accueil d'un iPhone.
- Préparer les icônes Android et un manifeste pour une application web progressive.
- Transformer un logo en un jeu d'icônes soigné avec une marge régulière à chaque taille.
Questions fréquentes
Quelles tailles le générateur produit-il ?
Il écrit favicon.ico avec des images de 16, 32 et 48 pixels à l'intérieur, des fichiers séparés favicon-16x16.png et favicon-32x32.png, un apple-touch-icon.png de 180 par 180, et des icônes Android de 192 et 512 pixels.
Pourquoi l'apple-touch-icon est-il toujours opaque ?
iOS n'affiche pas la transparence dans une icône d'écran d'accueil, donc un PNG transparent apparaîtrait avec un bloc noir ou blanc derrière. Le générateur remplit ce fichier avec votre couleur de fond et laisse les petites tailles de favicon transparentes si vous le souhaitez.
Que mettre dans le manifeste ?
Utilisez le nom complet du site ou de l'application et un nom court d'environ douze caractères, car c'est le nom court qui apparaît sous l'icône sur un téléphone. La couleur de thème teinte la barre du navigateur et la couleur de fond remplit l'écran de démarrage.
Puis-je utiliser un logo SVG ?
Oui. Le SVG est rastérisé à 512 pixels de large et son rapport d'aspect provient des attributs de largeur et de hauteur ou du viewBox, donc un logo carré reste carré.
Où placer les fichiers sur mon serveur ?
Placez-les à la racine du site à côté de index.html, pour que les chemins de l'extrait comme /favicon.ico et /site.webmanifest fonctionnent. Si vous les gardez dans un sous-dossier, modifiez les valeurs href de l'extrait en conséquence.
Mon image est-elle envoyée quelque part ?
Non. L'image est décodée et dessinée sur un canvas dans votre navigateur, et le ZIP est assemblé en mémoire, donc rien n'est envoyé à un serveur.