Prima di caricare l’icona, conviene chiarire tre vincoli pratici
- Su Shopify il favicon si aggiunge dal tema, ma non tutti i piani lo supportano: lo Starter no, il Basic e superiori sì.
- Le dimensioni che funzionano meglio nella pratica sono 16x16 o 32x32 px, perché l’icona viene mostrata in spazi minuscoli.
- Per Google l’icona deve essere quadrata e accessibile al crawler; la comparsa nei risultati non è però garantita.
- Nel checkout e negli account cliente il favicon non si gestisce come nel tema standard: su Shopify Plus entrano in gioco Branding API o Checkout Blocks.
- La semplicità visiva conta più del dettaglio: un simbolo pulito batte quasi sempre un logo pieno di testo.
Perché un favicon conta davvero in un negozio Shopify
Io non considero il favicon un semplice abbellimento. È un segnale visivo minimo, ma costante: compare nella scheda del browser, nei preferiti e in quei contesti in cui un utente torna al tuo negozio senza ricordare per forza il nome completo. In un e-commerce, questa micro-presenza aiuta la riconoscibilità e trasmette l’idea di un sito curato fino ai dettagli.
La differenza si vede soprattutto quando l’utente ha molte tab aperte. Un’icona leggibile accelera il rientro sul sito, mentre un simbolo confuso o troppo complesso si perde nel rumore. Per questo io lo tratto come un pezzo di branding operativo, non come un ornamento grafico: deve funzionare in piccolo, in fretta e in contesti diversi.
Da qui la domanda utile non è “che logo posso usare?”, ma “quale segno resta riconoscibile quando viene schiacciato a dimensioni minuscole?”. È il punto da cui conviene partire prima di entrare nelle impostazioni di Shopify.
Dove si aggiunge in Shopify e quali limiti hai sul piano
Shopify Help Center indica che il favicon si aggiunge dal tema, dentro le impostazioni del negozio, e che la disponibilità dipende dal piano. In pratica, se lavori su Basic o superiore puoi configurarlo; sul piano Starter, invece, questa opzione non è disponibile.
| Scenario | Cosa significa in pratica |
|---|---|
| Piano Basic o superiore | Puoi caricare e salvare il favicon dal tema. |
| Piano Starter | Non hai accesso alla funzione favicon nel negozio online. |
| Theme editor | In molti temi trovi la voce sotto Theme settings, spesso in Logo o Favicon. |
| Checkout e customer accounts | Su Shopify Plus la gestione passa da Branding API o Checkout Blocks, non dal classico editor del tema. |
| Anteprima del tema | L’icona può non vedersi nell’editor, perché non stai guardando il negozio live. |
Il flusso operativo è semplice: apri Online Store > Themes, entri in Edit theme, apri le Theme settings e cerchi la sezione dedicata al logo o al favicon, a seconda della versione del tema. Poi selezioni l’immagine, eventualmente aggiungi un alt text breve se il tema lo consente, e salvi.
Se lavori spesso da mobile, puoi fare la stessa cosa dall’app Shopify passando per il canale Online Store e la gestione dei temi. Una volta chiarito il punto di accesso, il vero lavoro comincia sul design, perché un favicon funziona solo se resta leggibile in pochi pixel.
Come progettare un’icona leggibile in pochi pixel
Qui, secondo me, si vince o si perde tutto. La tentazione più comune è prendere il logo completo e ridurlo. Quasi sempre è una cattiva idea: il testo diventa microscopico, i dettagli si impastano e l’effetto finale sembra casuale. Io preferisco quasi sempre un simbolo, una lettera fortemente stilizzata o un monogramma molto pulito.
Le indicazioni pratiche si possono riassumere così. Google Search Central specifica che l’icona deve essere quadrata, almeno 8x8 px, e raccomanda dimensioni superiori a 48x48 px per una resa migliore; Shopify, però, riduce a 32x32 px i file troppo grandi caricati nel tema. Questo significa che il tuo obiettivo reale non è “fare un’icona grande”, ma progettare un segno che continui a funzionare anche dopo il ridimensionamento.| Scelta grafica | Meglio fare | Perché funziona |
|---|---|---|
| Forma | Usare un file quadrato e un segno centrale semplice | Evita tagli e mantiene la simmetria |
| Testo | Limitarsi, se serve, a una sola lettera | Le scritte lunghe spariscono subito |
| Colori | Puntare su contrasto netto e palette ridotta | Il segno emerge anche in una tab affollata |
| Dettagli | Eliminare linee sottili e particolari decorativi | I micro-dettagli si perdono a 16 o 32 px |
| Sfondo | Verificare la resa su bianco e su interfacce scure | Evita che l’icona sparisca o appaia sporca |
Se devo fare una scelta netta, scelgo un simbolo coerente con il brand ma molto più essenziale del logo principale. Un favicon non deve spiegare il negozio: deve essere riconoscibile al primo sguardo. Ed è proprio qui che si nascondono gli errori più frequenti.
Gli errori che fanno sembrare il brand meno curato
Molti favicon non sono brutti in assoluto. Sono solo sbagliati per il contesto. Il problema non è estetico in senso astratto, ma funzionale: l’icona deve lavorare in uno spazio minuscolo e con tempi di lettura quasi zero.
| Errore | Effetto visivo | Correzione utile |
|---|---|---|
| Logo completo con payoff | Diventa illeggibile | Passa a simbolo o monogramma |
| Troppi dettagli | L’icona si impasta | Semplifica forme e bordi |
| Contrasto debole | Si confonde con lo sfondo | Aumenta il contrasto cromatico |
| File non quadrato | Cropping o deformazioni | Esporta direttamente in formato 1:1 |
| Aspettare la comparsa immediata in Google | Falsa sensazione di errore | Controlla crawling, cache e tempi di aggiornamento |
| Guardarlo solo nell’editor | Valutazione fuorviante | Testa il sito live, non solo l’anteprima |
C’è un altro fraintendimento tipico: pensare che il favicon debba per forza contenere tutto il marchio. Io faccio l’opposto. Più il segno è forte, più può essere minimo. E più è minimo, più deve essere coerente con il resto dell’identità visiva, altrimenti sembra messo lì per riempire uno spazio.
Cosa cambia tra negozio live, ricerca Google e checkout
Il comportamento del favicon non è identico ovunque. Nel negozio live lo vedi nella scheda del browser e nei preferiti, quindi il lavoro è soprattutto di riconoscibilità. Nei risultati di ricerca, invece, entra in gioco Google: l’icona deve essere crawlable, la home page deve essere accessibile e l’URL del favicon non dovrebbe cambiare di continuo. Anche così, però, la comparsa non è garantita. Google Search Central lo dice in modo abbastanza chiaro: rispettare le linee guida non obbliga il motore a mostrare sempre l’icona.
Nel checkout e negli account cliente la situazione cambia ancora. Su Shopify Plus il favicon può essere gestito con gli strumenti di branding dedicati, mentre nel classico editor del tema non si applica automaticamente a quelle aree. Questo dettaglio conta, perché molti pensano che una modifica al tema basti ovunque: in realtà non è così.
Se vuoi una regola semplice, tienila così: tema standard per il negozio, strumenti dedicati per checkout e account cliente, attenzione al crawling per la visibilità in Google. A questo punto resta solo il controllo finale, quello che io faccio sempre prima di considerare chiuso il lavoro.
Il controllo finale che farei prima di considerarlo pronto
Prima di pubblicare un favicon, io passerei da una verifica molto concreta. Non mi fermerei alla sensazione che “sembra a posto”, perché i problemi veri emergono solo in condizioni d’uso reali.
- Controllo il file in formato quadrato e verifico che il segno principale resti leggibile già a dimensione molto piccola.
- Guardo l’icona in una tab del browser accanto a più schede aperte, non da sola.
- La provo su sfondo chiaro e, se possibile, anche in un contesto scuro.
- Vado a vedere il sito live, non solo l’anteprima del tema.
- Se mi interessa la visibilità in ricerca, mi assicuro che il sito sia crawlable e che non ci siano blocchi tecnici inutili.
- Tengo sempre da parte una versione sorgente migliore del file caricato, così posso riadattarlo senza rifare tutto da zero.
Un favicon ben fatto non salva un brand debole, ma evita che un brand già solido sembri improvvisato. Nella pratica, è uno di quei dettagli che costano poco in termini di tempo e danno molto in termini di coerenza visiva: proprio per questo, io non lo lascerei mai come ultimo pensiero.
