Come aggiungere un Shopify Favicon per il tuo Shopify Negozio

L'identità di il tuo negozio di e-commerce riunisce diversi elementi come il logo, i colori del sito e il tuo file materiali di marketing. Questa identità rafforza il tuo marchio in generale e crea un sano promemoria per i tuoi clienti, evocando sentimenti di comfort e affidabilità quando vedono le immagini e i colori del tuo marchio.

Sebbene di piccole dimensioni, la Favicon si collega anche a questa strategia di branding. In questo tutorial ti mostreremo come creare e aggiungere una favicon al tuo file Shopify Tornare al suo account, completando il tuo aspetto online e rendendo più facile riconoscere il tuo negozio quando i clienti visitano.

Cos'è un Shopify Favicon?

A Shopify Favicon, o qualsiasi Favicon per quella materia, è una piccola icona per il tuo sito web che appare nella scheda del browser accanto al nome del tuo sito web.

La barra degli indirizzi del browser è l'area più comune per visualizzare il sito Favicon, ma si presenta anche nelle seguenti posizioni:

• App della barra degli strumenti
• Preferiti
• Risultati della storia
• Barre di ricerca
• A volte quando condiviso sui social media

In sostanza, ogni volta che il browser deve mostrare un collegamento al tuo sito Web e non c'è molto spazio per altri contenuti, sostituisce il tuo solito logo a grandezza naturale con Favicon.

Per impostazione predefinita, Shopify aggiunge il file Shopify logo per la tua Favicon, quindi dobbiamo cambiarlo.

Una buona favicon è spesso una versione più piccola del tuo logo, ma a volte variano leggermente perché vuoi assicurarti che siano visibili, occupino tutto lo spazio assegnato e aggiungi un po 'di colore accanto al nome del tuo sito web.

Per impostazione predefinita, tutti i browser supportano Favicon di dimensioni 32 × 32 pixel. È un'immagine piuttosto piccola, ma con l'aiuto di alcuni generatori online puoi crearne una tua Shopify Favicon per il tuo sito web. Inoltre, le immagini più grandi vengono comunque ridimensionate, quindi non devi necessariamente portarle esattamente a 32 × 32.

Un Favicon ha abbastanza senso per i negozi online su Shopify poiché sono facili da aggiungere ed è importante rafforzare l'identità del tuo marchio come venditore online. Alcuni sostengono anche che aiuta con la SEO.

Continua a leggere per saperne di più su come aggiungere Favicon al tuo Shopify memorizzare.

Come aggiungere una favicon al tuo file Shopify Negozio – Guida rapida

Come accennato, quando si esegue un sito tramite Shopify aggiunge automaticamente un file Shopify logo come Favicon del tuo sito. Non c'è niente di sbagliato in questo, ma è molto più professionale e orientato al marchio includere il proprio logo. Ecco i passaggi che devi seguire:

Passaggio 1: vai a Tuo Shopify Cruscotto

Pertanto, vai al tuo Shopify dashboard e fare clic su Negozio online in Canali di vendita.

Passaggio 2: vai a Impostazioni tema

Passa ai temi e fai clic sul pulsante Personalizza accanto al tema corrente. Sebbene le impostazioni cambino da tema a tema, tutte le più recenti Shopify i temi hanno una sezione per cambiare la Favicon.

Nel Shopify personalizzatore, scorri fino in fondo all'elenco a sinistra e fai clic su Impostazioni tema.

Passaggio 3: seleziona il pulsante Favicon

Nella nuova sezione, trova e seleziona il pulsante Favicon.

Questo rivela un pulsante per selezionare l'immagine o esplorare immagini gratuite. Non riesco a immaginare che abbiano immagini gratuite che corrispondono al tuo logo, quindi è meglio fare clic su Seleziona immagine per caricare un'immagine personalizzata dal tuo computer.

Passaggio 4: carica la tua favicon

Scegli il file Favicon e caricalo su Shopify.

Dopodiché, vedrai un'anteprima della tua icona Favicon. Per rendere permanenti le modifiche, seleziona il pulsante Salva in Shopify.

Per visualizzare il tuo Shopify favicon in azione, vai al frontend del tuo sito web e guarda la scheda del browser corrente. Dovresti vedere la Favicon accanto al titolo del tuo sito.

Suggerimenti per creare la tua Favicon

Sebbene sembri facile generare una piccola icona, è importante farlo bene, considerando che i clienti vedono la Favicon ogni volta che visitano il tuo sito. È anche facile creare una Favicon sfocata o che non riempia l'intero spazio, vanificando lo scopo del Favicon poiché non è così visibile agli occhi.

Per risolvere eventuali problemi, ecco alcuni suggerimenti per creare il tuo file Shopify Icona preferita:

• Inizia il tuo disegno più grande di 32 × 32 e riducilo se necessario. Sei destinato ad avere un'immagine più sfocata se provi ad allungare un'immagine più piccola nello spazio. Ad esempio, prendere un'immagine 32 × 32 da Hatchful e cercare di allungarla per eliminare la parte scritta del logo può causare problemi.
• In genere non puoi semplicemente prendere il tuo logo attuale e aspettarti che funzioni perfettamente come Favicon.
• Favicon ha un bell'aspetto quando copri ogni pixel dello spazio fornito. Non hai molto spazio, quindi dovresti approfittarne square pixel nello spazio 32 × 32.
• Rimuovi tutto il testo, poiché è difficile da leggere in una Favicon. L'eccezione è se l'elemento principale del logo è una lettera grande.
• Scatta per colori pieni e luminosi. I loghi semplici e da cartone animato funzionano meglio.
• Guarda le favicon delle tue marche preferite. Cosa hanno fatto per garantire che la loro immagine online venga approvata da una favicon?
• Considera di riempire l'intero spazio con uno sfondo a tinta unita o di creare uno sfondo trasparente con l'elemento in primo piano allungato in modo che tocchi appena i bordi. Noterai che molti marchi più grandi hanno sfondi trasparenti per le loro Favicon.
• Il file ICO format funziona bene per immagini più piccole. Se non hai familiarità, usa un PNG per sfondi trasparenti o un JPG per favicon ad alta risoluzione con sfondi solidi.

Come generare una favicon per il tuo Shopify Negozio

Hai la possibilità di progettare una Favicon in qualsiasi software di progettazione di tua scelta. Se preferisci Photoshop, segui quello. Se preferisci un software gratuito come GIMP o Pixlr, funzionano tutti a patto di rispettare le dimensioni richieste di 32 × 32.

Hai anche la possibilità di creare una Favicon con ShopifyLogo Hatchful e generatore Favicon gratuito. Visualizza la nostra intera guida sull'uso Hatchful per costruire un logo.

Una volta che il creatore del logo ha fatto il suo lavoro, ti fornisce un file pieno di loghi multipli formats, uno dei quali è una Favicon.

Tieni presente che molti dei loghi che crei con Hatchful (leggi il nostro Recensione Hatchful) utilizza uno spazio bianco attorno al logo, quindi potrebbe essere necessario regolarlo affinché la grafica copra la maggior parte dello spazio. In generale, ho scoperto che dovresti usare la favicon Hatchful fornita solo se ha già un bell'aspetto (riempie la maggior parte dello spazio e non ha piccoli elementi come il testo).

In caso contrario, utilizza un software di editing di terze parti come Photoshop o Pixlr per eliminare alcuni degli elementi non necessari.

Consigli : È necessario utilizzare una versione più grande dell'immagine se si prevede di allungarla su una tela per ritagliare testo e spazi bianchi. Per questo, ho usato Hatchful per generare loghi ma in realtà ho preso uno dei loghi grandi (non il file Favicon fornito) poiché non voglio che si verifichi sfocatura quando lo allungo sulla tela 32 × 32.

All'interno del tuo software di editing, scegli una nuova tela con Larghezza e Altezza impostate entrambe su 32.

Crea un livello per la nuova immagine e assicurati che l'immagine sia più grande della tela 32 × 32, poiché potresti allungarla. Quindi carica o posiziona l'immagine nella tela.

Nello screenshot seguente, ho ingrandito il design di Favicon in modo da assicurarmi che si adatti al file square propriamente. È sfocato, ma so che avrà un aspetto molto migliore quando eseguo lo zoom indietro.

Come puoi vedere, la versione ridotta della Favicon nel designer Pixlr sembra buona. Ho coperto la maggior parte dello spazio assegnato, ho optato per un'icona di colore brillante e solido e ho rimosso tutti i segni di testo più piccolo.

L'ultimo passaggio è scaricare il file. A questo punto puoi scegliere di renderlo un PNG trasparente. Ma per questo tutorial mi attengo a un JPG ad alta risoluzione in modo che appaia il più nitido possibile. E non mi dispiace avere uno sfondo con un colore solido.

Torna al tuo Shopify pannello di controllo. Fare clic su Negozio online> Temi> Personalizza.

Quindi vai su Impostazioni tema> Favicon.

Carica la nuova Favicon e fai clic sul pulsante Salva nel file Shopify editore.

Ancora una volta, il modo principale per testare e visualizzare la tua Favicon è semplicemente aprire una scheda con l'URL del sito web della tua home page. Come puoi vedere, il Favicon si presenta bene ed è in realtà un po 'meglio del mio precedente Favicon, visto che quello non ha riempito l'intero spazio 32 × 32 fornito.

In conclusione

A Shopify Favicon richiede non più di pochi minuti per progettare e aggiungere al tuo sito, ma fornisce un meraviglioso promemoria ai tuoi visitatori su quale sito web si trovano. Inoltre, può servire come un modo per le persone di trovare il tuo sito web nei loro segnalibri e nelle cronologie dei browser, considerando che molto probabilmente stanno cercando in un lungo elenco di altri siti quando passano attraverso quelle sezioni.

Tieni presente che non dovresti accontentarti di un'immagine sfocata o illeggibile Shopify Immagine Favicon. Se trovi che il primo Favicon non sembra corretto, o desideri ritagliare del testo o aggiungere uno sfondo trasparente, torna all'inizio e fallo bene. Sebbene non sia una buona idea non avere alcuna Favicon, una Favicon sfocata o difficile da vedere rende il tuo marchio poco professionale e un po 'sciocco.

Se hai domande sull'aggiunta di favicon a Shopifyo crearne uno tuo Shopify Favicon, faccelo sapere nella sezione commenti qui sotto.