1000 Outils

Calculateur de taille favicon et icônes

Ne manquez aucune taille d'icône ! Notre guide liste toutes les tailles requises pour les favicons de navigateur (16, 32, 48, 64px), les icônes Apple Touch (57 à 180px), les icônes Android/PWA (36 à 512px) et les tuiles Windows (70 à 310px). Avec le code HTML complet pour les balises <head> et le manifest.json pour les Progressive Web Apps.

Taille source recommandée

Créez votre icône en 1024 × 1024 pixels minimum pour générer toutes les tailles requises sans perte de qualité.

Favicon navigateur

AperçuNom du fichierTaille
16 × 16
32 × 32
48 × 48
64 × 64
96 × 96
128 × 128

Apple iOS / macOS

AperçuNom du fichierTaille
57 × 57
60 × 60
72 × 72
76 × 76
114 × 114
120 × 120
144 × 144
152 × 152
180 × 180

Android / PWA

AperçuNom du fichierTaille
36 × 36
48 × 48
72 × 72
96 × 96
144 × 144
192 × 192
512 × 512

Windows / Microsoft

AperçuNom du fichierTaille
70 × 70
144 × 144
150 × 150
310 × 310

App stores

AperçuNom du fichierTaille
1024 × 1024
512 × 512

Code HTML — balises <head>

<!-- Favicon de base -->
<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="shortcut icon" href="/favicon.ico">

<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">

<!-- Android / PWA -->
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#ffffff">

<!-- Windows -->
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">

manifest.json (PWA)

{
  "name": "Mon Application",
  "short_name": "App",
  "icons": [
    { "src": "/android-icon-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-icon-512x512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Pourquoi avoir plusieurs tailles de favicons ?

Chaque système d'exploitation et navigateur utilise des tailles différentes selon le contexte d'affichage. L'onglet d'un navigateur desktop affiche une favicon de 16×16 pixels, mais Windows peut utiliser une icône de 48×64 pixels pour les raccourcis de bureau. iOS utilise différentes tailles selon la génération de l'iPhone (57, 60, 114, 120, 180px) et la résolution de l'écran (Retina ou non). Pour assurer un rendu optimal partout, il faut fournir toutes les tailles requises.

PWA et le fichier manifest.json

Les Progressive Web Apps (PWA) nécessitent un fichier manifest.json qui liste les icônes disponibles, le nom de l'application, les couleurs du thème et le mode d'affichage. Les deux tailles indispensables sont 192×192 et 512×512 pixels. La taille 512×512 est utilisée par Chrome pour l'écran de démarrage (splash screen) et sur certains stores d'applications. Créez votre icône source à au moins 1024×1024 pixels pour garantir une qualité optimale à toutes les tailles.

Questions fréquentes

Outils similaires

🎨

Redimensionner une image

Redimensionnez vos images aux dimensions exactes souhaitées, gratuitement et sans inscription.

🎨

Compresser une image

Compressez vos images pour réduire leur poids sans sacrifier la qualité visuelle.

🎨

Convertir PNG en JPG

Convertissez vos images PNG en JPG instantanément avec le niveau de qualité de votre choix.

🎨

Générateur de palette de couleurs

Générez des palettes de couleurs harmonieuses pour vos projets de design et de développement web.

🎨

Convertir HEX en RGB

Convertissez vos codes couleur HEX en RGB (et inversement) avec prévisualisation instantanée.

🎨

Créer un favicon

Créez un favicon pour votre site web à partir d'une image ou en partant de zéro.