Hur man lägger till en Shopify Favoritikon till din Shopify HITTA BUTIK

Lär dig grunderna i vad som är a Shopify Favicon och hur man sätter en i din webbutik.

Om du prenumererar på en tjänst från en länk på den här sidan kan Reeves and Sons Limited tjäna en provision. Se vår etik uttalande.

Identiteten till din e-handelsbutik samlar flera element som logotypen, platsfärger och din marknadsföringsmaterial. Denna identitet stärker ditt övergripande varumärke och skapar en hälsosam påminnelse för dina kunder, vilket framkallar känslor av komfort och pålitlighet när de ser dina varumärkesbilder och färger.

Även om Favicon är liten i storlek, ansluter den också till den varumärkesstrategin. I den här handledningen visar vi dig hur du skapar och lägger till en favoritikon till din Shopify lagra, avrundar ditt utseende online och gör det lättare att känna igen din butik när kunderna besöker.

Vad är en Shopify Favoritikon?

A Shopify Favicon, eller någon Favicon för den delen, är en liten ikon för din webbplats som visas på webbläsarfliken bredvid ditt webbplatsnamn.

Webbläsarens adressfält är det vanligaste området för att visa webbplatsen Favicon, men den kommer också upp på följande platser:

  • Verktygsfältappar
  • bokmärken
  • Historikresultat
  • Sökfält
  • Ibland när de delas på sociala medier

Närhelst webbläsaren behöver visa en länk till din webbplats, och det inte finns mycket utrymme för annat innehåll, ersätter den din vanliga logotyp i full storlek med Favicon.

Som standard Shopify lägger till Shopify logotyp för din Favicon, så vi måste ändra det.

En bra favicon är ofta en mindre version av din logotyp, men ibland varierar de lite för att du vill se till att de är synliga, tar upp allt tilldelat utrymme och lägger till lite färg bredvid ditt webbplatsnamn.

Som standard stöder alla webbläsare favoritikoner i storleken 32×32 pixlar. Det är en ganska liten bild, men med hjälp av några onlinegeneratorer kan du göra din egen Shopify Favicon för din webbplats. Dessutom skalas större bilder ner ändå, så du behöver inte nödvändigtvis få den till exakt 32×32.

En Favicon är ganska meningsfull för onlinebutiker Shopify eftersom de är lätta att lägga till, och det är viktigt att stärka din varumärkesidentitet som onlinesäljare. Vissa hävdar också att det hjälper med SEO.

Fortsätt läsa för att lära dig mer om hur du lägger till Favicon i din Shopify lagra.

Hur man lägger till ett Favicon i din Shopify Butik – Snabbguide

Som nämnts, när du kör en webbplats genom Shopify det lägger automatiskt till en Shopify logotyp som din webbplats favoritikon. Det är inget fel med det, men det är mycket mer professionellt och varumärkesorienterat att inkludera din egen logotyp. Här är stegen du behöver följa:

Steg 1: Gå till Din Shopify instrumentbräda

Gå därför till din Shopify instrumentpanelen och klicka på Online Store under försäljningskanaler.

Steg 2: Navigera till Temainställningar

Navigera till dina teman och klicka på Anpassa-knappen bredvid ditt nuvarande tema. Även om inställningarna ändras från tema till tema, alla de senaste Shopify teman har ett avsnitt för att ändra Favicon.

I Shopify anpassare, bläddra till botten av listan till vänster och klicka på Temainställningar.

Steg 3: Välj knappen Favicon

I det nya avsnittet, hitta och välj Favicon-knappen.

Detta visar en knapp för att välja bild eller utforska gratisbilder. Jag kan inte föreställa mig att de har några gratisbilder som matchar din logotyp, så det är bäst att klicka på Välj bild för att ladda upp en anpassad bild från din dator.

Steg 4: Ladda upp din favoritikon

Välj Favicon-filen och ladda upp den till Shopify.

Efter det kommer du att se en förhandsvisning av din Favicon-ikon. För att göra ändringarna permanenta, välj knappen Spara i Shopify.

För att se din Shopify favicon i aktion, gå till fronten på din webbplats och titta på den aktuella webbläsarfliken. Du bör se Favicon bredvid webbplatsens titel.

Tips för att skapa ditt Favicon

Även om det verkar lätt att skapa en liten ikon, är det viktigt att göra det rätt, med tanke på att kunderna ser favoritikonen när de kommer till din webbplats. Det är också lätt att göra en Favicon som är suddig eller inte fyller hela utrymmet, vilket motverkar syftet med Favicon eftersom den inte är så synlig för ögat.

För att lösa eventuella problem, här är några tips för att skapa din Shopify Favoritikon:

  • Börja din design större än 32×32 och krymp den om det behövs. Du kommer garanterat att få en suddigare bild om du försöker sträcka ut en mindre bild i utrymmet. Att ta en 32×32-bild från Hatchful och försöka sträcka ut den för att bli av med den skrivna delen av logotypen kan till exempel orsaka problem.
  • Du kan vanligtvis inte bara ta din nuvarande logotyp och förvänta dig att den fungerar perfekt som en Favicon.
  • Favicons ser bra ut när du täcker varje pixel i det tillhandahållna utrymmet. Du har inte mycket utrymme, så du bör dra nytta av alla square pixel i 32 × 32-utrymmet.
  • Ta bort all text eftersom det är svårt att läsa i en favoritikon. Undantaget är om ditt primära logotypelement är en stor bokstav.
  • Skjut för solida, ljusare färger. Enkla, tecknade logotyper fungerar bäst.
  • Titta på Favicons från dina favoritmärken. Vad har de gjort för att säkerställa att deras onlinebild får genomslag med ett favicon?
  • Överväg att antingen fylla upp hela utrymmet med en enfärgad bakgrund eller göra en genomskinlig bakgrund med förgrundselementet sträckt så att det bara nuddar kanterna. Du kommer att märka att många större varumärken har transparenta bakgrunder för sina favoriter.
  • ICO-filen format fungerar bra för mindre bilder. Om du inte är bekant, använd en PNG för transparenta bakgrunder eller en JPG för högupplösta favoritikoner med solid bakgrund.

Hur man skapar ett Favicon för din Shopify HITTA BUTIK

Du har möjlighet att designa en Favicon i valfri designprogramvara. Om du föredrar Photoshop, gå med det. Om du hellre föredrar en fri programvara som GIMP eller Pixlr, fungerar alla så länge du håller dig till de nödvändiga måtten på 32×32.

Du har också möjlighet att skapa en Favicon med Shopify's Hatchful-logotyp och gratis favicongenerator. Se hela vår guide På att använda kläckande att bygga en logotyp.

När logotypskaparen väl har gjort sitt arbete ger den dig en fil fylld med flera logotyper formats, varav en är en Favicon.

Tänk på att många av de logotyper du skapar med kläckande (läs vår Hatchful recension) använd vitt utrymme runt logotypen, så du kan behöva justera det för att grafiken ska täcka större delen av utrymmet. Generellt sett har jag funnit att du bara ska använda den medföljande Hatchful-faviconen om den redan ser bra ut (den fyller upp det mesta av utrymmet och inte har små element som text).

Om så inte är fallet, använd ett redigeringsprogram från tredje part som Photoshop eller Pixlr för att klippa bort några av de onödiga elementen.

Viktigt: Du måste använda en större version av bilden om du planerar att sträcka ut den över en duk för att klippa ut text och vitt utrymme. För detta använde jag Hatchful för att skapa logotyper men tog faktiskt en av de stora logotyperna (inte den medföljande Favicon-filen) eftersom jag inte vill att suddighet ska uppstå när jag sträcker den över 32×32-duken.

I din redigeringsprogramvara väljer du en ny duk med bredden och höjden båda inställda på 32.

Gör ett lager för den nya bilden och se till att bilden är större än 32 × 32 duken, eftersom du kanske sträcker ut den. Ladda upp eller placera sedan bilden i duken.

I följande skärmdump har jag zoomat in Favicon-designen så att jag kan se till att den passar square ordentligt. Det är suddigt, men jag vet att det kommer att se mycket bättre ut när jag zoomar ut.

Som du kan se ser den utzoomade versionen av Favicon i Pixlr-designern bra ut. Jag har täckt det mesta av det tilldelade utrymmet, valt en ljus och enfärgad ikon och tagit bort alla tecken på mindre text.

Det sista steget är att ladda ner filen. Du kan välja att göra det till en transparent PNG vid det här laget. Men för den här handledningen håller jag mig till en högupplöst JPG så att den ser så skarp ut som möjligt. Och jag har inget emot att ha en bakgrund med enfärgad.

Gå tillbaka till din Shopify instrumentbräda. Klicka på Online Store> Teman> Anpassa.

Gå sedan till Temainställningar> Favicon.

Ladda upp den nya Favicon och klicka på knappen Spara i Shopify redaktör.

Återigen, det primära sättet att testa och se din Favicon är genom att helt enkelt öppna en flik med webbadressen till din hemsida. Som du kan se så dyker Favicon upp bra och är faktiskt lite bättre än min tidigare Favicon, eftersom den inte fyllde upp hela 32×32-utrymmet.

Slutsatser

A Shopify Favicon tar inte mer än några minuter att designa och lägga till på din webbplats, men det ger en underbar påminnelse till dina besökare på vilken webbplats de är på. Dessutom kan det fungera som ett sätt för människor att hitta din webbplats i sina bokmärken och webbläsarhistorik, med tanke på att de med största sannolikhet söker igenom en lång lista med andra webbplatser när de går igenom dessa avsnitt.

Tänk på att du inte ska nöja dig med en suddig eller oläslig Shopify Favoritbild. Om du upptäcker att den första favoritikonen inte ser riktigt bra ut, eller om du vill klippa ut lite text eller lägga till en transparent bakgrund, gå tillbaka till början och gör det rätt. Även om det inte är en bra idé att inte ha någon Favicon alls, får en suddig eller svår att se Favicon ditt varumärke att se oprofessionellt och lite fånigt ut.

Om du har några frågor om hur du lägger till Favicons till Shopify, eller göra din egen Shopify Favicon, låt oss veta i kommentarfältet nedan.

Joe Warnimont

Joe Warnimont är en Chicago-baserad författare som fokuserar på e-handelsverktyg, WordPress och sociala medier. När han inte fiskar eller utövar yoga samlar han frimärken på nationalparker (även om det främst är för barn). Kolla in Joes portfölj att kontakta honom och se tidigare arbete.

Kommentarer 0 Responses

Kommentera uppropet

E-postadressen publiceras inte. Obligatoriska fält är markerade *

Betyg *

Den här sidan använder Akismet för att minska spam. Läs om hur din kommentardata behandlas.