Favicon et icône Apple Touch
Ajoutez des icônes qui apparaissent dans les onglets du navigateur et sur les écrans d’accueil.
Favicon et icône Apple Touch est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage HTML Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML Academy comprend 4 leçons au total.
Qu’est-ce qu’une icône de site ?
Une icône de site est la petite icône qui apparaît dans :
- Les onglets du navigateur
- Les listes de favoris
- L’historique du navigateur
- Les résultats de recherche (parfois)
Elle aide les utilisateurs à identifier votre site d’un coup d’œil parmi plusieurs onglets ouverts.
Lien d’icône de site de base
Ajoutez une icône de site avec un élément link dans head :
<head>
<!-- SVG favicon (modern, scales at any size) -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<!-- PNG fallback -->
<link rel="icon" type="image/png" href="/favicon.png">
<!-- Legacy ICO for Internet Explorer -->
<link rel="shortcut icon" href="/favicon.ico">
</head>Formats des icônes de site
Stratégie recommandée pour le format des icônes de site :
- SVG — vectoriel, se redimensionne parfaitement, fichier peu volumineux (à utiliser en premier)
- PNG 32x32 — solution de secours pour les navigateurs qui ne prennent pas en charge SVG
- ICO — format ancien contenant les dimensions 16x16 et 32x32
Emplacement du fichier ICO
Le fichier favicon.ico situé à la racine du domaine est récupéré automatiquement :
<!-- Browsers request /favicon.ico automatically -->
<!-- Placing it at the domain root means no link tag is needed:
/favicon.ico -- served without any HTML link tag
-->
<!-- But: specifying it explicitly is better: -->
<link rel="icon" href="/favicon.ico" sizes="32x32">Attribut sizes
L’attribut sizes indique les dimensions de l’icône :
<link rel="icon" href="/icon-16.png" sizes="16x16">
<link rel="icon" href="/icon-32.png" sizes="32x32">
<link rel="icon" href="/icon-64.png" sizes="64x64">Icône tactile Apple
L’icône tactile Apple apparaît lorsque les utilisateurs ajoutent votre site à l’écran d’accueil d’iOS :
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- Recommended size: 180x180 px -->
<!-- Used by: iOS Safari, some Android browsers -->
<!-- Apple applies rounded corners and gloss effect automatically -->
<!-- Pre-composited icon (no transparency) looks best -->Icônes adaptatives pour Android
Les PWA Android utilisent des icônes adaptatives qui remplissent la forme de l’icône :
<link rel="manifest" href="/manifest.json">
<!-- In manifest.json: -->
<!--
{
"icons": [
{
"src": "/icon-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any maskable"
}
]
}
-->Icône de site pour le mode sombre
Fournissez une icône de site SVG adaptée au mode sombre :
<!-- SVG favicon with dark mode support: -->
<!-- In /favicon.svg: -->
<!--
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
@media (prefers-color-scheme: dark) {
.icon-bg { fill: white; }
.icon-mark { fill: black; }
}
.icon-bg { fill: #0070f3; }
.icon-mark { fill: white; }
</style>
<circle class="icon-bg" cx="16" cy="16" r="16"/>
<text class="icon-mark" x="50%" y="60%">C</text>
</svg>
-->Manifeste d’application web pour les icônes PWA
Configuration complète des icônes pour les applications web progressives :
<link rel="manifest" href="/manifest.json">
<!-- manifest.json icons array: -->
<!--
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
-->Configuration complète de l’icône de site
Configuration moderne complète d’une icône de site :
<head>
<!-- SVG: scales to any size, supports dark mode -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<!-- PNG fallback -->
<link rel="icon" type="image/png" href="/favicon-32.png" sizes="32x32">
<!-- Apple home screen -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- PWA manifest (for Android home screen) -->
<link rel="manifest" href="/manifest.json">
</head>Tester les icônes de site
Comment vérifier la configuration des icônes de site :
- Effectuez un rechargement forcé (Ctrl+Shift+R / Cmd+Shift+R) pour vider l’icône de site mise en cache
- Utilisez l’outil Favicon Checker (realfavicongenerator.net)
- Testez sur un véritable appareil iOS pour l’icône tactile Apple
- Vérifiez le manifeste PWA avec Lighthouse → audit PWA
Vérification rapide
Quelle est la taille recommandée pour les images d’icône tactile Apple ?
Récapitulatif : icônes de site
Éléments essentiels des icônes de site :
- Icône de site SVG — moderne, adaptable à toutes les tailles et au mode sombre
- PNG 32x32 — solution de secours pour les navigateurs sans prise en charge de SVG
- ICO à la racine — solution de secours ancienne pour IE
apple-touch-icon180×180 — écran d’accueil iOS- Manifeste d’application web — icônes PWA Android (192px et 512px)
Questions Fréquemment Posées
La leçon « Favicon et icône Apple Touch » est-elle gratuite ?
Oui — le texte complet de « Favicon et icône Apple Touch » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours HTML Academy, passe à CoddyKit PRO. Le cours HTML Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Favicon et icône Apple Touch » ?
Ajoutez des icônes qui apparaissent dans les onglets du navigateur et sur les écrans d’accueil. Tu pratiques HTML Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer HTML Academy ?
Aucune expérience préalable n'est requise. HTML Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Favicon et icône Apple Touch » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon HTML Academy ?
Oui. Chaque leçon HTML Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- `title` et son rôle dans le SEO
- `meta charset`, `viewport`, `author` et `description`
- URL canoniques et meta `robots`
- Favicon et icône Apple Touch