Paano magdagdag ng a Shopify Favicon sa Iyo Shopify Mag-imbak

Alamin ang mga pangunahing kaalaman sa kung ano ang a Shopify Favicon at kung paano maglagay ng isa sa iyong online store.

Kung nag-subscribe ka sa isang serbisyo mula sa isang link sa page na ito, maaaring makakuha ng komisyon ang Reeves and Sons Limited. Tingnan ang aming pahayag ng etika.

Ang pagkakakilanlan ng ang iyong tindahan ng ecommerce pinagsasama-sama ang ilang mga elemento tulad ng logo, mga kulay ng site, at ang iyong mga materyales sa marketing. Ang pagkakakilanlang ito ay nagpapatibay sa iyong pangkalahatang brand at gumagawa ng isang malusog na paalala para sa iyong mga customer, na nagbubunga ng pakiramdam ng kaginhawahan at pagiging maaasahan kapag nakita nila ang iyong mga imahe at kulay ng brand.

Bagama't maliit ang laki, ang Favicon ay nauugnay din sa diskarte sa pagba-brand na iyon. Sa tutorial na ito, ipapakita namin sa iyo kung paano gumawa at magdagdag ng favicon sa iyong Shopify mag-imbak, pag-ikot ng iyong hitsura sa online at ginagawang mas madaling makilala ang iyong tindahan kapag bumisita ang mga customer.

Ano ang isang Shopify Favicon?

A Shopify Ang Favicon, o anumang Favicon para sa bagay na iyon, ay isang maliit na icon para sa iyong website na lilitaw sa tab ng browser sa tabi ng pangalan ng iyong website.

Ang address bar ng browser ay ang pinakakaraniwang lugar upang matingnan ang site Favicon, ngunit lumalabas din ito sa mga sumusunod na lokasyon:

  • Mga app ng toolbar
  • Mga Bookmark
  • Mga resulta sa kasaysayan
  • Search bar
  • Minsan kapag ibinahagi sa social media

Sa pangkalahatan, sa tuwing kailangan ng browser na magpakita ng link sa iyong website, at walang gaanong puwang para sa iba pang nilalaman, pinapalitan nito ang iyong karaniwan at buong laki ng logo ng Favicon.

Shopify Mga halimbawa ng Favicon

Sa pamamagitan ng default, Shopify nagdadagdag ng Shopify logo para sa iyong Favicon, kaya kailangan naming baguhin iyon.

Ang isang mahusay na favicon ay madalas na isang mas maliit na bersyon ng iyong logo, ngunit kung minsan ay nag-iiba ito nang kaunti dahil nais mong matiyak na nakikita sila, kunin ang lahat ng inilaang puwang, at magdagdag ng kaunting kulay sa tabi ng iyong pangalan sa website.

Bilang default, sinusuportahan ng lahat ng browser ang mga Favicon na may sukat na 32ร—32 pixels. Iyon ay isang medyo maliit na imahe, ngunit sa tulong ng ilang mga online generators maaari kang gumawa ng iyong sarili Shopify Favicon para sa iyong website. Gayundin, ang mas malalaking larawan ay nababawasan pa rin, kaya hindi mo na kailangang dalhin ito sa eksaktong 32ร—32.

Ang isang Favicon ay may katuturan para sa mga online na tindahan Shopify dahil madali silang idagdag, at mahalagang palakasin ang pagkakakilanlan ng iyong brand bilang isang online na nagbebenta. Ang ilan ay nangangatuwiran din na nakakatulong ito sa SEO.

Patuloy na basahin upang matuto nang higit pa tungkol sa kung paano magdagdag ng Favicon sa iyong Shopify mag-imbak.

Paano Magdagdag ng isang Favicon sa Iyo Shopify Tindahan โ€“ Gabay sa Mabilis na Hakbang

Tulad ng nabanggit, kapag nagpapatakbo ng isang site sa pamamagitan ng Shopify awtomatiko itong nagdaragdag ng a Shopify logo as your siteโ€™s Favicon. Thereโ€™s nothing wrong with that, but itโ€™s far more professional and brand-oriented to include your own logo. Here are the steps you need to follow:

Hakbang 1: Pumunta sa Iyo Shopify Dashboard

Samakatuwid, pumunta sa iyong Shopify dashboard at mag-click sa Online Store sa ilalim ng Mga Sales Channel.

Hakbang 2: Mag-navigate sa Mga Setting ng Tema

Mag-navigate sa iyong Mga Tema at mag-click sa pindutan ng Pag-customize sa tabi ng iyong kasalukuyang tema. Bagaman ang mga setting ay nagbabago mula sa tema hanggang sa tema, lahat ng pinakahuling Shopify ang mga tema ay may isang seksyon upang baguhin ang Favicon.

online na tindahan

Sa Shopify pasadya, mag-scroll sa ilalim ng listahan sa kaliwa at mag-click sa Mga Setting ng Tema.

mga setting ng tema

Hakbang 3: Piliin ang Favicon Button

Sa bagong seksyon, hanapin at piliin ang pindutan ng Favicon.

favicon - Shopify Favicon

Nagpapakita ito ng button para Pumili ng Imahe o Mag-explore ng Mga Libreng Imahe. Hindi ko maisip na mayroon silang anumang mga libreng larawan na tumutugma sa iyong logo, kaya pinakamahusay na mag-click sa Piliin ang Larawan upang mag-upload ng isang pasadyang larawan mula sa iyong computer.

pumili ng imahe

Hakbang 4: I-upload ang Iyong Favicon

Piliin ang Favicon file at i-upload ito sa Shopify.

Pagkatapos nito, makakakita ka ng preview ng iyong Favicon icon. Upang gawing permanente ang mga pagbabago, piliin ang button na I-save sa Shopify.

i-save ang pindutan

Upang tingnan ang iyong Shopify ang favicon sa pagkilos, pumunta sa frontend ng iyong website at tingnan ang kasalukuyang tab ng browser. Dapat mong makita ang Favicon sa tabi ng pamagat ng iyong site.

halimbawa Shopify Favicon

Mga tip para sa Paglikha ng Iyong Favicon

Bagama't tila madaling bumuo ng isang maliit na icon, mahalagang gawin ito nang tama, kung isasaalang-alang ng mga customer na nakikita ang Favicon tuwing pumupunta sila sa iyong site. Madali ring gumawa ng Favicon na malabo o hindi napupuno ang buong espasyo, tinatalo ang layunin ng Favicon dahil hindi ito gaanong nakikita ng mata.

Upang malutas ang anumang mga problema, narito ang ilang mga tip para sa paglikha ng iyong Shopify Favicon:

  • Simulan ang iyong disenyo na mas malaki kaysa sa 32 ร— 32 at paliitin ito kung kinakailangan. Siguradong magkakaroon ka ng malabong larawan kung susubukan mong i-stretch ang isang mas maliit na larawan sa espasyo. Halimbawa, ang pagkuha ng 32ร—32 na imahe mula sa Hatchful at sinusubukang i-stretch ito upang maalis ang nakasulat na bahagi ng logo ay maaaring magdulot ng mga problema.
  • Karaniwang hindi mo maaaring kunin ang iyong kasalukuyang logo at asahan itong gagana nang perpekto bilang isang Favicon.
  • Maganda ang hitsura ng Favicon kapag tinakpan mo ang bawat pixel ng ibinigay na espasyo. Wala kang masyadong silid, kaya dapat mong samantalahin ang bawat isa square pixel sa 32 ร— 32 na puwang.
  • Alisin ang lahat ng teksto, dahil mahirap basahin sa isang Favicon. Ang pagbubukod ay kung ang iyong pangunahing elemento ng logo ay isang malaking titik.
  • Abutin para sa solid, mas maliwanag na mga kulay. Ang mga simple, cartoonish logo ay pinakamahusay na gumagana.
  • Tingnan ang Favicons mula sa iyong mga paboritong tatak. Ano ang nagawa nila upang matiyak na ang kanilang online na imahe ay nadaanan sa pamamagitan ng isang favicon?
  • Isaalang-alang ang alinman sa pagpuno sa buong espasyo ng isang solidong background ng kulay o paggawa ng isang transparent na background na ang elemento ng foreground ay nakaunat upang mahawakan lamang nito ang mga gilid. Mapapansin mo na maraming malalaking brand ang may transparent na background para sa kanilang mga Favicon.
  • Ang ICO file format gumagana nang maayos para sa mas maliliit na larawan. Kung hindi ka pamilyar, gumamit ng PNG para sa mga transparent na background o isang JPG para sa mga Favicon na may mataas na resolution na may solidong background.

Paano Bumuo ng isang Favicon para sa Iyo Shopify Mag-imbak

May opsyon kang magdisenyo ng Favicon sa anumang software ng disenyo na iyong pinili. Kung mas gusto mo ang Photoshop, pumunta sa iyon. Kung mas gusto mo ang isang libreng software tulad ng GIMP o Pixlr, lahat ng mga ito ay gumagana hangga't nananatili ka sa mga kinakailangang dimensyon na 32 ร— 32.

Mayroon ka ring pagpipilian upang makagawa ng isang Favicon ShopifyAng Hatchful na Logo at Libreng Favicon Generator. Tingnan ang aming buong gabay sa paggamit Mapusok upang bumuo ng isang logo.

pag-download ng logo

Kapag ginawa na ng tagalikha ng logo ang trabaho nito, bibigyan ka nito ng file na puno ng maraming logo formats, isa na rito ang Favicon.

Shopify Favicon file

Tandaan na marami sa mga logo na iyong ginagawa Mapusok (basahin ang aming Mapangahas na pagsusuri) gumamit ng puting espasyo sa paligid ng logo, kaya maaaring kailanganin mong ayusin ito para masakop ng graphic ang karamihan sa espasyo. Sa pangkalahatan, nalaman kong dapat mo lang gamitin ang ibinigay na Hatchful favicon kung maganda na ang hitsura nito (pinupuno nito ang halos lahat ng espasyo at walang maliliit na elemento tulad ng teksto).

Kung hindi iyon ang kaso, gumamit ng isang third-party na software sa pag-edit tulad ng Photoshop o Pixlr upang putulin ang ilan sa mga hindi kinakailangang elemento.

mahalaga: Kailangan mong gumamit ng mas malaking bersyon ng larawan kung nagpaplano kang i-stretch ito sa ibabaw ng canvas upang maputol ang text at puting espasyo. Para dito, ginamit ko ang Hatchful upang makabuo ng mga logo ngunit talagang kinuha ko ang isa sa malalaking logo (hindi ang ibinigay na Favicon file) dahil ayaw kong mangyari ang paglalabo kapag iniunat ko ito sa ibabaw ng 32ร—32 canvas.

Sa loob ng iyong software sa pag-edit, pumili ng isang bagong canvas na may Width at Taas na parehong nakatakda sa 32.

32 sa pamamagitan ng 32

Gumawa ng isang layer para sa bagong imahe at tiyakin na ang imahe ay mas malaki kaysa sa 32 ร— 32 canvas, dahil maaari mo itong iunat. Pagkatapos ay i-upload o ilagay ang imahe sa canvas.

Sa sumusunod na screenshot, mayroon akong naka-zoom in na disenyo ng Favicon upang matiyak kong umaangkop ito sa square ng maayos. Malabo ito, ngunit alam kong mas magiging maganda ito kapag nag-zoom out ako.

malaking bersyon

Gaya ng nakikita mo, mukhang maganda ang naka-zoom out na bersyon ng Favicon sa Pixlr designer. Nasaklaw ko na ang halos lahat ng espasyong inilaan, nag-opt para sa isang maliwanag at solidong icon ng kulay, at inalis ang lahat ng palatandaan ng mas maliit na text.

mas maliit na bersyon

Ang huling hakbang ay ang I-download ang file. Maaari mong piliing gawin itong transparent na PNG sa puntong ito. Ngunit para sa tutorial na ito ako ay nananatili sa isang mataas na resolution na JPG upang ito ay magmukhang matalas hangga't maaari. At wala akong pakialam na magkaroon ng background na may solidong kulay.

pag-download - Shopify Favicon

Bumalik sa iyong Shopify dashboard. Mag-click sa Online Store> Mga Tema> Ipasadya.

Pagkatapos ay pumunta sa Mga Setting ng Tema> Favicon.

I-upload ang bagong Favicon at i-click ang I-save ang pindutan sa Shopify editor.

preview ng imahe

Muli, ang pangunahing paraan upang subukan at tingnan ang iyong Favicon ay sa pamamagitan lamang ng pagbubukas ng tab gamit ang URL ng iyong website ng homepage. Tulad ng nakikita mo, ang Favicon ay nagpapakita ng mabuti at talagang mas mahusay ng kaunti kaysa sa aking nakaraang Favicon, nakikita kung paanong hindi napunan ng isang iyon ang buong 32ร—32 na espasyong ibinigay.

ang pangwakas na produkto - Shopify Favicon

Sa konklusyon

A Shopify Ang Favicon ay tumatagal ng hindi hihigit sa ilang minuto upang magdisenyo at magdagdag sa iyong site, ngunit nagbibigay ito ng magandang paalala sa iyong mga bisita kung saang website sila naroroon. Bilang karagdagan, maaari itong magsilbi bilang isang paraan para mahanap ng mga tao ang iyong website sa kanilang mga bookmark at kasaysayan ng browser, na isinasaalang-alang na malamang na naghahanap sila sa isang mahabang listahan ng iba pang mga site kapag dumadaan sa mga seksyong iyon.

Tandaan na hindi ka dapat magpasya sa isang malabo o hindi mabasa Shopify Larawan ng favicon. Kung nalaman mong mukhang hindi tama ang unang Favicon, o gusto mong mag-cut out ng ilang text o magdagdag ng transparent na background, bumalik sa simula at ayusin ito. Bagama't hindi magandang ideya na walang Favicon, ang isang malabo o mahirap makitang Favicon ay magmumukhang hindi propesyonal at medyo kalokohan.

Kung mayroon kang anumang mga katanungan tungkol sa pagdaragdag ng mga Favicons sa Shopify, o paggawa ng sarili mo Shopify Favicon, ipaalam sa amin sa seksyon ng mga komento sa ibaba.

Joe Warnimont

Si Joe Warnimont ay isang manunulat na nakabase sa Chicago na nakatuon sa mga tool ng eCommerce, WordPress, at social media. Kapag hindi pangingisda o pagsasanay ng yoga, nangangolekta siya ng mga selyo sa mga pambansang parke (kahit na pangunahin iyon para sa mga bata). Suriin ang portfolio ni Joe upang makipag-ugnay sa kanya at tingnan ang nakaraang trabaho.

Comments 0 Responses

Mag-iwan ng Sagot

Ang iyong email address ay hindi nai-publish. Mga kinakailangang patlang ay minarkahan *

Marka *

Ang site na ito ay gumagamit ng Akismet upang mabawasan ang spam. Alamin kung paano naproseso ang data ng iyong komento.