Come configurare il favicon in Next.js: genera favicon.ico da SVG

Un singolo favicon.ico basta per un lancio essenziale. Ma se vuoi un rendering stabile tra schede del browser, schermata Home di iOS, installazioni PWA e risultati di ricerca Google, dovresti distribuire un set completo di icone.

Questa guida segue un percorso pratico: definire gli asset necessari, generarli da SVG e integrarli correttamente in Next.js.

Quali file icona ti servono davvero

Una configurazione minima solida include questi asset:

favicon.ico (fallback di compatibilità)
icon.svg o icon.png (browser moderni)
apple-icon.png (icona schermata Home iOS)
manifest (metadati PWA)
icon-192.png (dimensione manifest)
icon-512.png (dimensione manifest)

Workflow pratico: da SVG a set favicon

1. Parti da un SVG che resti leggibile a dimensioni minuscole

Le favicon vengono spesso renderizzate a 16x16 e 32x32. Ottimizza quindi la sorgente di conseguenza:

Mantieni la forma principale, rimuovi i dettagli minuscoli.
Usa un contrasto elevato.
Evita stroke ultra sottili.

Fai un'anteprima rapida in SVG Viewer.

2. Genera `favicon.ico`

Usa SVG to ICO:

Carica l'SVG
Seleziona dimensioni comuni (16/32/48/64)
Esporta un unico file .ico

È proprio qui che uno strumento SVG torna utile: trasformare rapidamente un SVG sorgente in un set favicon pulito.

3. Genera `icon-192.png` e `icon-512.png`

Usa SVG to PNG ed esporta:

icon-192.png
icon-512.png

Se necessario, esporta anche un apple-icon.png dedicato (comunemente 180x180).

4. Opzionale: ottimizza prima della pubblicazione

Passa gli asset sorgente attraverso SVG Optimizer o SVG Minify per ottenere file più puliti e leggeri.

Integrazione con Next.js App Router

Struttura consigliata:

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

Esempio di 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",
      },
    ],
  };
}

Controlli Google favicon da eseguire prima del lancio

Qui parliamo di validazione tecnica dell'implementazione, non di copywriting:

https://your-domain.com/favicon.ico restituisce 200
I percorsi delle icone non sono bloccati da robots.txt
La favicon è quadrata e almeno 8x8
Preferisci dimensioni che siano multipli di 48
L'HTML della homepage include la dichiarazione dell'icona (rel="icon")

Se questi punti sono a posto, gli aggiornamenti della favicon su Google Search di solito compaiono dopo una nuova scansione.

Se la tua app è TanStack Start (come questo progetto)

Usa gli stessi asset e dichiara i link nel <head> root:

<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

`favicon.ico` da solo basta?

Basta per un lancio di base, ma non per una copertura completa su tutte le piattaforme.

Perché Google mostra ancora la mia vecchia favicon?

Di solito dipende da ritardi di crawl o cache. Prima verifica che l'URL sia accessibile, poi attendi una nuova scansione.

Dovrei scegliere `icon.svg` o `favicon.ico`?

Di solito conviene tenerli entrambi: fallback .ico e una risorsa moderna svg/png.

Come configurare il favicon in Next.js: genera favicon.ico da SVG