Hvordan legge til en Shopify Favorittikon til din Shopify Butikk

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.

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 Favicons i størrelse 32 × 32 piksler. Det er et ganske lite bilde, men ved hjelp av noen online generatorer kan du lage dine egne Shopify Favicon for nettstedet ditt. Dessuten blir større bilder nedskalert uansett, slik at du ikke nødvendigvis trenger å 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 en online selger. 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.

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

Trinn 3: Velg Favicon-knappen

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

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

Trinn 4: Last opp favorittikonet ditt

Velg Favicon-filen og last den opp til Shopify.

Deretter ser du en forhåndsvisning av Favicon-ikonet ditt. For å gjøre endringene permanente, velg Lagre-knappen i Shopify.

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.

Tips for å lage ditt Favicon

Selv om det virker enkelt å generere et lite ikon, er det viktig å få det riktig, med tanke på at kunder ser Favicon når de kommer til nettstedet ditt. Det er også enkelt å lage et Favicon som er uklart eller ikke fyller hele rommet, og beseirer 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 ditt større enn 32 × 32 og krymp det ned hvis det er nødvendig. Du vil ha et uskarpt bilde hvis du prøver å strekke et mindre bilde inn i rommet. Hvis du for eksempel tar et 32 ​​× 32-bilde fra Hatchful og prøver å strekke det ut for å kvitte seg med den skrevne delen av logoen, kan det føre til problemer.
• Du kan vanligvis ikke bare ta din nåværende logo og forvente at den fungerer perfekt som en Favicon.
• 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 kvadratisk piksel i 32×32-rommet.
• Fjern all tekst, da det er vanskelig å lese i en Favicon. Unntaket er hvis ditt primære logoelement 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?
• Tenk enten å fylle opp hele rommet med en farget bakgrunn eller å lage en gjennomsiktig bakgrunn med forgrunnselementet strukket slik at det bare berører kantene. Du vil merke at mange større merker har gjennomsiktig bakgrunn for deres Favicons.
• ICO-filformatet 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 en Favicon i hvilken som helst designprogramvare du ønsker. Hvis du foretrekker Photoshop, gå med det. Hvis du heller vil ha 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 ShopifyHatchful Logo og gratis Favicon Generator. Se hele guiden vår På bruk Hatchful å bygge en logo.

Når logoskaperen gjør jobben sin, gir den deg en fil fylt med flere logoformater, hvorav ett er et Favicon.

Husk at mange av logoene du lager med Hatchful (les vår Skrekkfull anmeldelse) bruk hvite mellomrom rundt logoen, så du må kanskje justere den for at grafikken skal dekke det meste av plassen. Generelt har jeg funnet ut at du bare bør bruke den medfølgende Hatchful-favicon hvis den allerede ser bra ut (den fyller 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 å klippe ut tekst og hvite mellomrom. For dette brukte jeg Hatchful til å generere logoer, men tok faktisk en av de store logoene (ikke Favicon-filen som ble gitt) 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.

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-designet slik at jeg kan sørge for at det passer riktig til firkanten. Det er uskarpt, men jeg vet at det vil se mye bedre ut når jeg zoomer ut.

Som du kan se, ser den zoomede ut versjonen av Favicon i Pixlr-designeren bra ut. Jeg har dekket det meste av den tildelte plassen, valgt et lyst og solid fargeikon og fjernet alle tegn på mindre tekst.

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

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.

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

I Konklusjon

A Shopify Favicon tar ikke mer enn noen minutter å designe og legge til på 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, med tanke på at de mest sannsynlig søker gjennom en lang liste over andre nettsteder når de går gjennom disse seksjonene.

Husk at du ikke bør nøye deg med uskarpe eller uleselige Shopify Favicon-bilde. Hvis du finner ut at den første Favicon ikke ser helt riktig ut, eller hvis du vil kutte ut litt tekst eller legge til en gjennomsiktig bakgrunn, kan du gå tilbake til begynnelsen og gjøre det riktig. Selv om det ikke er en god ide å ikke ha noe Favicon i det hele tatt, får en uskarp 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.