Générateur de favicon
Créez un favicon.ico, une icône Apple Touch, des icônes Android et un manifeste web à partir d’une seule image, dans un seul ZIP.
Le générateur de favicon transforme un logo ou une image en l’ensemble des fichiers d’icône dont un site web a besoin. Il rogne l’image en un carré centré et crée un favicon.ico (en 16, 32 et 48 pixels), des icônes PNG de 16 à 512 pixels, un apple-touch-icon.png de 180 × 180 et un fichier site.webmanifest, le tout dans un seul ZIP. La page affiche aussi les balises link HTML à coller dans la section head de votre site.
Installer vos favicons
Décompressez le pack dans le dossier racine de votre site, puis ajoutez ces balises dans la section <head> de votre page :
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Comment utiliser Générateur de favicon
- 1
Importez votre logo
Déposez ou choisissez une image PNG, JPG, SVG ou HEIC. Une image carrée d’au moins 512 × 512 pixels donne le meilleur résultat.
- 2
Vérifiez qu’il est centré
Les icônes sont découpées au centre de l’image. Si votre logo est décentré ou si l’image n’est pas carrée, rognez-la d’abord en 1:1 avec Rogner une image.
- 3
Téléchargez le pack favicon
Cliquez sur Télécharger le pack favicon (ZIP) pour obtenir tous les fichiers d’icône et le manifeste.
- 4
Ajoutez-le à votre site
Envoyez les fichiers dans le dossier racine de votre site, puis cliquez sur Copier le code et collez les balises HTML dans la section head de vos pages.
Ce que fait l’outil
- favicon.ico multi-tailles
- Un seul fichier ICO qui contient des icônes de 16 × 16, 32 × 32 et 48 × 48 pour les onglets et les favoris.
- Des icônes PNG pour chaque appareil
- Des fichiers PNG en 16, 32, 48, 64, 128, 192 et 512 pixels, plus un apple-touch-icon.png de 180 × 180.
- Manifeste d’application web
- Un fichier site.webmanifest qui pointe vers les icônes de 192 et 512 pixels, pour Android et les applications web installables.
- Petites tailles nettes
- Les icônes sont réduites en plusieurs étapes à partir de l’image complète, ce qui rend les versions de 16 et 32 pixels plus nettes.
- HTML prêt à coller
- Copiez en un clic les balises link des icônes et du manifeste.
Questions
Quelle taille doit faire l’image de mon favicon ?
Utilisez une image carrée d’au moins 512 × 512 pixels pour que la plus grande icône reste nette. Les formes simples et les couleurs vives restent reconnaissables en 16 × 16.
Quels fichiers contient le ZIP ?
favicon.ico, de favicon-16x16.png à favicon-512x512.png (16, 32, 48, 64, 128, 192 et 512), apple-touch-icon.png en 180 × 180, et site.webmanifest.
Où dois-je placer les fichiers du favicon ?
Envoyez-les dans le dossier racine de votre site web, au même endroit que votre page d’accueil. Collez ensuite les balises HTML affichées sur cette page dans la section head de chaque page.
Pourquoi une partie de mon logo est-elle coupée ?
L’outil prend le plus grand carré centré de votre image. Si le logo est large ou décentré, rognez-le en carré avec un peu d’espace autour avant de générer les icônes.
Puis-je utiliser un logo SVG ?
Oui. Le SVG est dessiné comme une image et enregistré en fichiers PNG et ICO. Le ZIP ne contient pas de favicon SVG.
Dois-je modifier le fichier manifeste ?
Oui. site.webmanifest utilise le nom provisoire App et des couleurs de thème sombres. Ouvrez-le dans un éditeur de texte et modifiez name, short_name et les couleurs pour qu’ils correspondent à votre site.