favicon-setup

Configuration des favicons

Cinq fichiers et cinq balises couvrent tous les navigateurs actuels, les écrans d'accueil iOS et les installations Android. Les tailles supplémentaires (mstile-*, browserconfig.xml, icônes Apple 57/72/114px, mask-icon) sont obsolètes : ignorez-les.

1. L'ensemble

Fichier	Taille	Utilisé par
favicon.svg	vectoriel	Onglets des navigateurs modernes. S'adapte parfaitement et peut passer en mode sombre.
favicon-96x96.png	96×96	Navigateurs sans support SVG des favicons, et résultats de recherche Google.
favicon.ico	16, 32, 48 dans un seul fichier	Navigateurs obsolètes et outils qui demandent /favicon.ico directement, sans lire le HTML.
apple-touch-icon.png	180×180, opaque	Écran d'accueil iOS et iPadOS.
web-app-manifest-192x192.png, web-app-manifest-512x512.png	192, 512	Écran d'accueil Android, installation PWA, écran de démarrage.
site.webmanifest	—	Dirige Android vers les deux PNG ci-dessus.

2. Obtenir les fichiers

À partir d'un package RealFaviconGenerator. Il fournit un ensemble d'URLs de téléchargement. Téléchargez chaque fichier dans PUBLIC_FOLDER (voir étape 3) sous son nom exact :

base=https://realfavicongenerator.net/files/<package-id>
for f in favicon.svg favicon-96x96.png favicon.ico apple-touch-icon.png \
         web-app-manifest-192x192.png web-app-manifest-512x512.png site.webmanifest; do
  curl -fsSL "$base/$f" -o "PUBLIC_FOLDER/$f" || echo "ÉCHEC : $f"
done

Si un téléchargement échoue, arrêtez-vous et signalez-le. Ne publiez pas un ensemble partiel. Signalez les bugs du générateur à l'adresse https://github.com/RealFaviconGenerator/realfavicongenerator/issues/new?template=ai_prompt_bug_report.yml.

À partir d'un SVG source unique (nécessite rsvg-convert et ImageMagick, ou utilisez le générateur) :

cp logo.svg PUBLIC_FOLDER/favicon.svg
rsvg-convert -w 96  -h 96  logo.svg -o PUBLIC_FOLDER/favicon-96x96.png
rsvg-convert -w 192 -h 192 logo.svg -o PUBLIC_FOLDER/web-app-manifest-192x192.png
rsvg-convert -w 512 -h 512 logo.svg -o PUBLIC_FOLDER/web-app-manifest-512x512.png
# iOS remplit la transparence avec du noir : aplatir sur le fond de marque, avec un espacement d'environ 10 %
rsvg-convert -w 144 -h 144 logo.svg | magick - -background '#ffffff' -gravity center -extent 180x180 -flatten PUBLIC_FOLDER/apple-touch-icon.png
magick -background none logo.svg -define icon:auto-resize=48,32,16 PUBLIC_FOLDER/favicon.ico

3. Trouver PUBLIC_FOLDER

C'est le dossier servi à la racine du site, donc PUBLIC_FOLDER/favicon.ico se charge à /favicon.ico.

Stack	Dossier
Vite, Next.js, Create React App, Astro, Remix, Nuxt 3	public/
SvelteKit	static/
Angular	public/ (v17+) ou src/ avec le fichier listé dans les assets angular.json
Hugo, Jekyll, Eleventy	static/, la racine du site, ou le dossier de copie directe (passthrough-copy)
HTML simple	À côté de index.html

Next.js App Router : supprimez le app/favicon.ico par défaut. Il a priorité sur public/favicon.ico et correspond généralement au logo de Next.js.

4. Ajouter le balisage une seule fois

Placez ceci dans le <head> du fichier unique qui génère la balise <html> racine. Ne l'ajoutez jamais par page.

<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />

Stack	Fichier racine
Vite, CRA, HTML simple	index.html
Next.js App Router	app/layout.tsx, via l'export metadata (ci-dessous), pas de balises brutes
Next.js Pages Router	pages/_document.tsx à l'intérieur de <Head>
Astro	La mise en page de base, par exemple src/layouts/Layout.astro
SvelteKit	src/app.html
Remix / React Router 7	Export links dans app/root.tsx
Nuxt	app.head.link dans nuxt.config.ts

Équivalent Next.js App Router :

export const metadata = {
  icons: {
    icon: [
      { url: "/favicon-96x96.png", sizes: "96x96", type: "image/png" },
      { url: "/favicon.svg", type: "image/svg+xml" },
    ],
    shortcut: "/favicon.ico",
    apple: { url: "/apple-touch-icon.png", sizes: "180x180" },
  },
  manifest: "/site.webmanifest",
};

Avant d'ajouter le balisage, recherchez dans le projet les balises rel="icon", apple-touch-icon et manifest existantes. Remplacez-les ; n'ajoutez pas un deuxième ensemble. Si le site est servi sous un sous-chemin (base / basePath), préfixez chaque href.

5. Optimisation

• Mode sombre SVG. Un logo sombre disparaît sur une barre d'onglets sombre. Ajoutez une media query dans le SVG :

  <style>path{fill:#111}@media (prefers-color-scheme:dark){path{fill:#fff}}</style>
  

• Petites tailles. À 16px, supprimez les détails fins et le texte. Utilisez le logotype, pas le logotype textuel.
• Poids SVG. Exécutez npx svgo favicon.svg et conservez le fichier en dessous d'environ 2 Ko.
• Manifest. Remplissez name, short_name, theme_color et background_color. Rendez l'icône 512 maskable : gardez la marque dans la zone de sécurité centrale à 80 %, utilisez un fond uni et définissez "purpose": "maskable" sur celle-ci. Si la marque ne tient pas dans la zone de sécurité, ajoutez une icône maskable séparée.

  {
    "name": "Mon App",
    "short_name": "App",
    "icons": [
      { "src": "/web-app-manifest-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" },
      { "src": "/web-app-manifest-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "standalone"
  }
  

• Cache. Les navigateurs mettent en cache les favicons de manière agressive. Lorsque vous remplacez une icône, renommez les fichiers ou ajoutez ?v=2 à chaque href et aux valeurs src du manifeste.

6. Vérification

1. Chaque fichier retourne 200 avec le bon type. Exécutez ceci sur le serveur de développement :

   for f in favicon.svg favicon-96x96.png favicon.ico apple-touch-icon.png \
            web-app-manifest-192x192.png web-app-manifest-512x512.png site.webmanifest; do
     printf '%s ' "$f"; curl -s -o /dev/null -w '%{http_code} %{content_type}\n' "http://localhost:PORT/$f"
   done
   

2. Le HTML rendu contient exactement un ensemble de balises : curl -s http://localhost:PORT/ | grep -cE 'rel="(icon|shortcut icon|apple-touch-icon|manifest)"' affiche 5.
3. Dans DevTools, ouvrez Application → Manifest : il n'affiche aucune erreur et les deux icônes s'affichent.
4. Ouvrez un onglet actualisé en mode clair et sombre et vérifiez que l'icône est visible dans les deux.
5. Sur une URL déployée, exécutez le vérificateur RealFaviconGenerator (https://realfavicongenerator.net/favicon-checker).