Favicon per React
React non gestisce il <head> al posto tuo — la favicon vive in index.html. Metti il file favicon.ico nella cartella /public e collegalo; nei setup moderni si aggiungono anche una variante SVG e una PNG.
Sia Vite che CRA servono la cartella /public dalla root, quindi /favicon.ico è il percorso di default. Non serve configurare il bundler.
Per display HiDPI e prompt di installazione PWA, aggiungi un apple-touch-icon 180×180 e un PNG 512×512 in /public e collegali in index.html.
Come funziona
- 1
Genera un .ico multi-risoluzione
Usa il nostro generatore con un sorgente 512×512.
- 2
Metti i file in /public
Copia lì favicon.ico, favicon.svg e apple-touch-icon.png.
- 3
Collegali in index.html
Aggiungi <link rel="icon" href="/favicon.ico"> e <link rel="icon" type="image/svg+xml" href="/favicon.svg">.
Provalo ora
Crea una favicon pronta per React
Generatore di FaviconFAQ
Dove si mette la favicon in un'app React con Vite?+
/public/favicon.ico (e /public/favicon.svg se vuoi anche la variante vettoriale).
Come aggiungo una favicon per la dark mode?+
Usa un unico SVG con un blocco <style>@media (prefers-color-scheme: dark) {...}</style> al suo interno.
Perché la favicon non si vede in modalità sviluppo?+
Esegui una ricarica forzata. I browser conservano in cache /favicon.ico per origine anche tra un reload e l'altro.
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.