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

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 det væsentlige, 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.

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ørrelse 32 × 32 pixels. Det er et ret lille billede, men med hjælp fra nogle online generatorer kan du lave dine egne Shopify Favicon til dit websted. Også større billeder skaleres alligevel ned, så du behøver ikke nødvendigvis at få det til nøjagtigt 32 × 32.

En Favicon giver en hel del mening for onlinebutikker Shopify da de er lette at tilføje, og det er vigtigt at styrke din brandidentitet som en 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.

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

Trin 3: Vælg Favicon-knappen

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

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.

Trin 4: Upload dit favicon

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

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

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.

Tips til oprettelse af dit Favicon

Selvom det virker let at generere et lille ikon, er det vigtigt at få det rigtigt, i betragtning af at kunder ser Favicon, når de kommer til dit websted. Det er også let at lave et Favicon, der er sløret eller ikke fylder hele rummet, og 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 bliver nødt til at have et slørere billede, hvis du prøver at strække et mindre billede ind i rummet. For eksempel kan det tage problemer at tage et 32 ​​× 32 billede fra Hatchful og forsøge 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 en 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 kvadratisk pixel i 32×32-rummet.
• Fjern al tekst, da det er svært at læse i en 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 udfylde hele rummet med en farvet baggrund eller lave en gennemsigtig baggrund med forgrundselementet strakt, så det bare rører ved kanterne. Du vil bemærke, at mange større mærker har gennemsigtig baggrund for deres Favicons.
• ICO-filformatet 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, skal du 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 krævede dimensioner på 32 × 32.

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

Når logoskaberen har gjort sit arbejde, giver den dig en fil fyldt med flere logoformater, hvoraf det ene er et Favicon.

Husk, at mange af de logoer, du laver med Lækkert (læs vores Hatchful anmeldelse) brug hvidt mellemrum omkring logoet, så du bliver muligvis nødt til at justere det til grafikken, så det dækker det meste af rummet. Generelt har jeg fundet ud af, at du kun skal bruge det medfølgende Hatchful-favicon, hvis det allerede ser godt ud (det fylder det meste af rummet og har ikke 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 rum ud. Til dette brugte jeg Hatchful til at generere logoer, men tog faktisk en af ​​de store logoer (ikke den medfølgende Favicon-fil), da jeg ikke vil have sløring, når jeg strækker den 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.

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.

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

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

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 vejledning holder jeg fast med en JPG i høj opløsning, så den ser så skarp ud som muligt. Og jeg har ikke noget imod at have en baggrund med en solid farve.

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.

Igen er den primære måde at teste og se din Favicon på ved blot at åbne en fane med din hjemmesides webadresse. Som du kan se, vises Favicon pænt og er faktisk en smule bedre end min tidligere Favicon, idet man ser, hvordan den ene ikke udfyldte hele det 32 ​​x 32 rum, der blev leveret.

I Konklusion

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

Husk, at du ikke bør nøjes med et sløret eller ulæseligt Shopify Favicon-billede. Hvis du finder ud af, at det første Favicon ikke ser helt rigtigt ud, eller hvis du gerne vil klippe noget tekst ud eller tilføje en gennemsigtig baggrund, skal du gå tilbage til starten og få det rigtigt. Selvom det slet ikke er en god ide at have nogen Favicon, får en sløret eller svær at se Favicon dit brand til at se uprofessionelt og noget 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.