Favicon per Next.js
Next.js 14+ App Router riconosce /app/icon.png e /app/favicon.ico come convenzioni — basta inserirli e Next genera i tag corretti in automatico.
Posiziona favicon.ico dentro /app: Next lo servirà su /favicon.ico e inietterà il tag link corrispondente.
Per icone multi-risoluzione o tematizzate, sfrutta le convenzioni di file: icon.png, icon.svg, apple-icon.png nella cartella /app. Next genera i tag <link> leggendo i metadati del file.
Come funziona
- 1
Genera favicon.ico
Multi-risoluzione 16/32/48/64 a partire da un sorgente 512×512.
- 2
Inseriscilo in /app
/app/favicon.ico viene servito automaticamente. Aggiungi icon.png per l'HD.
- 3
Verifica
Apri /favicon.ico nel browser — Next lo serve senza alcuna configurazione aggiuntiva.
Provalo ora
Genera una favicon pronta per Next.js
Generatore di FaviconFAQ
Dove vanno le icone in Next.js App Router?+
Nella directory /app. Il nome del file (icon, apple-icon, favicon) ne determina il ruolo.
E per il Pages Router?+
Inserisci favicon.ico in /public e collegalo da _document.tsx.
Serve ancora un .ico multi-risoluzione?+
Consigliato per la retrocompatibilità, in particolare per Edge e i collegamenti in modalità IE.
Strumenti correlati
Generatore di Favicon
Genera un pacchetto completo di favicon (ICO + PNG) per ogni dispositivo e browser.
Convertitore PNG in ICO
Convertitore online gratuito da PNG a ICO per icone Windows, icone app e favicon per siti web.
Convertitore SVG in PNG
Trasforma grafiche vettoriali SVG in PNG a qualsiasi risoluzione.