Générateur de favicons
Créer un pack favicon complet depuis un SVG, PNG ou JPG
Transformez un logo SVG, PNG ou JPG en favicon.ico, fichiers PNG pour navigateur, icône Apple Touch, icônes Android Chrome, site.webmanifest et balises HTML prêtes à coller. Téléchargez le pack complet au format ZIP, généré localement dans votre navigateur.
Modification des valeurs par défaut pour les nouveaux fichiers
Ajoutez un logo pour le voir à toutes les tailles de favicon.
Sortie
head-tags.html
<link rel="icon" href="/favicon.ico"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">
Placez tous les fichiers sauf index.html dans le dossier depuis lequel votre site est servi, puis collez ces balises dans le head de chaque page.
Aucun fichier pour le moment. Déposez des fichiers ci-dessus ou cliquez sur SÉLECTIONNER DES FICHIERS.
Qu'est-ce qu'un favicon ?
Un favicon est la petite icône qu'un navigateur affiche à côté du titre d'une page : dans l'onglet, dans les favoris, dans l'historique et dans les résultats de certains moteurs de recherche. À l'origine, c'était un unique favicon.ico de 16 × 16 placé à la racine du site. Aujourd'hui, le même rôle est assuré par un ensemble de fichiers à différentes tailles, car un onglet de navigateur, un raccourci sur l'écran d'accueil et une invite d'installation affichent l'icône à des échelles très différentes.
Pourquoi un paquet de favicons plutôt qu'un seul fichier
Un simple favicon.ico fonctionne toujours, mais il ne suffit plus à lui seul. Les onglets du navigateur lisent l'entrée 16 ou 32 px du .ico, Safari réclame un apple-touch-icon de 180 px quand une page est ajoutée à l'écran d'accueil (Home Screen), et Android Chrome lit les PNG de 192 et 512 px d'un manifeste web pour son invite d'installation et son écran de démarrage. Les exporter un par un demande six exports, six occasions de recadrer différemment, et un manifeste écrit à la main. Les générer à partir d'une seule source garde toutes les tailles identiques et ne demande qu'un seul fichier déposé.
Comment générer un paquet de favicons
- 1
Déposez votre logo, ou cliquez sur SÉLECTIONNER DES FICHIERS, pour l'ajouter. SVG, PNG, JPG, WebP, GIF, BMP, AVIF et TIFF fonctionnent tous, jusqu'à 40 à la fois.
- 2
Réglez l'arrière-plan, le rayon des coins, le padding, l'échelle et l'alignement, puis saisissez le nom de l'application et le nom court qui iront dans le manifeste. Chaque taille est redessinée à mesure que vous les changez.
- 3
Cliquez sur TOUT ENREGISTRER pour télécharger favicon-package.zip, puis collez les quatre balises link de l'onglet Balises HTML dans le head de chaque page.
Confidentialité : vos fichiers ne quittent pas le navigateur
La conversion s'exécute localement dans votre navigateur à l'aide de JavaScript et WebAssembly. Il n'y a pas de téléchargement de fichiers ni de conversion côté serveur, donc les fichiers que vous ajoutez restent sur votre appareil.
Le traitement local permet de protéger les logos confidentiels, les documents internes et les illustrations client inédites. Les pages et le code de conversion sont mis en cache au fur et à mesure que vous les utilisez, afin que les outils que vous avez déjà ouverts puissent continuer à fonctionner sans connexion réseau.
Questions fréquentes
Quels fichiers vais-je obtenir, et où les placer ?
favicon.ico (avec le 16, le 32 et le 48 px dans un seul fichier), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, android-chrome-192x192.png, android-chrome-512x512.png, site.webmanifest et un index.html qui contient les balises. Copiez tout sauf index.html dans le dossier depuis lequel votre site est servi, puis collez les quatre balises link dans le head de chaque page.
Puis-je utiliser un logo PNG ou JPG au lieu d'un SVG ?
Oui. SVG, PNG, JPG, WebP, GIF, BMP, AVIF et TIFF fonctionnent tous. Un SVG reste la meilleure source, car chaque taille est dessinée à partir des vecteurs au lieu d'être rééchantillonnée. Un logo matriciel plus petit que 512 px est agrandi pour les plus grandes icônes et paraîtra flou ; la ligne du fichier vous prévient dans ce cas.
Ai-je encore besoin de favicon.ico si je fournis des icônes PNG ?
Gardez-le. C'est le fichier que les navigateurs et les robots d'indexation demandent à la racine du site quand aucune balise ne les dirige ailleurs, et c'est le seul à contenir plusieurs tailles dans un seul fichier. Les entrées PNG couvrent les navigateurs qui les préfèrent, et le manifeste couvre l'invite d'installation d'Android.