Generatore di Favicon

Carica un'immagine e genera tutte le dimensioni standard di favicon in PNG.

Trascina e rilascia un'immagine qui, o clicca per selezionare

Le immagini quadrate danno i risultati migliori (PNG, JPG, SVG)

Spiegazione delle dimensioni di favicon

16×16 · favicon di scheda browser standard

32×32 · scheda Retina, scorciatoia della barra delle applicazioni

48×48 · scorciatoia di sito Windows

180×180 · Apple Touch Icon (schermata Home iOS)

192×192 · Android Chrome, icona di manifest PWA

512×512 · schermata di avvio PWA, ricerca Google

Una breve storia della favicon

La favicon è nata come funzione di Microsoft in Internet Explorer 5, rilasciato nel marzo 1999. Microsoft introdusse la convenzione di cercare /favicon.ico nella radice del sito e mostrarla accanto ai siti aggiunti ai preferiti nella barra Preferiti, da qui il nome "favicon" (favorite icon). La scelta originale di design fu il formato proprietario Windows ICO, che può contenere bitmap di più dimensioni in un singolo file. Gli altri browser adottarono la convenzione quasi subito e cominciarono a supportare anche favicon PNG, segnalate tramite tag <link rel="icon"> nell'head del documento. L'iPhone di Apple (lanciato nel 2007) aggiunse la convenzione apple-touch-icon, un PNG di 180×180 usato quando un utente aggiunge un sito alla schermata Home di iOS, mostrato alla stessa dimensione di un'icona di app nativa. Le Progressive Web App (PWA, formalizzate intorno al 2015) hanno aggiunto il file manifest.json con il suo array icons, che richiede varianti PNG di 192×192 (prompt di installazione di Chrome) e 512×512 (splash screen delle PWA, schermate Home Android, fissaggio nel menu Start di Windows). Le favicon SVG (supportate in Firefox dalla versione 41 nel 2015, in Chrome dalla versione 80 di febbraio 2020, in Safari dalla versione 12.1 nel 2019) sono ora la raccomandazione moderna quando l'icona è una forma semplice, un singolo file scala perfettamente a qualsiasi densità di display. Il legacy favicon.ico è ancora richiesto per Internet Explorer 11 e browser più vecchi; gli stack moderni spediscono l'SVG più un fallback ICO e un apple-touch-icon PNG.

Perché tante dimensioni?

Ogni dimensione del set di favicon serve un contesto di rendering diverso. 16×16 è la classica favicon nella scheda del browser a DPI standard, la dimensione che ha insegnato ai designer quanto possano essere brutali i vincoli sui pixel. 32×32 è la dimensione per scheda del browser ad alto DPI (Retina); molti browser moderni la preferiscono anche per display "standard" perché si riduce meglio di quanto la 16×16 si ingrandisca. 48×48 è la dimensione che Windows usa per i collegamenti nella taskbar e per le favicon dei siti fissati. 180×180 è l'apple-touch-icon, mostrata quando un utente aggiunge un sito alla schermata Home di iOS. 192×192 è il prompt di installazione web app di Chrome e l'icona standard della schermata Home di Android. 512×512 è l'icona della splash screen PWA, le anteprime nei risultati di Google Search e le icone dei tile del menu Start di Windows. La ragione per cui un singolo file ad alta risoluzione non basta: alle dimensioni più piccole, l'icona spesso ha bisogno di una semplificazione fatta a mano per restare leggibile (un logo complesso a 16×16 diventa una macchia di colore), così il design professionale di favicon di solito coinvolge il disegno di due o tre varianti, una versione dettagliata per le dimensioni grandi, una semplificata per quelle medie e una "solo marchio" per le più piccole. Questo generatore scala una singola sorgente attraverso il downsampling standard nearest-neighbour o bilineare, che va bene per forme semplici; loghi complessi possono richiedere ritocchi manuali alle dimensioni minime.

L'HTML che accompagna i file

Generare i file è metà del lavoro; l'altra metà sono i meta tag nel tuo <head> che dicono ai browser quale file usare in quale contesto. Lo stack favicon minimo praticabile per il 2026:

<link rel="icon" type="image/svg+xml" href="/icon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Il browser sceglie il file più appropriato in base alla densità di pixel del dispositivo e ai formati che supporta. I browser moderni preferiscono l'SVG quando è presente; i browser più vecchi ripiegano sulle dimensioni PNG; iOS usa l'apple-touch-icon; l'installazione PWA legge il manifest. Il favicon.ico nella root viene comunque preso automaticamente come fallback predefinito anche senza un tag link esplicito, ogni sito dovrebbe averne ancora uno per la compatibilità con browser e tooling molto vecchi.

Quando ti serve davvero generare favicon

Progettare per il vincolo del 16×16

La favicon 16×16 è il vincolo più impegnativo nel design di interfacce moderne. 256 pixel, l'intera tela dell'icona, devono trasmettere abbastanza identità di marca perché un utente possa trovare la tua scheda tra altre venti. Linee guida pratiche dei designer che lo hanno fatto molte volte: Semplifica in modo aggressivo. Un logo complesso a 16×16 è una macchia di colore. Togli dettagli finché resta solo la forma minima riconoscibile. Massimizza il contrasto contro lo sfondo delle schede. Le schede del browser sono tipicamente grigio chiaro o grigio scuro; un'icona con poco contrasto scompare nella chrome. Preferisci forme singole audaci alle linee sottili. Le linee sotto i 2 px di larghezza si confondono in grigio a 16 px e diventano invisibili. Testa alla dimensione reale nel tuo browser. Quello che sembra a posto nel tuo strumento di design a 256×256 può essere illeggibile a 16×16. Apri più schede del tuo sito e guardale nella barra delle schede, è il test reale. Considera il caso del dark mode. Un'icona progettata per una barra delle schede bianca può essere invisibile su una barra scura. Le favicon SVG possono includere una media query prefers-color-scheme dentro l'SVG per l'adattamento automatico chiaro/scuro; per i fallback ICO e PNG, progetta qualcosa che funzioni su entrambi gli sfondi.

File generati

Privacy: elaborazione dell'immagine solo nel browser

Un logo o un'immagine di branding che carichi per generare una favicon può essere riservato, lavoro di branding pre-lancio, branding di strumenti interni, loghi di clienti coperti da NDA. I generatori di favicon lato server (il molto popolare RealFaviconGenerator e simili) prendono una copia di ogni immagine caricata nella loro infrastruttura, dove resta nei log e nelle cache. Questo generatore funziona interamente nel tuo browser tramite la Canvas API: l'immagine viene letta nel browser, scalata a ogni dimensione di favicon dalla pipeline di ridimensionamento immagini integrata del browser e impacchettata per il download, tutto nella tua scheda. Verifica nel pannello Network di DevTools mentre carichi (nessuna richiesta parte dopo il caricamento della pagina), oppure metti la pagina offline (modalità aereo) dopo il caricamento e il generatore continuerà a funzionare su file locali. Sicuro per lavori di branding non annunciati, loghi di clienti con NDA, branding di strumenti interni o qualsiasi immagine che non vorresti vedere copiata sul disco rigido di uno sconosciuto.

Strumenti correlati

Compressore di immagini

Comprimi le tue immagini fino all'80 % più piccole. Trascina e rilascia, download immediato. Nessun invio al server.

Ridimensionatore di immagini

Ridimensiona le tue immagini a dimensioni esatte in pixel. Preimpostazioni per social network, web e altro.

Convertitore di immagini

Converti tra PNG, JPEG e WebP. Conversione in batch di più file alla volta.