Cum se adaugă un Shopify Favicon pentru dvs Shopify Magazin

Aflați elementele de bază ale a ceea ce este Shopify Favicon și cum să puneți unul pe magazinul dvs. online.

Dacă vă abonați la un serviciu dintr-un link de pe această pagină, Reeves and Sons Limited poate câștiga un comision. Vezi noastre declarație de etică.

Identitatea magazinul dvs. de comerț electronic reunește mai multe elemente, cum ar fi sigla, culorile site-ului și fișierul dvs. materiale de marketing. Această identitate vă întărește marca generală și creează un memento sănătos pentru clienții dvs., evocând sentimente de confort și fiabilitate atunci când văd imaginile și culorile mărcii dvs.

Although small in size, the Favicon also ties into that branding strategy. In this tutorial, we’ll show you how to create and add a favicon to your Shopify stoca, rotunjind aspectul dvs. online și facilitând recunoașterea magazinului dvs. atunci când clienții vizitează.

Ce e Shopify Favicon?

A Shopify Favicon, sau orice alt Favicon, este o pictogramă mică pentru site-ul dvs. web, care apare în fila browserului de lângă numele site-ului dvs. web.

Bara de adrese a browserului este cea mai obișnuită zonă pentru vizualizarea site-ului Favicon, dar apare și în următoarele locații:

  • Aplicații din bara de instrumente
  • Marcaje
  • Rezultatele istoriei
  • Căutați bare
  • Uneori, când este distribuit pe rețelele de socializare

Essentially, whenever the browser needs to show a link to your website, and there’s not much room for other content, it replaces your usual, full-size logo with the Favicon.

Shopify Exemple de favicon

În mod implicit, Shopify adaugă Shopify sigla pentru Favicon dvs., așa că trebuie să o schimbăm.

Un favicon bun este adesea o versiune mai mică a logo-ului dvs., dar uneori variază puțin, deoarece doriți să vă asigurați că sunt vizibile, ocupă tot spațiul alocat și adăugați un pic de culoare lângă numele site-ului dvs. web.

By default, all browsers support Favicons sized 32×32 pixels. That’s a rather tiny image, but with the help of some online generators you can make your own Shopify Favicon for your website. Also, larger images get scaled down anyway, so you don’t necessarily have to get it to exactly 32×32.

Un Favicon are un sens pentru magazinele online de pe Shopify since they’re easy to add, and it’s important to strengthen your brand identity as an online seller. Some also argue that it helps with SEO.

Continuați să citiți pentru a afla mai multe despre cum să adăugați Favicon la dvs. Shopify magazin.

Cum să adăugați un Favicon la dvs. Shopify Magazin – Ghid rapid

După cum sa menționat, atunci când rulați un site prin Shopify adaugă automat un 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:

Pasul 1: Accesați dvs Shopify Tabloul de bord

De aceea, du-te la Shopify tabloul de bord și faceți clic pe Magazin online sub Canalele de vânzări.

Pasul 2: Navigați la Setările temei

Navigați la Teme și faceți clic pe butonul Personalizare de lângă tema curentă. Deși setările se schimbă de la temă la temă, toate cele mai recente Shopify temele au o secțiune pentru a schimba Favicon.

magazin online

În Shopify personalizator, derulați în partea de jos a listei din stânga și faceți clic pe Setări temă.

setari tema

Pasul 3: Selectați butonul Favicon

În noua secțiune, găsiți și selectați butonul Favicon.

favicon Shopify Favicon

This reveals a button to Select Image or Explore Free Images. I can’t imagine they have any free images that match your logo, so it’s best to click on Select Image to upload a custom image from your computer.

selectați imaginea

Pasul 4: Încărcați-vă Favicon

Alegeți fișierul Favicon și încărcați-l în Shopify.

After that, you’ll see a preview of your Favicon icon. To make the changes permanent, select the Save button in Shopify.

butonul de salvare

Pentru a vizualiza Shopify favicon în acțiune, accesați frontendul site-ului dvs. web și uitați-vă la fila curentă a browserului. Ar trebui să vedeți Favicon lângă titlul site-ului dvs.

exemplu Shopify Favicon

Sfaturi pentru crearea Faviconului

Although it seems easy to generate a little icon, it’s important to get it right, considering customers see the Favicon whenever they come to your site. It’s also easy to make a Favicon that’s blurry or doesn’t fill the entire space, defeating the purpose of the Favicon since it’s not that visible to the eye.

Pentru a rezolva orice probleme, iată câteva sfaturi pentru crearea dvs. Shopify Favicon:

  • Start your design larger than 32×32 and shrink it down if need be. You’re bound to have a blurrier image if you try to stretch a smaller image into the space. For instance, taking a 32×32 image from Hatchful and trying to stretch it out to get rid of the written part of the logo may cause problems.
  • You typically can’t just take your current logo and expect it to work perfectly as a Favicon.
  • Favicon’s look great when you cover every pixel of the provided space. You don’t have much room, so you should take advantage of every square pixel în spațiul 32 × 32.
  • Remove all text, as it’s hard to read in a Favicon. The exception is if your primary logo element is a large letter.
  • Trageți pentru culori solide, mai strălucitoare. Logo-urile simple și desenate funcționează cel mai bine.
  • Uită-te la Favicons de la mărcile tale preferate. Ce au făcut pentru a se asigura că imaginea lor online se realizează cu un favicon?
  • Consider either filling up the entire space with a solid color background or making a transparent background with the foreground element stretched so it just touches the edges. You’ll notice that many larger brands have transparent backgrounds for their Favicons.
  • Fișierul ICO format works well for smaller images. If you’re not familiar, use a PNG for transparent backgrounds or a JPG for high-resolution Favicons with solid backgrounds.

Cum să generați un favicon pentru dvs. Shopify Magazin

You have the option to design a Favicon in any design software of your choice. If you prefer Photoshop, go with that. If you’d rather a free software like GIMP or Pixlr, all of them work as long as you stick to the required dimensions of 32×32.

De asemenea, aveți opțiunea de a crea un Favicon cu Shopify’s Hatchful Logo and Free Favicon Generator. Vizualizați întregul nostru ghid pe utilizare plin de ecloziune pentru a construi un logo.

descărcați sigla

Odată ce creatorul logo-ului își face treaba, vă oferă un fișier plin cu mai multe sigle formats, dintre care unul este Favicon.

Shopify Fișier Favicon

Rețineți că multe dintre siglele pe care le faceți plin de ecloziune (citiți Recenzie complicată) use white space around the logo, so you may have to adjust it for the graphic to cover most of the space. In general, I’ve found that you should only use the provided Hatchful favicon if it already looks good (it fills up most of the space and doesn’t have small elements like text).

If that’s not the case, use a third-party editing software like Photoshop or Pixlr to cut out some of the unnecessary elements.

Important: You need to use a larger version of the image if you’re planning on stretching it over a canvas to cut out text and white space. For this, I used Hatchful to generate logos but actually took one of the large logos (not the Favicon file provided) since I don’t want blurring to occur when I stretch it over the 32×32 canvas.

În interiorul software-ului de editare, alegeți o nouă pânză cu Lățimea și Înălțimea ambelor setate la 32.

32 de 32

Creați un strat pentru noua imagine și asigurați-vă că imaginea este mai mare decât pânza 32 × 32, deoarece este posibil să o întindeți. Apoi încărcați sau așezați imaginea în pânză.

În următoarea captură de ecran, am designul Favicon mărit pentru a mă asigura că se potrivește square properly. It’s blurry, but I know it will look much better when I zoom out.

versiune mare

As you can see, the zoomed out version of the Favicon in the Pixlr designer looks good. I’ve covered most of the space allotted, opted for a bright and solid color icon, and removed all signs of smaller text.

versiune mai mică

The last step is to Download the file. You can choose to make it a transparent PNG at this point. But for this tutorial I’m sticking with a high-resolution JPG so that it looks as sharp as possible. And I don’t mind having a background with a solid color.

Descarca - Shopify Favicon

Du-te înapoi la dvs. Shopify bord. Faceți clic pe Magazin online> Teme> Personalizați.

Apoi accesați Setări temă> Favicon.

Încărcați noul Favicon și faceți clic pe butonul Salvare din Shopify Editor.

previzualizare imagine

Again, the primary way to test out and view your Favicon is by simply opening up a tab with your homepage website URL. As you can see, the Favicon shows up nicely and is actually a little better than my previous Favicon, seeing as how that one didn’t fill up the entire 32×32 space provided.

produsul final - Shopify Favicon

În Concluzie

A Shopify Favicon takes no more than a few minutes to design and add to your site, yet it provides a wonderful reminder to your visitors on which website they’re on. In addition, it can serve as a way for people to find your website in their bookmarks and browser histories, considering they’re most likely searching through a long list of other sites when going through those sections.

Keep in mind that you shouldn’t settle for a blurry or illegible Shopify Favicon image. If you find that the first Favicon doesn’t look quite right, or you’d like to cut out some text or add a transparent background, go back to the beginning and get it right. Although it’s not a good idea to have no Favicon at all, a blurry or hard-to-see Favicon makes your brand look unprofessional and somewhat silly.

Dacă aveți întrebări despre adăugarea Favicons la Shopify, sau făcându-ți propriul Shopify Favicon, anunțați-ne în secțiunea de comentarii de mai jos.

Joe Warnimont

Joe Warnimont este un scriitor din Chicago care se concentrează pe instrumentele de comerț electronic, WordPress și social media. Când nu pescuiește sau nu practică yoga, colectează ștampile în parcurile naționale (chiar dacă asta este în principal pentru copii). Vezi portofoliul lui Joe pentru a-l contacta și a vedea lucrările din trecut.

Comentarii Răspunsuri 0

Lasă un comentariu

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate *

Evaluare *

Acest site folosește Akismet pentru a reduce spamul. Aflați cum sunt procesate datele despre comentarii.