Hvordan legge til en Shopify Favorittikon til din Shopify Butikk

Lær det grunnleggende om hva som er en Shopify Favicon og hvordan du setter en i nettbutikken din.

Hvis du abonnerer på en tjeneste fra en lenke på denne siden, kan Reeves and Sons Limited tjene en provisjon. Se vår etisk uttalelse.

Identiteten til nettbutikken din samler flere elementer som logo, nettstedfarger og din markedsføringsmateriell. Denne identiteten styrker ditt overordnede merke og skaper en sunn påminnelse for kundene dine, og fremkaller en følelse av komfort og pålitelighet når de ser merkevarenes bilder og farger.

Selv om den er liten i størrelse, knytter Favicon seg også inn i den merkevarestrategien. I denne opplæringen viser vi deg hvordan du lager og legger til et favorittikon til din Shopify oppbevare, avrunding av utseendet ditt på nettet og gjør det lettere å gjenkjenne butikken din når kunder besøker

Hva er en Shopify Favorittikon?

A Shopify Favicon, eller en hvilken som helst Favicon for den saks skyld, er et lite ikon for nettstedet ditt som vises i nettleserfanen ved siden av nettstedsnavnet.

Nettleserens adressefelt er det vanligste området for å se nettstedet Favicon, men det kommer også opp på følgende steder:

  • Verktøylinje-apper
  • bokmerker
  • Historie resultater
  • Søk barer
  • Noen ganger når de deles på sosiale medier

I hovedsak, når nettleseren trenger å vise en lenke til nettstedet ditt, og det ikke er mye plass til annet innhold, erstatter den din vanlige logo i full størrelse med Favicon.

Shopify Favicon eksempler

Som standard Shopify legger til Shopify logo for Favicon, så vi må endre det.

Et godt favorittikon er ofte en mindre versjon av logoen din, men noen ganger varierer de litt fordi du vil sikre at de er synlige, tar opp all den tildelte plassen og legger til litt farge ved siden av nettstedet ditt.

Som standard støtter alle nettlesere favorittikoner i størrelsen 32×32 piksler. Det er et ganske lite bilde, men ved hjelp av noen nettgeneratorer kan du lage ditt eget Shopify Favorittikon for nettstedet ditt. Dessuten blir større bilder nedskalert uansett, så du trenger ikke nødvendigvis å få det til nøyaktig 32×32.

En Favicon gir ganske mye mening for nettbutikker på Shopify siden de er enkle å legge til, og det er viktig å styrke merkevareidentiteten din som nettselger. Noen hevder også at det hjelper med SEO.

Fortsett å lese for å lære mer om hvordan du legger til Favicon i din Shopify oppbevare.

Hvordan legge til et Favicon til din Shopify Butikk – Hurtigveiledning

Som nevnt, når du kjører et nettsted gjennom Shopify det legger automatisk til en Shopify logo som nettstedets favorittikon. Det er ikke noe galt med det, men det er langt mer profesjonelt og merkevareorientert å inkludere din egen logo. Her er trinnene du må følge:

Trinn 1: Gå til Din Shopify Dashboard

Gå derfor til din Shopify dashbordet og klikk på Nettbutikk under Salgskanaler.

Trinn 2: Naviger til temainnstillinger

Naviger til temaene dine og klikk på Tilpass-knappen ved siden av ditt nåværende tema. Selv om innstillingene endres fra tema til tema, er det siste Shopify temaer har en seksjon for å endre Favicon.

nettbutikk

på Shopify for å tilpasse, bla til bunnen av listen til venstre og klikk på Temainnstillinger.

temainnstillinger

Trinn 3: Velg Favicon-knappen

I den nye delen, finn og velg Favicon-knappen.

favorittikon - Shopify Favicon

Dette viser en knapp for å velge bilde eller utforske gratis bilder. Jeg kan ikke forestille meg at de har noen gratis bilder som matcher logoen din, så det er best å klikke på Velg bilde for å laste opp et tilpasset bilde fra datamaskinen din.

velg bilde

Trinn 4: Last opp favorittikonet ditt

Velg Favicon-filen og last den opp til Shopify.

Etter det vil du se en forhåndsvisning av Favicon-ikonet ditt. For å gjøre endringene permanente, velg Lagre-knappen i Shopify.

lagre knapp

For å se din Shopify favicon i aksjon, gå til frontend på nettstedet ditt og se på den nåværende nettleserfanen. Du bør se Favicon ved siden av tittelen på nettstedet ditt.

eksempel Shopify Favicon

Tips for å lage ditt Favicon

Selv om det virker enkelt å generere et lite ikon, er det viktig å gjøre det riktig, med tanke på at kunder ser favorittikonet hver gang de kommer til nettstedet ditt. Det er også enkelt å lage et Favicon som er uskarpt eller som ikke fyller hele plassen, og overvinner formålet med Favicon siden det ikke er så synlig for øyet.

For å løse eventuelle problemer, her er noen tips for å lage din Shopify Favorittikon:

  • Start designet større enn 32×32 og krymp det ned om nødvendig. Du vil garantert ha et uskarkere bilde hvis du prøver å strekke et mindre bilde ut i rommet. For eksempel kan det skape problemer å ta et 32×32-bilde fra Hatchful og prøve å strekke det ut for å bli kvitt den skrevne delen av logoen.
  • Du kan vanligvis ikke bare ta din nåværende logo og forvente at den fungerer perfekt som et favorittikon.
  • Favicons ser bra ut når du dekker hver piksel av den angitte plassen. Du har ikke mye plass, så du bør dra nytte av hver square piksel i 32 × 32-rommet.
  • Fjern all tekst, siden det er vanskelig å lese i et favorittikon. Unntaket er hvis det primære logoelementet ditt er en stor bokstav.
  • Skyte for solide, lysere farger. Enkle, tegneserieaktige logoer fungerer best.
  • Se på Favicons fra favorittmerkene dine. Hva har de gjort for å sikre at deres online image får gjennomslag med et favicon?
  • Vurder enten å fylle opp hele plassen med en ensfarget bakgrunn eller lage en gjennomsiktig bakgrunn med forgrunnselementet strukket slik at det bare berører kantene. Du vil legge merke til at mange større merker har gjennomsiktig bakgrunn for sine favorittikoner.
  • ICO-filen format fungerer bra for mindre bilder. Hvis du ikke er kjent, bruk en PNG for gjennomsiktige bakgrunner eller en JPG for høyoppløselige favoritter med solid bakgrunn.

Hvordan lage et Favicon for din Shopify Butikk

Du har muligheten til å designe et Favicon i hvilken som helst designprogramvare du ønsker. Hvis du foretrekker Photoshop, gå med det. Hvis du foretrekker en gratis programvare som GIMP eller Pixlr, fungerer alle så lenge du holder deg til de nødvendige dimensjonene på 32×32.

Du har også muligheten til å lage en Favicon med Shopify's Hatchful-logo og gratis Favicon Generator. Se hele guiden vår På bruk Hatchful å bygge en logo.

last ned logo

Når logoskaperen gjør jobben sin, gir den deg en fil fylt med flere logoer formats, hvorav den ene er et favorittikon.

Shopify Favicon-fil

Husk at mange av logoene du lager med Hatchful (les vår Skrekkfull anmeldelse) bruk hvitt mellomrom rundt logoen, så du må kanskje justere det for at grafikken skal dekke mesteparten av plassen. Generelt sett har jeg funnet ut at du bare bør bruke det medfølgende Hatchful-faviconet hvis det allerede ser bra ut (det fyller opp mesteparten av plassen og har ikke små elementer som tekst).

Hvis det ikke er tilfelle, bruk en tredjeparts redigeringsprogramvare som Photoshop eller Pixlr for å kutte ut noen av de unødvendige elementene.

Viktig: Du må bruke en større versjon av bildet hvis du planlegger å strekke det over et lerret for å kutte ut tekst og mellomrom. For dette brukte jeg Hatchful til å generere logoer, men tok faktisk en av de store logoene (ikke Favicon-filen som følger med) siden jeg ikke vil at uskarphet skal oppstå når jeg strekker den over 32×32-lerretet.

Inne i redigeringsprogramvaren, velg et nytt lerret med bredde og høyde begge satt til 32.

32 av 32

Lag et lag for det nye bildet og sørg for at bildet er større enn 32 × 32 lerretet, da du kanskje strekker det ut. Last deretter opp eller plasser bildet i lerretet.

I det følgende skjermbildet har jeg zoomet inn Favicon-designen, slik at jeg kan sørge for at den passer til square skikkelig. Det er uskarpt, men jeg vet at det vil se mye bedre ut når jeg zoomer ut.

stor versjon

Som du kan se, ser den utzoomede versjonen av Favicon i Pixlr-designeren bra ut. Jeg har dekket det meste av plassen som er tildelt, valgt et lyst og ensfarget ikon og fjernet alle tegn på mindre tekst.

mindre versjon

Det siste trinnet er å laste ned filen. Du kan velge å gjøre det til en gjennomsiktig PNG på dette tidspunktet. Men for denne opplæringen holder jeg meg til en høyoppløselig JPG slik at den ser så skarp ut som mulig. Og jeg har ikke noe imot å ha en bakgrunn med ensfarget.

nedlasting - Shopify Favicon

Gå tilbake til din Shopify dashbord. Klikk på Nettbutikk> Temaer> Tilpass.

Gå deretter til Temainnstillinger> Favicon.

Last opp den nye Favicon og klikk Lagre-knappen i Shopify editor.

forhåndsvisning av bildet

Igjen, den primære måten å teste ut og se favorittikonet på er ved å åpne en fane med nettadressen til hjemmesiden din. Som du kan se, dukker Favicon opp pent og er faktisk litt bedre enn min forrige Favicon, ettersom den ikke fylte opp hele 32×32-plassen.

det endelige produktet - Shopify Favicon

I Konklusjon

A Shopify Favicon tar ikke mer enn noen få minutter å designe og legge til nettstedet ditt, men det gir en fantastisk påminnelse til de besøkende på hvilket nettsted de er på. I tillegg kan det tjene som en måte for folk å finne nettstedet ditt i bokmerkene og nettleserhistoriene sine, med tanke på at de mest sannsynlig søker gjennom en lang liste med andre nettsteder når de går gjennom disse delene.

Husk at du ikke bør nøye deg med en uskarp eller uleselig Shopify Favorittbilde. Hvis du finner ut at det første favorittikonet ikke ser helt riktig ut, eller du vil klippe ut litt tekst eller legge til en gjennomsiktig bakgrunn, går du tilbake til begynnelsen og gjør det riktig. Selv om det ikke er en god idé å ikke ha noen Favicon i det hele tatt, får et uskarpt eller vanskelig å se Favicon merkevaren din til å se uprofesjonell og litt dum ut.

Hvis du har spørsmål om å legge til Favicons i Shopify, eller lage din egen Shopify Favicon, gi oss beskjed i kommentarfeltet nedenfor.

Joe Warnimont

Joe Warnimont er en Chicago-basert forfatter som fokuserer på e-handelsverktøy, WordPress og sosiale medier. Når han ikke fisker eller praktiserer yoga, samler han frimerker i nasjonalparker (selv om det hovedsakelig er for barn). Ta en titt på Joe's portefølje å kontakte ham og se tidligere arbeider.

Kommentar 0 Responses

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert. Obligatoriske felt er merket *

Vurdering *

Dette nettstedet bruker Akismet for å redusere spam. Lær hvordan kommentaren din behandles.