Favicon per Shopify
Shopify ti consente di caricare una favicon dall'editor del tema in pochi secondi. Ogni tema Shopify moderno espone un campo Favicon in Impostazioni tema e il CDN di Shopify pubblica l'icona su ogni pagina del tuo negozio. Utilizzare favicon generator per creare prima un quadrato 512×512 PNG: Shopify lo ridimensionerà automaticamente alla dimensione di visualizzazione 32×32 richiesta.
Una favicon è uno dei primi segnali di brand che un potenziale cliente vede quando apre più schede. Negli store Shopify, la favicon viene visualizzata nella scheda del browser, nella barra dei segnalibri e nella barra degli indirizzi. Una favicon nitida e riconoscibile rafforza la fiducia nel marchio e aiuta gli acquirenti a trovare rapidamente la scheda del tuo negozio tra decine di schede aperte.
Ogni tema Shopify moderno (Dawn, Refresh e la maggior parte dei temi premium) include un campo Favicon in Theme Editor in Impostazioni tema. Per accedervi, accedi al tuo amministratore Shopify, vai su Negozio online > Temi e fai clic su Personalizza accanto al tema live. Nella barra laterale di sinistra, fai clic su Impostazioni tema (o sull'icona a forma di ingranaggio), quindi cerca la sezione Favicon.
Shopify consiglia di caricare un PNG quadrato di 32×32 pixel per il campo favicon. In pratica, caricare un PNG 512×512 produce un risultato più nitido perché Shopify lo sottocampiona a 32×32 con una qualità migliore rispetto a quando si parte da un originale 32×32. Inizia sempre dalla fonte quadrata più grande che hai: il generatore lo rende semplice.
Dopo aver caricato la tua favicon, fai clic su Salva nell'angolo in alto a destra di Theme Editor. Shopify elabora l'immagine, la carica sulla sua CDN e la propaga su ogni pagina della vetrina in pochi minuti. Non è necessario ripubblicare il tema o apportare altre modifiche al codice.
I temi Shopify più vecchi o fortemente personalizzati potrebbero non esporre un campo Favicon nelle Impostazioni tema. In tal caso, devi modificare direttamente il codice Liquid del tema. Apri l'editor dei file del tema (Negozio online > Temi > Modifica codice), trova il file theme.liquid e individua la sezione "<head>". Inserisci "<link rel='icon' type='image/png' href='{{ 'favicon.png' | asset_url }}'>" dopo aver caricato il tuo favicon.png nella cartella Risorse del tema.
Per i negozi Shopify sul framework dei temi 2.0, la favicon viene gestita tramite site.webmanifest che Shopify genera automaticamente dalle impostazioni del tema. Se il tuo negozio utilizza una shell Progressive Web App, il manifest di Shopify include la favicon come icona dell'app. L'aggiornamento della favicon del tema aggiorna automaticamente l'icona del manifest: non è necessaria alcuna modifica JSON aggiuntiva.
Gli sfondi trasparenti funzionano correttamente nelle favicon Shopify. L'editor del tema preserva il canale alfa PNG durante il caricamento sulla CDN. Tuttavia, se il tuo logo ha uno sfondo bianco, verrà visualizzato con una casella bianca nelle schede del browser in modalità oscura. Esporta il tuo logo senza riempimento dello sfondo prima del caricamento per evitare ciò.
Se gestisci più negozi Shopify (una configurazione comune per le vetrine internazionali), ogni negozio deve avere la propria favicon impostata in modo indipendente. La favicon è un'impostazione specifica per il negozio, non un'impostazione a livello di partner o di organizzazione Shopify. Accedi all'amministratore di ciascun negozio e ripeti i passaggi Theme Editor.
L'invalidazione della cache può ritardare gli aggiornamenti delle favicon in Shopify. La CDN di Shopify memorizza nella cache le risorse con TTL lunghi. Dopo aver modificato la favicon, i browser potrebbero continuare a mostrare quella vecchia per ore. Apri una finestra privata/in incognito per vedere l'icona aggiornata senza interferenze con la cache. In alternativa, chiedi al browser di eseguire un aggiornamento completo (Ctrl+Shift+R su Windows, Cmd+Shift+R su Mac).
Shopify non inserisce in modo nativo un apple-touch-icon o un tag di collegamento manifest dell'app Web a meno che il modello del tema non li includa. Se desideri che le installazioni sulla schermata iniziale di iOS mostrino il tuo logo anziché uno screenshot della pagina, aggiungi manualmente il tag apple-touch-icon tramite Negozio online > Temi > Modifica codice > theme.liquid. Posiziona `<link rel='apple-touch-icon' sizes='180x180' href='{{ 'apple-touch-icon.png' | asset_url }}'>` nella sezione `<head>` e carica PNG 180×180 su Assets.
Per i negozi Shopify Plus, puoi utilizzare il branding del checkout per personalizzare la favicon nel flusso di pagamento separatamente dalla favicon della vetrina principale. Il branding di Checkout è configurato in Impostazioni > Checkout e account > Personalizza. Ciò consente alle pagine di pagamento di mostrare una favicon diversa rispetto al negozio principale, utile per le configurazioni multimarca.
Per verificare che la tua favicon Shopify funzioni, utilizza live favicon tester e inserisci l'URL del tuo negozio. Il tester conferma che l'icona è accessibile pubblicamente e mostra come viene visualizzata a 16, 32 e 48 pixel. Controlla anche best favicon size per capire quali dimensioni aggiuntive migliorerebbero la tua esperienza di installazione di PWA.
Gli errori comuni della favicon Shopify includono il caricamento di un logo rettangolare senza prima ritagliarlo in un quadrato (produce un'icona schiacciata), il caricamento di un'immagine molto piccola (sfocata sui display Retina) e il dimenticare di fare clic su Salva dopo il caricamento (la modifica non viene confermata finché non si salva esplicitamente). favicon generator esporta un PNG propriamente quadrato a 512×512 pronto per il caricamento diretto Shopify.
Come funziona
- 1
Genera un quadrato 512×512 PNG
Utilizza [favicon generator](tool:favicon-generator) con il tuo logo o marchio. Esporta 512×512 PNG dal pacchetto di download: questa è la dimensione di input corretta per Shopify.
- 2
Apri il tuo tema in Theme Editor
Nel tuo pannello di controllo Shopify, vai su Negozio online > Temi e fai clic su Personalizza accanto al tema live.
- 3
Passare a Impostazioni tema > Favicon
Nella barra laterale di sinistra, fai clic su Impostazioni tema (l'icona a forma di ingranaggio in basso sulla maggior parte dei temi) e cerca la sezione Favicon o Marchio. L'etichetta esatta varia in base al tema.
- 4
Carica il tuo PNG e salva
Fai clic sul campo di caricamento della favicon, seleziona il tuo 512×512 PNG e conferma. Fai clic su Salva nell'angolo in alto a destra. Shopify carica l'icona sul suo CDN e la propaga su tutte le pagine.
- 5
Verifica in una finestra di navigazione in incognito
Apri una finestra del browser privata/in incognito e vai all'URL del tuo negozio. Verifica che la nuova favicon venga visualizzata nella scheda del browser. Utilizza [favicon tester](utility:favicon-tester) per un rapido controllo esterno.
Provalo ora
Genera una favicon pronta per Shopify
Generatore di FaviconFAQ
Dove posso aggiungere una favicon in Shopify?+
Negozio online > Temi > Personalizza > Impostazioni tema > Favicon. Carica un PNG quadrato (consigliato 512×512), fai clic su Salva e Shopify inserisce automaticamente l'icona in ogni pagina della vetrina.
Che dimensione favicon utilizza Shopify?+
Shopify visualizza la favicon a 32×32 pixel nelle schede del browser. Carica 512×512 per il risultato più nitido: Shopify esegue il downsampling a 32×32. Non caricare mai una fonte più piccola di 32×32 altrimenti apparirà sfocata.
Perché la mia favicon Shopify appare sfocata o allungata?+
Probabilmente hai caricato un'immagine non quadrata o una fonte molto piccola. Ritaglia il tuo logo in un quadrato perfetto prima del caricamento e inizia da almeno 256×256 pixel. [favicon generator](tool:favicon-generator) produce automaticamente un quadrato 512×512 PNG pronto per Shopify.
Perché la mia nuova favicon Shopify non viene visualizzata?+
I browser e le cache CDN ritardano gli aggiornamenti. Apri una finestra di navigazione in incognito/privata e vai all'URL del tuo negozio per vedere la favicon aggiornata senza interferenze con la cache. Se mostra ancora la vecchia icona durante la navigazione normale, attendi qualche ora affinché la cache del CDN scada.
Posso aggiungere un apple-touch-icon al mio negozio Shopify?+
Sì, ma richiede la modifica manuale del codice. Carica un apple-touch-icon.png 180×180 nella cartella Risorse del tema, quindi aggiungi `<link rel='apple-touch-icon' href='{{ "apple-touch-icon.png" | asset_url }}'>` in theme.liquid all'interno della sezione "<head>".
Shopify supporta le favicon SVG?+
Il caricamento della favicon Theme Editor integrato non accetta SVG. Per utilizzare una favicon SVG, aggiungi manualmente il tag link in theme.liquid: `<link rel='icon' type='image/svg+xml' href='{{ "favicon.svg" | asset_url }}'>` dopo aver caricato SVG nella cartella Assets.
Ho bisogno di uno sviluppatore per cambiare la mia favicon Shopify?+
No. Utilizzando Theme Editor (Negozio online > Temi > Personalizza > Impostazioni tema > Favicon), puoi caricare e salvare una nuova favicon in meno di due minuti senza codice. L'accesso da sviluppatore è necessario solo per le aggiunte SVG o apple-touch-icon.