Come creare una favicon dal tuo logo

1. Concorda dove apparirà l'icona

Una favicon aiuta a riconoscere un sito in contesti come le schede del browser e i segnalibri. Prima di esportarla, chiedi chi la installerà e quali browser, piattaforme per siti e altre destinazioni deve supportare il progetto.

Una scheda del browser, un collegamento alla schermata Home di Apple e una web app installata possono riutilizzare la stessa grafica del brand, ma hanno configurazioni e requisiti per le immagini diversi. Anche un'app mobile nativa richiede un brief specifico per la piattaforma. Indica questi materiali separatamente, così «favicon inclusa» avrà un significato chiaro.

• Sito web: identifica l'icona del browser e gli eventuali file alternativi necessari.
• Schermata Home o web app installata: conferma con lo sviluppatore i requisiti dell'icona touch o del manifest.
• Approvazione del brand: concorda quale simbolo, monogramma o variante compatta può rappresentare l'attività.

Approfondimenti: MDN: a cosa serve una favicon · MDN: dichiarazioni delle icone delle web app

2. Scegli un segno che regga in piccolo

Parti da un simbolo del logo o da un monogramma già approvato. Se l'identità ha solo un logotipo largo, proponi una variante compatta e falla approvare prima di considerarla parte del brand. Evita di deformare il logotipo completo per farlo entrare in un quadrato o di rimuovere dettagli importanti senza dirlo.

Usa 16 × 16 e 32 × 32 pixel come dimensioni pratiche per la verifica. Cerca una silhouette riconoscibile, controforme aperte, spazi distinti e tratti che rimangano visibili. Sono controlli di produzione, non una regola universale sulle dimensioni minime dell'intero sistema del logo.

I calcoli seguenti mostrano perché un logo largo, pur esportato perfettamente, può restare difficile da riconoscere. L'esempio considera un logotipo 4:1 e un segno quadrato, entrambi inseriti nello stesso quadrato con margini proporzionali. Illustra solo la geometria; non è un test con i clienti né una regola prescrittiva sui margini.

Approfondimenti: MDN: dimensioni comuni delle favicon · MDN: mantenere le proporzioni SVG

3. Prepara un sorgente quadrato pulito

Conserva il master modificabile, poi prepara una copia per la consegna con la grafica compatta approvata. Usa una tavola da disegno o un frame quadrato e scala il segno in proporzione. Decidi i margini con cura: troppo spazio lo fa sembrare piccolo, troppo poco può avvicinarlo eccessivamente ai bordi. Correggi a occhio il centraggio ottico quando la forma lo richiede.

Per l'SVG, controlla che il viewBox esportato descriva l'area quadrata prevista. Il viewBox controlla il rettangolo di coordinate mappato nel viewport dell'immagine; non rimuove lo spazio inutilizzato già presente nella grafica. Apri il file esportato e controlla i limiti effettivi.

Se l'icona contiene lettering, converti il testo corretto e approvato in tracciati nella copia per la consegna o durante l'esportazione. Mantieni il testo vivo nel master. La nostra guida ai font SVG spiega quali controlli fare prima di convertire le lettere in tracciati.

Controlla il segno su sfondi chiari e scuri. La trasparenza non garantisce automaticamente contrasto: un segno scuro può scomparire su una scheda scura. Un riquadro di sfondo o una versione visiva approvata separatamente possono aiutare, ma verifica il risultato installato invece di affidarti a un'anteprima grande.

Continua con: Evita cambiamenti dei font nei loghi SVG

Approfondimenti: MDN: viewBox SVG

4. Scegli i file per il sito effettivo

Usa i requisiti dello sviluppatore per scegliere un insieme di file piccolo e mirato. HTML supporta più icone candidate, inclusi SVG scalabili e file raster. I browser scelgono in base alle dichiarazioni e ai formati supportati; un determinato ordine dei file o un'estensione non garantiscono la stessa scelta ovunque.

SVG è utile per la grafica vettoriale, PNG offre dimensioni fisse in pixel e ICO può contenere più immagini raster in un solo file. Se consegni un ICO, controlla le dimensioni delle immagini incorporate invece di presumere che il nome del file le dimostri. Rinominare un PNG in .ico non è una conversione.

Quello che segue è un esempio pratico di consegna per un sito web. Non è un insieme obbligatorio per tutti i siti.

Approfondimenti: WHATWG: selezione delle icone dei siti · MDN: il contenitore ICO · WebKit: icone SVG in Safari 26

5. Esporta e controlla i file reali

Puoi preparare il sorgente e le esportazioni raster nel tuo editor di progettazione. In Figma, seleziona il frame quadrato, aggiungi un'esportazione PNG e usa una larghezza fissa, come 16w, 32w o 96w, nel campo Scale. Un frame quadrato dovrebbe produrre un'altezza corrispondente; verifica le dimensioni del file scaricato. Esporta separatamente l'SVG a 1×.

Se ti serve un ICO, usa uno strumento che scriva davvero quel formato e controlla le immagini incorporate. Conserva gli eventuali ritocchi manuali per le dimensioni ridotte nel sorgente di consegna, così un'esportazione successiva non li sostituirà per errore.

Apri i file che riceverà il cliente. Confrontane forma e spaziatura con il riferimento approvato, poi controlla le versioni più piccole alle dimensioni previste. Se un PNG risulta inaspettatamente poco nitido, verifica il sorgente e le dimensioni di esportazione prima di generare altri formati.

Continua con: Esporta un logo per un cliente da Figma · Individua le cause di un logo PNG sfocato

Approfondimenti: Figma: dimensioni e formati di esportazione

6. Controlla separatamente i requisiti di Google Search

Google richiede un'icona quadrata di almeno 8 × 8 px e raccomanda dimensioni superiori a 48 × 48. Il suo elenco di formati supportati include PNG e ICO, ma non SVG. Un PNG da 96 px è un'opzione pratica. Dichiaralo su una homepage scansionabile, consenti la scansione del file e mantieni stabile il suo URL. L'elaborazione può richiedere settimane; la visualizzazione non è garantita. Google consente una favicon per hostname, non un'icona diversa per ogni sottodirectory.

Approfondimenti: Google Search Central: linee guida per le favicon

7. Rendi esplicita la consegna allo sviluppatore

Includi la grafica approvata, un breve inventario dei file e l'uso previsto di ogni risorsa. Lo sviluppatore deve posizionare le immagini dove il sito può servirle e configurare i link alle icone o le impostazioni della piattaforma del sito. Scaricare uno ZIP non installa la favicon.

Chiedi una verifica del sito pubblicato nei browser concordati, incluse le modalità chiara e scura. Se appare l'icona sbagliata, verifica prima quale URL del file dichiara la pagina e cosa restituisce quell'URL. Tieni traccia della versione approvata e dei percorsi di installazione.

Un'icona touch Apple usa una dichiarazione specifica. Le web app installate possono usare un manifest con dimensioni e scopi delle icone; un'icona maskable richiede un progetto verificato rispetto alla sua area sicura. Un PNG quadrato grande, da solo, non dimostra che questi requisiti siano stati soddisfatti.

Grafica approvata: simbolo compatto del brand, versione 03.
Risorse per il browser: favicon.svg, favicon.ico, favicon-96.png.
Immagini ICO: 16, 32 e 48 px.
Verifica: icona installata nella scheda su sfondi chiari e scuri.
Risorse aggiuntive per schermata Home o app: da confermare in base al brief concordato per la piattaforma.

Continua con: Aggiungi i ruoli dei file alla guida all'uso del logo

Approfondimenti: Apple: configurazione dell'icona touch, riferimento archiviato · MDN: preparazione di icone maskable

8. Prepara il pacchetto dell'icona approvata con logopack.app

Se usi logopack.app per la consegna complessiva del logo, scegli un SVG compatto approvato per il pacchetto favicon facoltativo e controllane margini e sfondo. La preparazione del pacchetto esporta la grafica scelta; non decide quale riprogettazione abbia approvato il cliente.

Il pacchetto include i file seguenti. L'immagine da 1024 px è un punto di partenza ad alta risoluzione per ulteriori preparazioni. Eventuali requisiti aggiuntivi per PWA, icone maskable Android o app native richiedono comunque risorse e controlli dedicati.

Un account gratuito permette di visualizzare in anteprima il tuo SVG e regolare le impostazioni. Con un account gratuito puoi esportare la grafica demo integrata; per esportare la tua grafica serve Pro. Consulta i piani attuali e controlla il download finale prima della consegna.

• favicon.svg: grafica scalabile dell'icona
• favicon.ico: immagini incorporate da 16, 32 e 48 px
• favicon-96.png: PNG da 96 × 96 px
• apple-touch-icon.png: PNG da 180 × 180 px con sfondo opaco
• icon-1024.png: immagine da 1024 × 1024 px per ulteriori preparazioni
• setup.html: istruzioni di configurazione del sito

Approfondimenti: Prepara un pacchetto con logopack.app · Consulta i piani attuali

Checklist finale per la consegna della favicon

Conserva il sorgente verificato della favicon insieme al master approvato del logo. Così il prossimo aggiornamento del sito diventerà una consegna ripetibile, anziché un'altra ricerca dell'icona giusta.

• ✓Il segno compatto è approvato per questo uso.
• ✓La grafica mantiene le proporzioni all'interno di un'area quadrata.
• ✓Le versioni da 16 e 32 px sono state controllate alle dimensioni previste.
• ✓Margini, controforme e tratti sottili reggono nell'esportazione piccola.
• ✓I file effettivi corrispondono alle dimensioni dichiarate e al contenuto dell'ICO.
• ✓I controlli su sfondi chiari e scuri usano la versione visiva approvata.
• ✓È disponibile un'icona candidata supportata da Google quando Search rientra nel progetto.
• ✓Lo sviluppatore ha i ruoli dei file, le istruzioni di installazione e un riferimento approvato.
• ✓Qualsiasi lavoro relativo a icone touch, PWA o app native è definito separatamente.