Générateur de favicon
Réponse courte
Créez favicon.ico, l'icône Apple touch et les icônes d'application web, ainsi que les balises HTML, à partir d'une seule image.
iOS affiche les parties transparentes de l'icône Apple touch en noir, ces deux icônes reçoivent donc un arrière-plan uni. Les autres icônes conservent la transparence.
Ce que ça fait
Crée un ensemble de favicons à partir d'une seule image : favicon.ico avec des icônes 16, 32 et 48 px, une icône Apple touch de 180 px, des icônes de 192 et 512 px pour le manifeste d'application web, une icône adaptative de 512 px, et les balises HTML à ajouter à vos pages. Un SVG envoyé est aussi inclus sous le nom icon.svg.
Pourquoi c'est important
Les navigateurs affichent le favicon dans les onglets et les favoris, les téléphones utilisent l'icône touch sur l'écran d'accueil, et Google Recherche peut afficher le favicon à côté de vos pages dans les résultats. Google ne l'affiche que lorsque l'icône est carrée, d'au moins 8×8 px (une taille supérieure à 48×48 px est recommandée) et explorable, tout comme la page d'accueil.
Comment ça fonctionne
-
Choisissez une image carrée, idéalement un SVG ou un PNG d'au moins 512×512 px
-
Choisissez une couleur d'arrière-plan pour l'icône Apple touch et l'icône adaptative
-
Votre navigateur dessine chaque taille et regroupe les plus petites dans favicon.ico
-
Téléchargez les fichiers, copiez les balises HTML et testez le résultat avec le test de favicon
Exemple d'entrée et de sortie
image : logo.svg arrière-plan : #ffffff
favicon.ico 16, 32, 48 px apple-touch-icon.png 180 px icon-192.png 192 px icon-512.png 512 px icon-512-maskable.png 512 px icon.svg SVG d'origine manifest.webmanifest icônes du manifeste <link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48"> <link rel="icon" href="/icon.svg" type="image/svg+xml"> <link rel="icon" href="/icon-192.png" type="image/png" sizes="192x192"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/manifest.webmanifest">
Qui l'utilise
-
Propriétaire de petite entreprise
Transformer un logo en tous les fichiers d'icônes dont un nouveau site a besoin.
-
Développeur web
Générer l'ensemble d'icônes et les icônes du manifeste pour une application web progressive.
-
Designer
Voir à quoi ressemble un logo à 16 px avant de le livrer.
Questions fréquentes
De quels fichiers ai-je besoin ?
La plupart des sites utilisent favicon.ico, une icône Apple touch, et des icônes de 192 et 512 px pour le manifeste d'application web. Une icône SVG est facultative ; les navigateurs qui la prennent en charge peuvent l'utiliser à n'importe quelle taille.
Pourquoi le fichier ICO contient-il des images PNG ?
Le format ICO peut stocker des images PNG, et tous les navigateurs actuels les lisent. Le fichier contient des versions en 16, 32 et 48 px afin que chaque navigateur puisse choisir la taille dont il a besoin.
Qu'est-ce qu'une icône adaptative ?
Une icône avec de l'espace supplémentaire autour du logo, afin qu'Android puisse la découper en cercle ou en une autre forme. L'outil garde toute l'image à l'intérieur de la zone de sécurité, afin que rien ne soit coupé.
Pourquoi l'icône Apple touch et l'icône adaptative reçoivent-elles une couleur d'arrière-plan ?
iOS affiche les parties transparentes de l'icône touch en noir, et une icône adaptative doit remplir toute sa forme, elles reçoivent donc toutes les deux la couleur que vous choisissez. Les autres icônes conservent la transparence.
Mon image est-elle envoyée en ligne ?
Non. Les icônes sont dessinées dans votre navigateur, et l'image ne quitte jamais votre appareil.