Convertisseur de favicon
Créez à partir d’une seule image matricielle les fichiers nécessaires pour ajouter un favicon à un site. Choisissez comment la source doit s’ajuster au canevas carré, réglez l’arrière-plan, puis téléchargez un ZIP contenant un ICO multirésolution, sept icônes PNG, un manifeste d’application web, la configuration des vignettes Windows et un extrait HTML prêt à copier dans l’en-tête. La conversion de l’image et la création du ZIP ont lieu localement dans votre navigateur.
Comment convertir une image en pack de favicon
-
1
Choisissez une image matricielle
Sélectionnez un PNG, JPEG ou WebP respectant les limites affichées de taille de fichier et de dimensions. Les fichiers SVG, GIF et AVIF ne sont pas acceptés.
-
2
Choisissez l’ajustement
Utilisez Remplir pour occuper tout le carré en rognant les bords, ou Contenir pour conserver l’image entière et ajouter une marge autour.
-
3
Réglez l’arrière-plan
Choisissez une couleur d’arrière-plan pour les pixels transparents et la marge créée par le mode Contenir, puis vérifiez les aperçus générés.
-
4
Téléchargez et installez
Téléchargez le ZIP, placez les icônes et fichiers de configuration sur votre site, puis copiez les balises de lien fournies dans l’en-tête du document.
Contenu du ZIP
| Élément du pack | Utilité |
|---|---|
favicon.ico |
Un conteneur ICO avec des versions de 16, 32, 48 et 256 px pour les navigateurs et logiciels qui demandent le chemin traditionnel du favicon |
favicon-16x16.png |
PNG compact pour les onglets de navigateur et les autres petits emplacements |
favicon-32x32.png |
Icône haute densité pour les onglets et les favoris |
favicon-48x48.png |
Taille supplémentaire pour le bureau et les raccourcis |
mstile-150x150.png |
PNG de 150 × 150 référencé par la configuration des vignettes Windows |
apple-touch-icon.png |
PNG de 180 × 180 pour les liens sur l’écran d’accueil Apple |
android-chrome-192x192.png |
Icône d’application de 192 × 192 référencée par le manifeste web |
android-chrome-512x512.png |
Icône d’application de 512 × 512 référencée par le manifeste web |
site.webmanifest |
Métadonnées JSON qui indiquent aux navigateurs compatibles les icônes de 192 et 512 px |
browserconfig.xml |
Configuration des vignettes Windows qui référence les icônes générées |
favicon-head.html |
Balises prêtes à copier qui relient une page à l’ICO, aux PNG, à l’icône Apple, au manifeste et à la configuration du navigateur |
Les fichiers ICO et PNG sont volontairement séparés. Les navigateurs et systèmes d’exploitation sélectionnent les icônes de différentes manières. Un pack complet couvre donc à la fois la requête traditionnelle /favicon.ico et les déclarations explicites d’icônes modernes.
Balises HTML pour l’en-tête
Le pack téléchargé comprend un extrait de cette forme :
<link rel="icon" href="/favicon.ico" sizes="any">
<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">
<meta name="msapplication-config" content="/browserconfig.xml">
Si les fichiers se trouvent dans un sous-dossier ou sur un hôte de ressources distinct, modifiez les chemins avant de coller les balises dans <head>. Les noms et chemins indiqués dans site.webmanifest et browserconfig.xml doivent correspondre aux fichiers que vous publiez.
Remplir, contenir et choisir l’arrière-plan
- Remplir occupe entièrement chaque sortie carrée. Une source large ou haute est rognée de façon égale sur les bords opposés, mieux vaut donc placer les éléments importants près du centre.
- Contenir conserve toute la source visible. L’espace inutilisé devient une marge dans la couleur d’arrière-plan choisie.
- Arrière-plan peut rester transparent ou utiliser une couleur unie personnalisée. En mode Contenir, ce choix détermine également la couleur de la marge autour de l’image. Vérifiez les aperçus sur des pages claires et sombres avant de publier.
Pour obtenir des petites icônes aussi nettes que possible, partez d’une image carrée simple d’au moins 512 × 512 pixels. Les caractères fins, les traits très minces et les petits détails risquent de disparaître dans la version de 16 px, même si la source est grande.
Limites d’entrée et mise en place
Ce convertisseur accepte uniquement les images matricielles PNG, JPEG et WebP. Il vérifie la signature de l’image et refuse les fichiers SVG, GIF, AVIF ainsi que tout autre format non indiqué. La source peut peser jusqu’à 20 Mio, sans dépasser 8 192 pixels de côté ni 24 mégapixels au total. Les dimensions sont contrôlées avant le décodage complet de l’image.
Après le téléchargement, extrayez le ZIP et envoyez les fichiers générés aux emplacements utilisés par l’extrait fourni. Les chemins relatifs à la racine, comme /favicon.ico, supposent que les fichiers sont accessibles depuis la racine du domaine actuel. Videz le cache du site ou du CDN lorsque vous remplacez un favicon existant, car les navigateurs conservent souvent les icônes plus longtemps que les ressources ordinaires d’une page.
Le manifeste inclus fournit les métadonnées des icônes, mais un manifeste et un jeu d’icônes ne suffisent pas à rendre un site installable en tant qu’application web progressive. L’installation dépend également de la page, de la sécurité du transport et des exigences propres à chaque navigateur.
Questions fréquentes
Vous pouvez utiliser un fichier PNG, JPEG ou WebP. Le convertisseur vérifie la signature du fichier au lieu de se fier uniquement à son nom, et refuse les formats SVG, GIF, AVIF et les autres formats.
Remplir agrandit l’image jusqu’à ce que le carré soit entièrement occupé, en rognant les bords de façon égale si le rapport n’est pas carré. Contenir conserve l’image entière et remplit l’espace restant du carré avec la couleur d’arrière-plan sélectionnée.
ICO est un conteneur capable de réunir plusieurs petites tailles dans un seul fichier de favicon traditionnel. Les PNG distincts donnent aux navigateurs et plateformes des ressources aux dimensions précises pour les onglets, les liens d’écran d’accueil et les icônes d’application. Conserver les deux améliore la couverture pratique.
Non. Le manifeste décrit les icônes d’application générées et les métadonnées d’affichage associées, mais l’installation dépend d’exigences supplémentaires du navigateur ainsi que de la façon dont le site est conçu et servi.
L’extrait fourni utilise des chemins relatifs à la racine. La solution la plus simple consiste donc à placer les fichiers extraits à la racine du domaine. Si vous utilisez un autre dossier ou un hôte de ressources, adaptez l’extrait ainsi que les chemins du manifeste et de la configuration du navigateur.
Non. Le traitement de l’image et la création du ZIP ont lieu dans votre navigateur. Dans le parcours en plusieurs étapes, un brouillon IndexedDB peut conserver l’image dans ce navigateur pendant 30 minutes au maximum afin de la transmettre d’une étape à l’autre. Ce transfert local n’est pas un envoi au serveur.
Outils similaires
Compresser GIF
Réduisez la taille d'un GIF animé dans le navigateur en diminuant les dimensions, en conservant moins d'images et en ajustant la qualité d'encodage. Prévisualisez la boucle avant le téléchargement.
Éditeur de photos
Éditeur de photos dans le navigateur avec recadrage, rotation, luminosité, contraste, saturation, filtres, texte superposé et export en JPG, PNG ou WebP.
SVG en PNG
Convertissez des fichiers SVG ou du balisage SVG en PNG dans votre navigateur, choisissez un facteur d’échelle et gardez des bords transparents nets.
Générateur de codes-barres
Créez des codes-barres 1D scannables en Code 128, Code 39, EAN-13, UPC-A, ITF-14 et Codabar. Exportez au format PNG, SVG ou PDF pour l'impression.
Générateur de mèmes
Créez des mèmes avec des modèles comme Drake, Distracted Boyfriend ou Doge, ou importez votre propre image. Texte haut/bas, police Impact, contour et ombre.
WebP en PNG
Convertissez des images WebP en PNG en conservant la transparence et une qualité au pixel près pour l’édition, l’impression et les anciens outils de design.