Configuration du favicon Next.js : générer un favicon.ico à partir de SVG

Un seul favicon.ico suffit pour un lancement basique. Mais si vous souhaitez un rendu stable dans les onglets du navigateur, l'écran d'accueil iOS, les installations PWA et les résultats de recherche Google, vous devez fournir un jeu d'icônes complet.

Ce guide suit un flux de travail pratique : définissez les ressources d'icônes requises, générez-les à partir de SVG et intégrez-les dans Next.js.

De quels fichiers d'icônes avez-vous réellement besoin

Une configuration minimale solide comprend ces atouts :

favicon.ico (repli de compatibilité)
icon.svg ou icon.png (navigateurs modernes)
apple-icon.png (icône de l'écran d'accueil iOS)
manifest (métadonnées PWA)
icon-192.png (taille du manifeste)
icon-512.png (taille du manifeste)

Flux de travail pratique : de SVG au jeu de favicon

1. Commencez avec un SVG qui reste lisible même dans des tailles minuscules

Les favicons sont souvent rendus sur 16x16 et 32x32. Optimisez votre source en conséquence :

Conservez la forme principale, supprimez les petits détails.
Utilisez un contraste élevé.
Évitez les traits ultra-fins.

Prévisualisez rapidement dans SVG Viewer.

2. Générer `favicon.ico`

Utilisez SVG to ICO :

Téléchargez SVG
Sélectionnez les tailles courantes (16/32/48/64)
Exporter un seul fichier .ico

C'est la capacité clé d'un site d'outils SVG : une production rapide de SVG vers favicon.

3. Générez `icon-192.png` et `icon-512.png`

Utilisez SVG to PNG et exportez :

icon-192.png
icon-512.png

Si nécessaire, exportez également un apple-icon.png dédié (généralement 180x180).

4. Facultatif : optimiser avant l'expédition

Exécutez les ressources sources via SVG Optimizer ou SVG Minify pour des fichiers plus propres et plus légers.

Intégration du routeur d'application Next.js

Structure recommandée :

app/
  favicon.ico
  icon.svg
  apple-icon.png
  manifest.ts
public/
  icon-192.png
  icon-512.png

Exemple app/manifest.ts :

import type { MetadataRoute } from "next";

export default function manifest(): MetadataRoute.Manifest {
  return {
    name: "SVGView",
    short_name: "SVGView",
    description: "Online SVG tools for viewing, optimizing, and converting SVG files.",
    start_url: "/",
    display: "standalone",
    background_color: "#ffffff",
    theme_color: "#ffffff",
    icons: [
      {
        src: "/icon-192.png",
        sizes: "192x192",
        type: "image/png",
      },
      {
        src: "/icon-512.png",
        sizes: "512x512",
        type: "image/png",
      },
    ],
  };
}

Vérifications des favicon Google que vous devez exécuter avant le lancement

Il s'agit d'une validation de l'implémentation, pas d'une rédaction :

https://your-domain.com/favicon.ico renvoie 200
Les chemins d'icônes ne sont pas bloqués par robots.txt
Le favicon est carré et au moins 8x8
Préférez les tailles multiples de 48
La page d'accueil HTML inclut la déclaration d'icône (rel="icon")

Une fois ceux-ci en place, les mises à jour des favicon de recherche Google apparaissent généralement après une nouvelle analyse.

Si votre application est TanStack Start (comme ce projet)

Utilisez les mêmes ressources et déclarez les liens à la racine <head> :

<head>
  <link rel="icon" href="/favicon.ico" sizes="any" />
  <link rel="apple-touch-icon" href="/apple-icon.png" />
  <link rel="manifest" href="/manifest.webmanifest" />
</head>

FAQ

Le `favicon.ico` seul est-il suffisant ?

C'est suffisant pour un lancement basique, mais pas pour une couverture complète de la plateforme.

Pourquoi Google affiche-t-il toujours mon ancien favicon ?

Habituellement, décalage d'exploration/de cache. Validez d'abord l'accessibilité de URL, puis attendez la nouvelle analyse.

Dois-je choisir `icon.svg` ou `favicon.ico` ?

Vous conservez généralement les deux : .ico de secours et svg/png moderne.

Configuration du favicon Next.js : générer un favicon.ico à partir de SVG