Générateur de Favicon, Icônes & Manifeste PWA
Générez un favicon.ico binaire (16x16, 32x32, 48x48), des icônes iOS Apple Touch, des icônes Android PWA avec zone de sécurité 80 % et site.webmanifest.
Outils en LigneZone de Sécurité d’Icône Masquable PWA & Géométrie
20 % minimum maintient votre logo dans le Cercle de Zone de Sécurité de 80 % sur Android
Console de Prévisualisation Multi-Plateforme en Direct
Simulation en temps réel pour les Résultats Google Search (SERP), Onglets de Navigateur, Écran d’Accueil iOS et Masques Android
Visualisez comment Google Search affiche votre favicon circulaire de 48×48 px à côté du fil d’Ariane de votre domaine.
Visualisez comment Google Search affiche votre favicon circulaire de 48×48 px à côté du fil d’Ariane de votre domaine.
La transparence est automatiquement remplacée par votre fond uni afin qu’iOS ne transforme jamais le canal alpha en noir.
Métadonnées du Manifeste d’Application Web (site.webmanifest)
<!-- Standard Favicon & Google Search (48x48 multiple) -->
<link rel="icon" href="/favicon.ico" sizes="48x48" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png" />
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
<!-- Apple iOS Home Screen -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<!-- Android & PWA Web App Manifest -->
<link rel="manifest" href="/site.webmanifest" />
<meta name="theme-color" content="#4f46e5" />Tableau Officiel des Dimensions de Favicon, Apple Touch Icon et Manifeste PWA
Spécifications techniques complètes conformes à Google Search Central, Apple iOS Human Interface Guidelines et W3C Web App Manifest
| Nom du Fichier | Résolution (px) | Standard d’Encodage | Plateforme Cible & Contexte | Règle de Conformité Technique |
|---|---|---|---|---|
| favicon.ico | 16×16, 32×32, 48×48 | Conteneur Binaire Microsoft ICONDIR | Navigateurs Classiques & Robot Google Search | Doit impérativement intégrer une couche binaire 48×48 px ; ne jamais renommer un simple fichier PNG en .ico. |
| favicon-16x16.png | 16×16 px | PNG RGBA 32 bits | Onglets de Navigateur Bureau Standard (1x) & Favoris | Silhouette à fort contraste indispensable pour la lisibilité sur 16 pixels. |
| favicon-32x32.png | 32×32 px | PNG RGBA 32 bits | Onglets de Navigateur Écrans Retina (2x HiDPI) | Icône d’onglet principale sur les moniteurs haute densité modernes. |
| favicon-48x48.png | 48×48 px | PNG RGBA 32 bits | Résultats de Recherche Google (SERP) Mobile & Bureau | Seuil minimal exigé par Google Search Central (multiple exact de 48 px : 48×48, 96×96, 144×144). |
| favicon-96x96.png | 96×96 px | PNG RGBA 32 bits | Affichage Google SERP Haute Densité & Raccourcis Bureau | Multiple 2x de 48 px recommandé pour un masque circulaire parfaitement net dans Google. |
| apple-touch-icon.png | 180×180 px | PNG Opaque 24 bits | Écran d’Accueil Apple iPhone & iPad (Web Clips) | Exige un arrière-plan opaque ; iOS remplace tout pixel transparent par du noir pur (#000000). |
| android-chrome-192x192.png | 192×192 px | PNG 32 bits (purpose: any) | Écran d’Accueil & Tiroir d’Applications Android | Critère obligatoire des audits Google Lighthouse pour l’installation PWA. |
| android-chrome-512x512.png | 512×512 px | PNG 32 bits (purpose: any) | Écran de Lancement (Splash Screen) Android PWA & WebAPK | Ressource maîtresse haute résolution requise pour générer l’écran d’accueil de l’application. |
| maskable-icon-512x512.png | 512×512 px | PNG Opaque (purpose: maskable) | Formes Adaptatives Android (Cercle, Squircle, Goutte) | Les éléments visuels clés doivent résider dans le cercle central de sécurité de 80 % (marge interne de 20 %). |
Doit impérativement intégrer une couche binaire 48×48 px ; ne jamais renommer un simple fichier PNG en .ico.
Silhouette à fort contraste indispensable pour la lisibilité sur 16 pixels.
Icône d’onglet principale sur les moniteurs haute densité modernes.
Seuil minimal exigé par Google Search Central (multiple exact de 48 px : 48×48, 96×96, 144×144).
Multiple 2x de 48 px recommandé pour un masque circulaire parfaitement net dans Google.
Exige un arrière-plan opaque ; iOS remplace tout pixel transparent par du noir pur (#000000).
Critère obligatoire des audits Google Lighthouse pour l’installation PWA.
Ressource maîtresse haute résolution requise pour générer l’écran d’accueil de l’application.
Les éléments visuels clés doivent résider dans le cercle central de sécurité de 80 % (marge interne de 20 %).
Comment Générer et Installer Vos Favicons, Icônes iOS et Manifeste PWA
Méthodologie en 5 étapes pour une conformité totale avec Google Search Central et les standards mobiles
Choisissez Votre Source dans le Studio 3-en-1
Importez un logo SVG ou PNG existant, créez un monogramme de 1 à 3 lettres avec typographie sur mesure ou sélectionnez un emoji vectoriel.
Vérifiez le Contraste Mode Sombre et la Zone de Sécurité
Consultez le détecteur d’invisibilité en mode sombre et réglez la marge interne (20 %+ pour Android Maskable) afin d’inscrire votre logo dans le cercle de 80 %.
Contrôlez les 4 Prévisualisations Multi-Plateformes en Direct
Inspectez le rendu dans les résultats Google Search (mobile et bureau), les onglets clairs et sombres, le squircle iOS 180×180 et les formes adaptatives Android.
Configurez le Manifeste Web et Téléchargez l’Archive ZIP
Renseignez le nom de l’application et les couleurs de thème, puis cliquez sur Télécharger le Pack Complet d’Icônes (.ZIP) pour obtenir les 10 fichiers.
Déposez les Fichiers à la Racine et Collez le Code d’En-tête
Extrayez l’archive dans votre dossier public/ et copiez en un clic les balises HTML5 <head> ou la configuration Metadata native pour Next.js App Router.
Encodage Binaire 100 % Local dans le Navigateur & Confidentialité Absolue
L’intégralité du redimensionnement HTML5 Canvas, l’assemblage binaire des en-têtes ICONDIR, l’analyse de luminance des pixels et l’archivage ZIP s’exécutent strictement dans la mémoire vive de votre appareil. Vos logos ne quittent jamais votre navigateur.
Questions Fréquentes (Standards Favicon, Apple Touch Icon & PWA)
Réponses d’ingénierie sur l’indexation Google Search, le format binaire .ICO et les icônes masquables
Q:Pourquoi mon icône semble-t-elle floue sur un écran MacBook Retina alors qu’elle est nette sur un moniteur classique ?
Sur un écran Retina ou HiDPI (densité 2x), un onglet de navigateur de 16×16 pixels CSS utilise en réalité une grille physique de 32×32 pixels. Si votre site ne fournit qu’une image de 16×16 px, le navigateur l’étire artificiellement. Notre pack inclut systématiquement les couches 16×16, 32×32, 48×48 et 96×96 px pour une netteté parfaite sur tous les écrans.
Q:Comment Android génère-t-il automatiquement l’écran de lancement (Splash Screen) d’une application PWA ?
Lorsqu’un utilisateur lance votre PWA depuis son écran d’accueil, Android assemble instantanément un écran de bienvenue en combinant trois éléments du fichier site.webmanifest : la couleur background_color en plein écran, l’icône haute résolution android-chrome-512x512.png au centre et le titre name juste en dessous.
Q:Pourquoi la création de mes icônes dans ce studio garantit-elle que mon logo ne quitte jamais mon appareil ?
Contrairement aux convertisseurs en ligne classiques qui envoient vos fichiers sur un serveur distant, notre outil exécute le redimensionnement HTML5 Canvas, l’encodage binaire DataView du fichier .ico et la compression ZIP directement dans la mémoire vive (RAM) de votre navigateur. Aucune donnée réseau n’est transmise.
Q:Quelle est la géométrie exacte du rayon r = 40 % pour la zone de sécurité des icônes masquables ?
Sur le canevas maître de 512×512 pixels, le cercle de sécurité de 80 % possède un diamètre exact de 409,6 pixels (soit un rayon de 204,8 px depuis le centre). Cela laisse une bordure extérieure de 51,2 pixels de chaque côté susceptible d’être masquée par le téléphone, d’où la recommandation d’une marge interne de 20 %.
Q:Que faire si le logo de mon entreprise est horizontal (rectangulaire) plutôt que carré ?
Deux solutions s’offrent à vous : si vous importez un logo rectangulaire, notre moteur verrouille automatiquement ses proportions et le centre mathématiquement dans la zone de sécurité sans jamais le déformer. Toutefois, pour une lisibilité maximale à 16×16 px, nous conseillons souvent d’utiliser uniquement le pictogramme de la marque ou de créer un monogramme de 2 lettres.
Qu'est-ce que Générateur de Favicon, Icônes & Manifeste PWA ?
Dans le souci du détail qui distingue une interface soignée d’un site amateur, l’icône d’application joue un rôle décisif dès la première seconde. Pourtant, préparer manuellement l’ensemble des formats exigés par l’écosystème web moderne relève souvent du casse-tête : Google Search impose un multiple strict de 48×48 pixels pour afficher votre blason dans ses résultats mobiles, les écrans MacBook Retina réclament des calques 32×32 et 96×96 px d’une netteté absolue, iOS remplace la moindre transparence par un fond noir opaque sur l’écran d’accueil de l’iPhone, et Android découpe les icônes PWA selon des masques géométriques variables. Le Générateur de Favicon, Icônes & Manifeste PWA automatise l’intégralité de cette chaîne de production 100 % localement dans votre navigateur grâce aux API natives HTML5 <canvas>, ArrayBuffer et DataView.
Exemple Concret : Refonte des Icônes d’un Studio SaaS Collaboratif Multi-Thème
Lors du déploiement d’un outil collaboratif destiné aux agences de création, l’équipe produit a constaté que son symbole géométrique anthracite sur fond transparent (luminance relative de 12,1 %) devenait totalement invisible sur les barres d’onglets sombres de Chrome, Brave et Arc. De plus, sur les téléphones Android configurés avec un masque circulaire, les pointes de l’étoile du logo étaient rognées faute de marge suffisante (seulement 8 % de marge initiale). En important le fichier SVG dans le studio ci-dessus, les designers ont appliqué un badge Violet Vif (#7C3AED) associé à une marge interne de sécurité de 22 % (inscrivant parfaitement le motif dans le cercle central de 409,6 px sur le canevas maître de 512×512 px) et ont exporté une archive complète de 10 fichiers ne pesant que 20,4 Ko.
Matrice d’Ingénierie Visuelle et Budget Octets (Benchmark Studio SaaS — 20,4 Ko)
| Fichier de Production | Dimensions & Poids | Spécification Binaire | Bénéfice Utilisateur & Conformité |
|---|---|---|---|
| favicon.ico | 16, 32, 48 px (4,5 Ko) | En-tête ICONDIR 54 octets + 3 trames | Indexation directe par Googlebot et rétrocompatibilité totale |
| favicon-48x48.png & 96x96.png | 48² & 96² px (3,4 Ko) | PNG RGBA 32 bits (multiples 1x et 2x) | Rendu circulaire ultra-net dans les résultats Google Mobile |
| apple-touch-icon.png | 180×180 px (5,1 Ko) | PNG opaque 24 bits sans transparence | Évite l’apparition d’un carré noir sur l’écran d’accueil iPhone/iPad |
| maskable-icon-512x512.png | 512×512 px (7,4 Ko) | Cercle sûr 80 % (409,6 px) + 22 % marge | Aucune coupure sous les masques Cercle, Goutte ou Squircle |
Les Atouts Techniques de Notre Architecture 100 % Côté Client
- Véritable Assemblage Binaire
ICONDIR: Notre moteur écrit les octets d’en-tête Microsoft et encapsule réellement les trois résolutions (16×16, 32×32 et 48×48 px) dans un unique fichierfavicon.ico. - Auditeur Automatique de Luminance ITU-R BT.709 : Détecte immédiatement les icônes trop sombres ou trop claires sur fond transparent avant que vos visiteurs ne les remarquent.
- Confidentialité Totale en Mémoire Vive : Vos créations graphiques et logos d’entreprise restent strictement dans la mémoire locale de votre navigateur.
Histoire et Origine
L’aventure du favicon débute en mars 1999 avec la sortie de Microsoft Internet Explorer 5. À l’époque, le navigateur cherchait discrètement un fichier favicon.ico à la racine du serveur uniquement lorsqu’un internaute ajoutait la page à ses « Favoris ». Très vite, les hébergeurs web ont remarqué une avalanche d’erreurs 404 dans leurs journaux d’accès, tandis que les webmestres astucieux utilisaient le nombre de téléchargements de cette minuscule image de 16×16 pixels pour mesurer la popularité de leur site ! En 2007, le lancement du premier Apple iPhone franchit un cap décisif en introduisant apple-touch-icon.png, offrant aux raccourcis web une esthétique digne des applications natives avec reflet de verre. Dans les années 2010, le W3C formalise le Manifeste d’Application Web (site.webmanifest) et la zone de sécurité de 80 % des icônes masquables pour harmoniser l’affichage sur tous les smartphones Android.