Hoe om 'n Favicon by u Shopify Store

Leer die basiese beginsels van wat 'n Shopify Favicon en hoe om een ​​in u aanlynwinkel te plaas.

Die identiteit van u e-handelswinkel versamel verskeie elemente soos die logo, werfkleure en u bemarking materiaal. Hierdie identiteit versterk u algemene handelsmerk en skep 'n gesonde herinnering vir u klante, wat gevoelens van gemak en betroubaarheid wek wanneer hulle u handelsmerkbeelde en -kleure sien. Alhoewel die grootte klein is, sluit die Favicon ook aan by die handelsmerkstrategie. In hierdie handleiding sal ons u wys hoe u 'n favicon by u kan skep en byvoeg Shopify stoor, om u aanlyn voorkoms af te rond en dit makliker te maak om u winkel te herken wanneer klante besoek.

Wat is 'n Shopify Favicon?

A Shopify Favicon, of enige Favicon, is 'n klein ikoon vir u webwerf wat op die blaaier-oortjie langs u webwerfnaam verskyn.

Die blaaier-adresbalk is die mees algemene gebied om die webwerf Favicon te sien, maar dit kom ook op die volgende plekke voor:

  • Toolbar-programme
  • Boekmerke
  • Geskiedenis resultate
  • Soek bars
  • Soms as dit op sosiale media gedeel word

In wese, wanneer die blaaier 'n skakel na u webwerf moet wys en daar nie veel ruimte vir ander inhoud is nie, vervang dit u gewone, volledige grootte logo met die Favicon.

Shopify Favicon voorbeelde

By verstek, Shopify voeg die Shopify logo vir u Favicon, daarom moet ons dit verander.

'N Goeie favicon is dikwels 'n kleiner weergawe van u logo, maar soms wissel dit 'n bietjie omdat u wil verseker dat dit sigbaar is, al die toegewysde ruimte in beslag neem en 'n bietjie kleur by u webwerfnaam wil voeg.

By verstek ondersteun alle blaaiers Favicons van 32 × 32 pixels. Dit is nogal 'n klein prentjie, maar met behulp van sommige aanlynopwekkers kan u dit self maak Shopify Favicon vir u webwerf. Groter beelde word in elk geval afgeskaal, sodat u dit nie noodwendig op presies 32 × 32 hoef te kry nie.

'N Favicon maak nogal sin vir aanlynwinkels Shopify aangesien dit maklik is om by te voeg, en dit belangrik is om u handelsmerkidentiteit as 'n aanlynverkoper te versterk. Sommige voer ook aan dat dit help met SEO.

Lees verder om meer te wete te kom oor hoe u Favicon by u Shopify winkel.

Hoe om 'n Favicon by u Shopify Store

Soos genoem, wanneer u 'n webwerf bestuur Shopify dit voeg outomaties 'n by Shopify logo as Favicon van u werf. Daar is niks mee verkeerd nie, maar dit is baie meer professioneel en handelsmerkgerig om u eie logo in te sluit.

Gaan daarom na u Shopify paneelbord en klik op Aanlynwinkel onder Verkoopskanale.

Navigeer na u temas en klik op die Aanpas-knoppie langs u huidige tema. Alhoewel instellings van tema na tema verander, is dit die mees onlangse Shopify temas het 'n gedeelte om die Favicon te verander.

aanlyn winkel

In die Shopify aanpas, blaai na die onderkant van die lys aan die linkerkant en klik op Tema-instellings.

tema-instellings

Soek en kies die Favicon-knoppie in die nuwe afdeling.

favicon - Shopify Favicon

Dit wys 'n knoppie om beeld te kies of gratis beelde te verken. Ek kan my nie voorstel dat daar gratis beelde is wat by u logo pas nie, daarom is dit die beste om op Select Image te klik om 'n aangepaste prentjie vanaf u rekenaar op te laai.

kies beeld

Kies die Favicon-lêer en laai dit op Shopify.

Daarna sien u 'n voorskou van u Favicon-ikoon. Om die veranderinge permanent te maak, kies die Stoor-knoppie in Shopify.

stoor-knoppie

Om u Shopify favicon in aksie, gaan na die voorkant van u webwerf en kyk na die huidige blaaier-oortjie. U moet die Favicon langs u titel van die webwerf sien.

byvoorbeeld Shopify Favicon

Wenke om u Favicon te skep

Alhoewel dit maklik lyk om 'n klein ikoon te genereer, is dit belangrik om dit reg te stel, aangesien klante die Favicon sien wanneer hulle na u webwerf kom. Dit is ook maklik om 'n Favicon te maak wat vaag is of nie die hele ruimte vul nie, wat die doel van die Favicon verslaan, aangesien dit nie so sigbaar is vir die oog nie.

Hier is 'n paar wenke om probleme op te los Shopify Favicon:

  • Begin u ontwerp groter as 32 × 32 en verklein dit indien nodig. As u probeer om 'n kleiner beeld in die ruimte uit te rek, sal u 'n vaagere beeld hê. As u byvoorbeeld 'n 32 × 32-afbeelding van Hatchful neem en dit probeer uitrek om van die geskrewe gedeelte van die logo ontslae te raak, kan dit probleme veroorsaak.
  • U kan gewoonlik nie net u huidige logo neem en verwag dat dit perfek as 'n Favicon sal werk nie.
  • Favicon lyk baie goed as u elke pixel van die beskikbare ruimte bedek. U het nie veel ruimte nie, dus moet u elke voordeel trek square pixel in die 32 × 32-spasie.
  • Verwyder alle teks, want dit is moeilik om in 'n Favicon te lees. Die uitsondering is as u hoofletter-element 'n groot letter het.
  • Skiet vir soliede, helder kleure. Eenvoudige, spotprentagtige logo's werk die beste.
  • Kyk na die Favicons van u gunsteling handelsmerke. Wat het hulle gedoen om te verseker dat hul aanlynbeeld met 'n favicon deurkom?
  • Oorweeg dit om die hele ruimte vol te maak met 'n effekleurige agtergrond of om 'n deursigtige agtergrond te maak met die voorgrondelement gerek sodat dit net aan die kante raak. U sal sien dat baie groter handelsmerke deursigtige agtergronde vir hul Favicons het.
  • Die ICO-lêerformaat werk goed vir kleiner beelde. As u nie vertroud is nie, gebruik 'n PNG vir deursigtige agtergronde of 'n JPG vir Favicons met hoë resolusie met soliede agtergronde.

Hoe om 'n Favicon vir u te genereer Shopify Store

U het die opsie om 'n Favicon te ontwerp in enige ontwerpsoftware van u keuse. As u Photoshop verkies, gaan daarmee saam. As u liewer 'n gratis sagteware soos GIMP of Pixlr wil hê, werk hulle almal solank u by die vereiste afmetings van 32 × 32 hou.

U het ook die opsie om 'n Favicon mee te maak Shopify's Hatchful Logo en gratis Favicon - kragopwekker. Kyk na ons hele gids oor die gebruik Gelukkig om 'n logo te bou.

aflaai logo

Sodra die logo-skepper sy werk doen, bied dit u 'n lêer gevul met veelvuldige logo-formate, waarvan een 'n Favicon is.

Shopify Favicon-lêer

Hou in gedagte dat baie van die logo's waarmee u maak Gelukkig (lees ons Broederige resensie) gebruik wit spasies rondom die logo, dus sal u dit miskien moet aanpas vir die afbeelding om die grootste deel van die spasie te dek. Oor die algemeen het ek gevind dat u die Hatchful-favicon slegs moet gebruik as dit al goed lyk (dit vul die grootste deel van die ruimte en het nie klein elemente soos teks nie).

As dit nie die geval is nie, gebruik 'n derdeparty-redigeringsagteware soos Photoshop of Pixlr om die onnodige elemente uit te sny.

Belangrike: U moet 'n groter weergawe van die prent gebruik as u van plan is om dit oor 'n doek te rek om teks en wit spasie uit te sny. Hiervoor het ek Hatchful gebruik om logo's te genereer, maar het ek een van die groot logo's geneem (nie die Favicon-lêer nie), aangesien ek nie wil hê dat dit vervaag wanneer ek dit oor die 32 × 32 doek rek nie.

Kies 'n nuwe doek in u redigeringsagteware met die breedte en hoogte op albei 32.

32 deur 32

Maak 'n laag vir die nuwe prentjie en sorg dat die prentjie groter is as die 32 × 32-doek, want u kan dit uitrek. Laai die prentjie dan op of plaas dit in die doek.

In die volgende kiekie het die Favicon-ontwerp ingezoem sodat ek kan seker maak dat dit by die pasvorm pas square behoorlik. Dit is vaag, maar ek weet dat dit baie beter sal lyk as ek uitzoom.

groot weergawe

Soos u kan sien, lyk die uitgezoomde weergawe van die Favicon in die Pixlr-ontwerper goed. Ek het die grootste deel van die toegewese ruimte bedek, gekies vir 'n helder en soliede kleurikoon en alle tekens van kleiner teks verwyder.

kleiner weergawe

Die laaste stap is om die lêer af te laai. U kan op hierdie punt kies om dit 'n deursigtige PNG te maak. Maar vir hierdie handleiding hou ek 'n hoë resolusie JPG sodat dit so skerp as moontlik lyk. En ek gee nie om om 'n agtergrond met 'n soliede kleur te hê nie.

Aflaai - Shopify Favicon

Gaan terug na jou Shopify paneelbord. Klik op Aanlynwinkel> Temas> Pas aan.

Gaan dan na Tema-instellings> Favicon.

Laai die nuwe Favicon op en klik op die Save-knoppie in die Shopify redakteur.

beeldvoorskou

Weereens, die primêre manier om u Favicon te toets en te sien, is deur eenvoudig 'n oortjie met u tuisblad-URL oop te maak. Soos u kan sien, verskyn die Favicon mooi en is dit eintlik 'n bietjie beter as my vorige Favicon, aangesien die een nie die hele 32 × 32-ruimte wat voorsien is, gevul het nie.

die finale produk - Shopify Favicon

Ten slotte

A Shopify Favicon neem nie meer as 'n paar minute om u webwerf te ontwerp en toe te voeg nie, maar dit bied u besoekers 'n wonderlike herinnering op watter webwerf hulle besoek. Daarbenewens kan dit dien as 'n manier vir mense om u webwerf in hul boekmerke en blaaiergeskiedenis te vind, aangesien hulle waarskynlik deur 'n lang lys ander webwerwe gaan soek as hulle deur die afdelings gaan.

Hou in gedagte dat u nie vaag of onleesbaar moet wees nie Shopify Favicon-beeld. As u agterkom dat die eerste Favicon nie heeltemal reg lyk nie, of as u 'n teks wil uitknip of 'n deursigtige agtergrond wil byvoeg, gaan terug na die begin en maak dit reg. Alhoewel dit glad nie 'n goeie idee is om geen Favicon te hê nie, laat 'n vaag of moeilik sienbare Favicon u handelsmerk onprofessioneel en ietwat dom lyk.

As u enige vrae het oor die toevoeging van Favicons aan Shopify, of om jou eie te maak Shopify Favicon, laat weet ons in die onderstaande kommentaar.

Joe Warnimont

Joe Warnimont is 'n vryskutskrywer wat instrumente en hulpbronne skep om ander skrywers produktief te maak en hul werk te bemark.