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

I grund och botten, när 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.

Shopify Favicon-exempel

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 Favicons i storlek 32 × 32 pixlar. Det är en ganska liten bild, men med hjälp av några onlinegeneratorer kan du skapa dina egna Shopify Favicon för din webbplats. Dessutom blir större bilder ändå nedskalade, så du behöver inte nödvändigtvis få det 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 online-sä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.

Online Store

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

temainställningar

Steg 3: Välj knappen Favicon

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

favicon Shopify Favicon

Detta visar en knapp för att välja bild eller utforska gratis bilder. Jag kan inte föreställa mig att de har några gratis bilder 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.

välj bild

Steg 4: Ladda upp din favoritikon

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

Därefter ser du en förhandsgranskning av din Favicon-ikon. För att göra ändringarna permanenta, välj Spara-knappen i Shopify.

spara knappen

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.

exempel Shopify Favicon

Tips för att skapa ditt Favicon

Även om det verkar enkelt att skapa en liten ikon är det viktigt att få rätt, med tanke på att kunder ser Favicon när de kommer till din webbplats. Det är också enkelt att skapa en Favicon som är suddig eller inte fyller hela utrymmet, vilket besegrar Faviconens syfte eftersom det inte är så synligt för ögat.

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

  • Starta din design större än 32 × 32 och krympa ner den vid behov. Du kommer säkert att ha en suddigare bild om du försöker sträcka en mindre bild in i utrymmet. Att till exempel 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 orsaka problem.
  • Du kan vanligtvis inte bara ta din nuvarande logotyp och förvänta dig att den fungerar perfekt som en Favicon.
  • Favicon 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 varje square pixel i 32 × 32-utrymmet.
  • Ta bort all text, eftersom det är svårt att läsa i en Favicon. 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 hela utrymmet med en heltäckande bakgrund eller skapa en transparent bakgrund med förgrundselementet sträckt så att det bara rör vid kanterna. Du kommer att märka att många större märken har transparenta bakgrunder för sina Favicons.
  • 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 vill ha en gratis programvara som GIMP eller Pixlr, fungerar alla så länge du håller dig till önskade dimensioner på 32 × 32.

Du har också möjlighet att skapa en Favicon med ShopifyHatchful Logo och gratis Favicon Generator. Se hela vår guide På att använda kläckande att bygga en logotyp.

ladda ner logotypen

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

Shopify Favicon-fil

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 den för att bilden ska täcka större delen av utrymmet. I allmänhet har jag funnit att du bara bör använda den medföljande Hatchful-favicon om det redan ser bra ut (det fyller större delen av utrymmet och har inte 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 ut 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 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 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.

32 av 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.

stor version

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 fast färgikon och tagit bort alla tecken på mindre text.

mindre version

Det sista steget är att ladda ner filen. Du kan välja att göra det till en transparent PNG vid denna tidpunkt. Men för denna handledning håller jag fast med 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 en solid färg.

ladda ner - Shopify Favicon

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.

förhandsgranskning av bilder

Återigen är det primära sättet att testa och se din Favicon genom att helt enkelt öppna en flik med webbadressen till din hemsida. Som du kan se visas Favicon snyggt och är faktiskt lite bättre än min tidigare Favicon, eftersom den inte fyllde hela det 32 ​​x 32-utrymmet som tillhandahölls.

slutprodukten - Shopify Favicon

Slutsatser

A Shopify Favicon tar inte mer än några minuter att designa och lägga till 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äsarhistorier, med tanke på att de troligen söker igenom en lång lista med andra webbplatser när de går igenom dessa avsnitt.

Tänk på att du inte bör nöja dig med suddiga eller oläsliga Shopify Favicon-bild. Om du upptäcker att den första Favicon inte ser helt rätt ut, eller om du vill klippa ut lite text eller lägga till en transparent bakgrund, gå tillbaka till början och få rätt. Även om det inte är en bra idé att inte ha någon Favicon alls, gör en suddig eller svårsedd Favicon att ditt varumärke ser oprofessionellt och lite dumt 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.