Jak dodać Shopify Favicon do Twojego Shopify Sklep

Tożsamość Twój sklep e-commerce łączy w sobie kilka elementów, takich jak logo, kolory witryny i Twoje materiały marketingowe. Ta tożsamość wzmacnia ogólną markę i tworzy zdrowe przypomnienie dla klientów, wywołując poczucie komfortu i niezawodności, gdy widzą obrazy i kolory Twojej marki.

Mimo niewielkich rozmiarów Favicon również wpisuje się w tę strategię marki. W tym samouczku pokażemy, jak utworzyć i dodać favikonę do pliku Shopify sklep, dopełniając Twój wygląd online i ułatwiając rozpoznanie Twojego sklepu podczas wizyty klientów.

Co to jest Shopify Favikona?

A Shopify Favicon lub inna Favicon to mała ikona Twojej witryny, która pojawia się na karcie przeglądarki obok nazwy Twojej witryny.

Pasek adresu przeglądarki jest najczęstszym obszarem przeglądania witryny Favicon, ale pojawia się również w następujących lokalizacjach:

• Aplikacje paska narzędzi
• Zakładki
• Wyniki historii
• Paski wyszukiwania
• Czasami udostępniane w mediach społecznościowych

Zasadniczo, gdy przeglądarka musi wyświetlić link do Twojej witryny, a nie ma zbyt wiele miejsca na inną treść, zastępuje Twoje zwykłe, pełnowymiarowe logo Faviconą.

Domyślnie Shopify dodaje Shopify logo dla Favicon, więc musimy to zmienić.

Dobra favikona to często mniejsza wersja Twojego logo, ale czasami różnią się one nieco, ponieważ chcesz mieć pewność, że będą widoczne, zajmowały całe przydzielone miejsce i dodały trochę koloru obok nazwy Twojej witryny.

Domyślnie wszystkie przeglądarki obsługują Favicony o rozmiarze 32×32 piksele. To raczej mały obraz, ale za pomocą niektórych generatorów online możesz stworzyć własny Shopify Favicon dla Twojej witryny. Ponadto większe obrazy i tak są zmniejszane, więc niekoniecznie musisz uzyskać dokładnie 32 × 32.

Favicon ma całkiem sporo sensu w przypadku sklepów internetowych Shopify ponieważ można je łatwo dodać, a wzmocnienie tożsamości marki jako sprzedawcy internetowego jest ważne. Niektórzy twierdzą również, że pomaga to w SEO.

Czytaj dalej, aby dowiedzieć się więcej o tym, jak dodać Favicon do swojego Shopify sklep.

Jak dodać Faviconę do pliku Shopify Sklep – skrócona instrukcja obsługi

Jak wspomniano, podczas uruchamiania witryny Shopify automatycznie dodaje a Shopify logo jako Favicon Twojej witryny. Nie ma w tym nic złego, ale o wiele bardziej profesjonalne i zorientowane na markę jest umieszczenie własnego logo. Oto kroki, które musisz wykonać:

Krok 1: Przejdź do swojego Shopify Deska rozdzielcza

Dlatego idź do swojego Shopify panelu sterowania i kliknij Sklep internetowy w obszarze Kanały sprzedaży.

Krok 2: Przejdź do Ustawień motywu

Przejdź do swoich Motywów i kliknij przycisk Dostosuj obok bieżącego motywu. Chociaż ustawienia zmieniają się w zależności od motywu, wszystkie najnowsze Shopify motywy mają sekcję, w której można zmienić Favicon.

W Shopify dostosowywania, przewiń w dół listy po lewej stronie i kliknij Ustawienia motywu.

Krok 3: Wybierz przycisk Favicon

W nowej sekcji znajdź i wybierz przycisk Favicon.

Spowoduje to wyświetlenie przycisku Wybierz obraz lub Przeglądaj darmowe obrazy. Nie mogę sobie wyobrazić, że mają darmowe obrazy pasujące do Twojego logo, więc najlepiej kliknąć Wybierz obraz, aby przesłać niestandardowy obraz z komputera.

Krok 4: Prześlij swoją Faviconę

Wybierz plik Favicon i prześlij go do Shopify.

Następnie zobaczysz podgląd ikony Favicon. Aby wprowadzić zmiany na stałe, wybierz przycisk Zapisz w Shopify.

Aby wyświetlić swoje Shopify favicon w akcji, przejdź do frontonu swojej witryny i spójrz na aktualną kartę przeglądarki. Powinieneś zobaczyć Faviconę obok tytułu swojej witryny.

Wskazówki dotyczące tworzenia Favikony

Chociaż wygenerowanie małej ikony wydaje się łatwe, ważne jest, aby zrobić to dobrze, biorąc pod uwagę, że klienci widzą Faviconę za każdym razem, gdy odwiedzają Twoją witrynę. Łatwo jest również stworzyć Faviconę, która będzie rozmyta lub nie wypełnia całej przestrzeni, co jest sprzeczne z celem Faviconu, ponieważ nie jest zbyt widoczny dla oka.

Aby rozwiązać wszelkie problemy, oto kilka wskazówek dotyczących tworzenia pliku Shopify Favikona:

• Rozpocznij projekt w formacie większym niż 32×32 i zmniejsz go, jeśli zajdzie taka potrzeba. Jeśli spróbujesz rozciągnąć mniejszy obraz w przestrzeń, z pewnością uzyskasz bardziej rozmyty obraz. Na przykład pobranie obrazu 32×32 z Hatchful i próba jego rozciągnięcia, aby pozbyć się zapisanej części logo, może powodować problemy.
• Zwykle nie można po prostu wziąć swojego obecnego logo i oczekiwać, że będzie działać idealnie jako Favicon.
• Favicon wygląda świetnie, gdy pokryjesz każdy piksel udostępnionej przestrzeni. Nie masz dużo miejsca, więc powinieneś wykorzystać każdy kwadratowy piksel w przestrzeni 32×32.
• Usuń cały tekst, ponieważ jest trudny do odczytania w Faviconie. Wyjątkiem jest sytuacja, gdy głównym elementem logo jest duża litera.
• Fotografuj, aby uzyskać jednolite, jaśniejsze kolory. Najlepiej sprawdzają się proste, kreskówkowe logo.
• Spójrz na Favicony swoich ulubionych marek. Co zrobili, aby ich wizerunek w Internecie dotarł do favikony?
• Rozważ wypełnienie całej przestrzeni tłem w jednolitym kolorze lub utworzenie przezroczystego tła z rozciągniętym elementem pierwszego planu tak, aby dotykał krawędzi. Zauważysz, że wiele większych marek ma przezroczyste tła dla swoich Favicon.
• Format pliku ICO dobrze sprawdza się w przypadku mniejszych obrazów. Jeśli nie jesteś zaznajomiony, użyj PNG dla przezroczystych teł lub JPG dla wysokiej rozdzielczości Favicons z jednolitym tłem.

Jak wygenerować Faviconę dla swojego Shopify Sklep

Masz możliwość zaprojektowania Favicon w dowolnym wybranym przez siebie oprogramowaniu do projektowania. Jeśli wolisz Photoshopa, idź z tym. Jeśli wolisz darmowe oprogramowanie, takie jak GIMP lub Pixlr, wszystkie z nich działają, o ile trzymasz się wymaganych wymiarów 32 × 32.

Masz także możliwość stworzenia Faviconu ShopifyLogo Hatchful i darmowy generator Favicon. Zobacz cały nasz przewodnik przy użyciu Wylęgowy zbudować logo.

Po zakończeniu pracy program do tworzenia logo dostarczy Ci plik zawierający wiele formatów logo, w tym Favicon.

Pamiętaj, że wiele logo, z których tworzysz Wylęgowy (przeczytaj nasze Wylęgowa recenzja) użyj białej przestrzeni wokół logo, więc być może będziesz musiał ją dostosować, aby grafika zajmowała większość przestrzeni. Ogólnie rzecz biorąc, odkryłem, że powinieneś używać dostarczonej favikony Hatchful tylko wtedy, gdy już wygląda dobrze (wypełnia większość miejsca i nie zawiera małych elementów, takich jak tekst).

Jeśli tak nie jest, użyj oprogramowania do edycji innej firmy, takiego jak Photoshop lub Pixlr, aby wyciąć niektóre niepotrzebne elementy.

Ważny: Jeśli planujesz rozciągnąć obraz na płótnie w celu wycięcia tekstu i białych znaków, należy użyć większej wersji obrazu. W tym celu użyłem Hatchful do wygenerowania logo, ale tak naprawdę wziąłem jedno z dużych logo (nie dostarczony plik Favicon), ponieważ nie chcę, aby wystąpiło rozmycie, gdy rozciągam je na płótnie 32 × 32.

W oprogramowaniu do edycji wybierz nowe płótno z wartościami Szerokość i Wysokość ustawionymi na 32.

Utwórz warstwę dla nowego obrazu i upewnij się, że obraz jest większy niż płótno 32 × 32, ponieważ może być rozciągany. Następnie prześlij lub umieść obraz na płótnie.

Na poniższym zrzucie ekranu mam powiększony projekt Favicon, abym mógł się upewnić, że pasuje do kwadratu. Jest rozmazany, ale wiem, że będzie wyglądał o wiele lepiej, gdy pomniejszę.

Jak widać, pomniejszona wersja Favicon w kreatorze Pixlr wygląda dobrze. Pokryłem większość przydzielonego miejsca, zdecydowałem się na jasną i jednolitą ikonę kolorową i usunąłem wszystkie znaki mniejszego tekstu.

Ostatnim krokiem jest pobranie pliku. W tym momencie możesz ustawić przezroczysty plik PNG. Ale w tym samouczku trzymam się pliku JPG o wysokiej rozdzielczości, aby wyglądał tak ostro, jak to możliwe. I nie mam nic przeciwko posiadaniu tła w jednolitym kolorze.

Wróć do swojego Shopify panel. Kliknij Sklep internetowy > Motywy > Dostosuj.

Następnie przejdź do Ustawienia motywu > Favicon.

Prześlij nową Faviconę i kliknij przycisk Zapisz w pliku Shopify redaktor.

Ponownie, głównym sposobem przetestowania i wyświetlenia Favicon jest po prostu otwarcie karty z adresem URL strony głównej. Jak widać, Favicon prezentuje się ładnie i jest trochę lepszy od mojego poprzedniego Favicona, biorąc pod uwagę, że ten nie zajmował całej dostępnej przestrzeni 32×32.

Wnioski w

A Shopify Zaprojektowanie i dodanie do witryny Favicon zajmuje nie więcej niż kilka minut, a mimo to zapewnia odwiedzającym wspaniałe przypomnienie, w której witrynie się znajdują. Ponadto może służyć jako sposób na znalezienie Twojej witryny w zakładkach i historii przeglądarki, biorąc pod uwagę, że podczas przeglądania tych sekcji najprawdopodobniej przeszukują długą listę innych witryn.

Pamiętaj, że nie powinieneś zadowalać się obrazem niewyraźnym lub nieczytelnym Shopify Obraz Favikony. Jeśli stwierdzisz, że pierwsza Favicona nie wygląda całkiem dobrze, chcesz wyciąć jakiś tekst lub dodać przezroczyste tło, wróć na początek i popraw to. Chociaż nie jest dobrym pomysłem brak Favikony, niewyraźna lub słabo widoczna Favicona sprawia, że ​​Twoja marka wygląda nieprofesjonalnie i nieco głupio.

Jeśli masz pytania dotyczące dodawania Favicons do Shopifylub wykonanie własnego Shopify Favicon, daj nam znać w sekcji komentarzy poniżej.