Sådan tilføjes en Shopify Favicon til din Shopify Butik

Lær det grundlæggende i, hvad der er en Shopify Favicon og hvordan man lægger en i din online butik.

Hvis du abonnerer på en tjeneste fra et link på denne side, kan Reeves and Sons Limited optjene en kommission. Se vores etikerklæring.

Identiteten af din e-handelsbutik samler flere elementer såsom logoet, sidefarver og din markedsføringsmaterialer. Denne identitet styrker dit overordnede brand og skaber en sund påmindelse til dine kunder, der fremkalder en følelse af komfort og pålidelighed, når de ser dine mærkebilleder og farver.

Selvom det er lille i størrelse, hænger Favicon også ind i denne brandingstrategi. I denne vejledning viser vi dig, hvordan du opretter og tilføjer et favicon til din Shopify butik, afrunder dit online udseende og gøre det lettere at genkende din butik, når kunder besøger.

Hvad er en Shopify Favicon?

A Shopify Favicon eller en hvilken som helst Favicon for den sags skyld er et lille ikon for dit websted, der vises på browserfanen ud for dit webstedsnavn.

Browserens adresselinje er det mest almindelige område for at se Favicon-webstedet, men det kommer også op på følgende steder:

  • Værktøjslinje-apps
  • bogmærker
  • Historik resultater
  • Søg barer
  • Nogle gange når de deles på sociale medier

I bund og grund, når browseren skal vise et link til dit websted, og der ikke er meget plads til andet indhold, erstatter den dit sædvanlige logo i fuld størrelse med Favicon.

Shopify Favicon eksempler

Som standard Shopify tilføjer Shopify logo til din Favicon, så vi skal ændre det.

Et godt favicon er ofte en mindre version af dit logo, men nogle gange varierer de lidt, fordi du vil sikre, at de er synlige, optage al den tildelte plads og tilføje lidt farve ud for dit webstedsnavn.

Som standard understøtter alle browsere favicons i størrelsen 32×32 pixels. Det er et ret lille billede, men ved hjælp af nogle online generatorer kan du lave dit eget Shopify Favicon til din hjemmeside. Også større billeder bliver alligevel nedskaleret, så du behøver ikke nødvendigvis at få det til præcis 32×32.

En Favicon giver en hel del mening for onlinebutikker Shopify da de er nemme at tilføje, og det er vigtigt at styrke din brandidentitet som online sælger. Nogle hævder også, at det hjælper med SEO.

Fortsæt læsning for at lære mere om, hvordan du tilføjer Favicon til din Shopify butik.

Sådan tilføjes et Favicon til din Shopify Butik – Hurtig vejledning

Som nævnt, når du kører et websted igennem Shopify det tilføjer automatisk en Shopify logo som dit websteds favicon. Det er der ikke noget galt i, men det er langt mere professionelt og brand-orienteret at inkludere dit eget logo. Her er de trin, du skal følge:

Trin 1: Gå til Din Shopify Dashboard

Gå derfor til din Shopify dashboard og klik på Online Store under salgskanaler.

Trin 2: Naviger til temaindstillinger

Naviger til dine temaer, og klik på knappen Tilpas ud for dit aktuelle tema. Selvom indstillinger skifter fra tema til tema, alt det seneste Shopify temaer har et afsnit til at ændre Favicon.

online butik

I Shopify customizer, rul til bunden af ​​listen til venstre og klik på Temaindstillinger.

temaindstillinger

Trin 3: Vælg Favicon-knappen

I det nye afsnit skal du finde og vælge Favicon-knappen.

favicon Shopify favicon

Dette afslører en knap til at vælge billede eller udforske gratis billeder. Jeg kan ikke forestille mig, at de har nogen gratis billeder, der matcher dit logo, så det er bedst at klikke på Vælg billede for at uploade et brugerdefineret billede fra din computer.

Vælg billede

Trin 4: Upload dit favicon

Vælg Favicon-filen, og upload den til Shopify.

Derefter vil du se en forhåndsvisning af dit Favicon-ikon. For at gøre ændringerne permanente skal du vælge knappen Gem i Shopify.

Gem knap

For at se din Shopify favicon i aktion, gå til frontend på dit websted og se på den aktuelle browserfane. Du skal se Favicon ud for dit websteds titel.

eksempel Shopify favicon

Tips til oprettelse af dit Favicon

Selvom det virker nemt at generere et lille ikon, er det vigtigt at få det rigtigt, i betragtning af at kunderne ser Favicon, når de kommer til dit websted. Det er også nemt at lave et favicon, der er sløret eller ikke fylder hele rummet, hvilket besejrer formålet med favicon, da det ikke er så synligt for øjet.

For at løse eventuelle problemer er her nogle tip til oprettelse af din Shopify Favicon:

  • Start dit design større end 32×32 og krymp det ned, hvis det er nødvendigt. Du vil helt sikkert have et mere sløret billede, hvis du prøver at strække et mindre billede ud i rummet. For eksempel kan det give problemer at tage et 32×32-billede fra Hatchful og prøve at strække det ud for at slippe af med den skrevne del af logoet.
  • Du kan typisk ikke bare tage dit nuværende logo og forvente, at det fungerer perfekt som et Favicon.
  • Favicon's ser godt ud, når du dækker hver pixel af den angivne plads. Du har ikke meget plads, så du bør drage fordel af hver square pixel i 32 × 32 rummet.
  • Fjern al tekst, da det er svært at læse i et favicon. Undtagelsen er, hvis dit primære logoelement er et stort bogstav.
  • Optag for solide, lysere farver. Enkle tegneserie-logoer fungerer bedst.
  • Se på Favicons fra dine yndlingsmærker. Hvad har de gjort for at sikre, at deres online image kommer igennem med et favicon?
  • Overvej enten at fylde hele rummet op med en ensfarvet baggrund eller lave en gennemsigtig baggrund med forgrundselementet strakt, så det bare rører kanterne. Du vil bemærke, at mange større mærker har gennemsigtige baggrunde for deres favoritter.
  • ICO-filen format fungerer godt til mindre billeder. Hvis du ikke er bekendt, så brug en PNG til gennemsigtige baggrunde eller en JPG til højopløselige favicons med solide baggrunde.

Sådan oprettes et Favicon til din Shopify Butik

Du har mulighed for at designe en Favicon i enhver designsoftware efter eget valg. Hvis du foretrækker Photoshop, så gå med det. Hvis du hellere vil have en gratis software som GIMP eller Pixlr, fungerer de alle, så længe du holder dig til de nødvendige dimensioner på 32×32.

Du har også mulighed for at lave en Favicon med Shopify's Hatchful Logo og Gratis Favicon Generator. Se hele vores guide ved brug Lækkert at opbygge et logo.

download logo

Når logoskaberen gør sit arbejde, giver den dig en fil fyldt med flere logoer formats, hvoraf den ene er en Favicon.

Shopify Favicon-fil

Husk, at mange af de logoer, du laver med Lækkert (læs vores Hatchful anmeldelse) brug hvidt mellemrum omkring logoet, så du skal muligvis justere det, så grafikken dækker det meste af rummet. Generelt har jeg fundet ud af, at du kun bør bruge det medfølgende Hatchful-favicon, hvis det allerede ser godt ud (det fylder det meste af pladsen og ikke har små elementer som tekst).

Hvis det ikke er tilfældet, skal du bruge en tredjeparts redigeringssoftware som Photoshop eller Pixlr til at skære nogle af de unødvendige elementer ud.

Vigtig: Du skal bruge en større version af billedet, hvis du planlægger at strække det over et lærred for at skære tekst og hvidt mellemrum ud. Til dette brugte jeg Hatchful til at generere logoer, men tog faktisk et af de store logoer (ikke den medfølgende Favicon-fil), da jeg ikke ønsker, at der skal opstå sløring, når jeg strækker det over 32×32-lærredet.

Inde i din redigeringssoftware skal du vælge et nyt lærred med bredden og højden begge indstillet til 32.

32 af 32

Lav et lag til det nye billede, og sørg for, at billedet er større end 32 × 32 lærredet, da du måske strækker det ud. Upload eller placer derefter billedet på lærredet.

I det følgende skærmbillede har jeg zoomet ind Favicon-designet, så jeg kan sikre mig, at det passer til square ordentligt. Det er sløret, men jeg ved, at det vil se meget bedre ud, når jeg zoomer ud.

stor version

Som du kan se, ser den udzoomede version af Favicon i Pixlr-designeren godt ud. Jeg har dækket det meste af den tildelte plads, valgt et lyst og ensfarvet ikon og fjernet alle tegn på mindre tekst.

mindre version

Det sidste trin er at downloade filen. Du kan vælge at gøre det til en gennemsigtig PNG på dette tidspunkt. Men til denne tutorial holder jeg mig til en JPG i høj opløsning, så den ser så skarp ud som muligt. Og jeg gider ikke have en baggrund med ensfarvet.

Hent - Shopify favicon

Gå tilbage til din Shopify instrumentbræt. Klik på Online butik> Temaer> Tilpas.

Gå derefter til Temaindstillinger> Favicon.

Upload den nye Favicon, og klik på knappen Gem i Shopify editor.

billedeksempel

Igen, den primære måde at teste og se dit Favicon på er blot at åbne en fane med din hjemmesides webadresse. Som du kan se, dukker Favicon pænt op og er faktisk en smule bedre end mit tidligere Favicon, da den ikke fyldte hele 32×32 pladsen.

det endelige produkt - Shopify favicon

I Konklusion

A Shopify Favicon tager ikke mere end et par minutter at designe og tilføje til dit websted, men det giver en vidunderlig påmindelse til dine besøgende om, hvilken hjemmeside de er på. Derudover kan det tjene som en måde for folk at finde dit websted i deres bogmærker og browserhistorier, i betragtning af at de højst sandsynligt søger gennem en lang liste af andre websteder, når de går gennem disse sektioner.

Husk på, at du ikke skal nøjes med en sløret eller ulæselig Shopify Favicon billede. Hvis du opdager, at det første Favicon ikke ser helt rigtigt ud, eller du gerne vil klippe noget tekst ud eller tilføje en gennemsigtig baggrund, skal du gå tilbage til begyndelsen og gøre det rigtigt. Selvom det ikke er en god idé overhovedet ikke at have nogen Favicon, får en sløret eller svær at se Favicon dit brand til at se uprofessionelt og lidt fjollet ud.

Hvis du har spørgsmål om at tilføje Favicons til Shopifyeller lave din egen Shopify Favicon, lad os det vide i kommentarfeltet nedenfor.

Joe Warnimont

Joe Warnimont er en Chicago-baseret forfatter, der fokuserer på e-handelsværktøjer, WordPress og sociale medier. Når han ikke fisker eller dyrker yoga, samler han frimærker i nationalparker (selvom det hovedsageligt er for børn). Tjek Joe's portfolio at kontakte ham og se tidligere arbejde.

Kommentarer 0 Responses

Giv en kommentar

Din e-mail adresse vil ikke blive offentliggjort. Krævede felter er markeret *

Rating *

Dette websted bruger Akismet til at reducere spam. Lær, hvordan dine kommentardata behandles.