Favikona dla Shopify
Shopify umożliwia przesłanie favikony z edytora motywów w ciągu kilku sekund. Każdy nowoczesny motyw Shopify udostępnia pole Favicon w Ustawieniach motywu, a CDN Shopify wyświetla ikonę na każdej stronie Twojego sklepu. Użyj favicon generator, aby najpierw utworzyć kwadrat o wymiarach 512 × 512 PNG — Shopify automatycznie zmieni jego rozmiar do wymaganego rozmiaru wyświetlacza 32 × 32.
Favikona to jeden z pierwszych sygnałów marki, jaki widzi potencjalny klient, gdy otwiera wiele kart. W sklepach Shopify favikona pojawia się na karcie przeglądarki, pasku zakładek i pasku adresu. Wyraźna, rozpoznawalna favikona wzmacnia zaufanie do marki i pomaga kupującym szybko znaleźć zakładkę Twojego sklepu wśród dziesiątek otwartych zakładek.
Każdy nowoczesny motyw Shopify (Dawn, Refresh i większość motywów premium) zawiera pole Favicon w Theme Editor w Ustawieniach motywu. Aby uzyskać do niego dostęp, zaloguj się do swojego administratora Shopify, przejdź do Sklep internetowy > Motywy i kliknij Dostosuj obok aktywnego motywu. Na lewym pasku bocznym kliknij Ustawienia motywu (lub ikonę koła zębatego), a następnie poszukaj sekcji Favicon.
Shopify zaleca przesłanie kwadratu PNG o wymiarach 32×32 pikseli dla pola favikony. W praktyce przesłanie pliku 512×512 PNG daje ostrzejszy wynik, ponieważ Shopify zmniejsza próbkowanie do 32×32 z lepszą jakością, niż w przypadku rozpoczęcia od oryginału 32×32. Zawsze zaczynaj od największego kwadratowego źródła, jakie posiadasz — generator ułatwia to.
Po przesłaniu swojej ulubionej ikony kliknij Zapisz w prawym górnym rogu Theme Editor. Shopify przetwarza obraz, przesyła go do swojej sieci CDN i w ciągu kilku minut rozpowszechnia na każdej stronie sklepu. Nie musisz ponownie publikować motywu ani wprowadzać żadnych innych zmian w kodzie.
Starsze lub mocno spersonalizowane motywy Shopify mogą nie wyświetlać pola Favicon w Ustawieniach motywu. W takim przypadku musisz bezpośrednio edytować kod Liquid motywu. Otwórz edytor plików motywów (Sklep internetowy > Motywy > Edytuj kod), znajdź plik theme.liquid i znajdź sekcję `<head>`. Wstaw `<link rel='icon' type='image/png' href='{{ 'favicon.png' | asset_url }}'>` po przesłaniu pliku favicon.png do folderu Assets motywu.
W przypadku sklepów Shopify w środowisku motywu 2.0 faviconą zarządza się poprzez site.webmanifest, który Shopify generuje automatycznie na podstawie ustawień motywu. Jeśli Twój sklep korzysta z powłoki Progressive Web App, manifest Shopify zawiera favikonę jako ikonę aplikacji. Aktualizacja favikony motywu automatycznie aktualizuje ikonę manifestu — nie jest wymagana dodatkowa edycja JSON.
Przezroczyste tła działają poprawnie w ulubionych ikonach Shopify. Edytor motywów zachowuje kanał alfa PNG podczas przesyłania do CDN. Jeśli jednak Twoje logo ma białe tło, będzie wyświetlane z białym polem na kartach przeglądarki w trybie ciemnym. Aby tego uniknąć, przed przesłaniem wyeksportuj swoje logo bez wypełnienia tła.
Jeśli prowadzisz wiele sklepów Shopify (typowa konfiguracja dla międzynarodowych witryn sklepowych), każdy sklep musi mieć niezależnie ustawioną favikonę. Favikona dotyczy konkretnego sklepu, a nie ustawienia partnera Shopify lub organizacji. Zaloguj się do administratora każdego sklepu i powtórz kroki Theme Editor.
Unieważnienie pamięci podręcznej może opóźnić aktualizacje favikon w Shopify. CDN Shopify buforuje zasoby z długimi czasami TTL. Po zmianie favikony przeglądarki mogą przez wiele godzin wyświetlać starą ikonę. Otwórz okno prywatne/incognito, aby zobaczyć zaktualizowaną ikonę bez zakłóceń pamięci podręcznej. Alternatywnie poinstruuj przeglądarkę, aby mocno odświeżyła (Ctrl+Shift+R na Windows, Cmd+Shift+R na Macu).
Shopify nie wstawia natywnie tagu apple-touch-icon ani linku do manifestu aplikacji internetowej, chyba że szablon motywu je zawiera. Jeśli chcesz, aby instalacje iOS na ekranie głównym wyświetlały Twoje logo, a nie zrzut ekranu strony, dodaj tag apple-touch-icon ręcznie w Sklepie internetowym > Motywy > Edytuj kod > theme.liquid. Umieść `<link rel='apple-touch-icon' rozmiary='180x180' href='{{ 'apple-touch-icon.png' | Asset_url }}'>` w sekcji `<head>` i prześlij plik 180×180 PNG do Zasobów.
W przypadku sklepów Shopify Plus możesz użyć brandingu przy kasie, aby dostosować favikonę w procesie realizacji transakcji oddzielnie od głównej favikony w sklepie. Znakowanie usługi Checkout konfiguruje się w obszarze Ustawienia > Realizacja transakcji i konta > Dostosuj. Dzięki temu na stronach realizacji zakupu będzie wyświetlana inna ikona ulubionych niż w sklepie głównym, co jest przydatne w przypadku konfiguracji obejmujących wiele marek.
Aby sprawdzić, czy Twoja favikona Shopify działa, użyj live favicon tester i wprowadź adres URL swojego sklepu. Tester potwierdza, że ikona jest publicznie dostępna i pokazuje, jak renderuje się w rozdzielczości 16, 32 i 48 pikseli. Sprawdź także best favicon size, aby dowiedzieć się, które dodatkowe rozmiary poprawią komfort instalacji PWA.
Typowe błędy Shopify favicon obejmują przesłanie prostokątnego logo bez przycięcia go najpierw do kwadratu (powoduje zgniecenie ikony), przesłanie bardzo małego obrazu (rozmycie na wyświetlaczach Retina) i zapomnienie kliknięcia Zapisz po przesłaniu (zmiana nie zostanie zatwierdzona, dopóki wyraźnie nie zapiszesz). favicon generator eksportuje odpowiednio kwadratowy plik PNG w rozdzielczości 512×512, gotowy do bezpośredniego przesłania Shopify.
Jak to działa
- 1
Wygeneruj kwadrat 512×512 PNG
Użyj [favicon generator](tool:favicon-generator) ze swoim logo lub znakiem marki. Wyeksportuj rozmiar 512×512 PNG z pakietu do pobrania — jest to prawidłowy rozmiar wejściowy dla Shopify.
- 2
Otwórz swój motyw w Theme Editor
W panelu administracyjnym Shopify przejdź do Sklep internetowy > Motywy i kliknij Dostosuj obok aktywnego motywu.
- 3
Przejdź do Ustawienia motywu > Favicon
Na lewym pasku bocznym kliknij Ustawienia motywu (ikona koła zębatego na dole w przypadku większości motywów) i poszukaj sekcji Favicon lub Marka. Dokładna etykieta różni się w zależności od tematu.
- 4
Prześlij swój PNG i zapisz
Kliknij pole przesyłania ikony favicon, wybierz 512×512 PNG i potwierdź. Kliknij Zapisz w prawym górnym rogu. Shopify przesyła ikonę do swojej sieci CDN i rozpowszechnia ją na wszystkich stronach.
- 5
Sprawdź w oknie incognito
Otwórz okno przeglądarki prywatnej/incognito i przejdź do adresu URL swojego sklepu. Upewnij się, że na karcie przeglądarki pojawiła się nowa ikona ulubionych. Do szybkiej kontroli zewnętrznej użyj [favicon tester](utility:favicon-tester).
Wypróbuj teraz
Wygeneruj favikonę gotową do Shopify
Generator FaviconFAQ
Gdzie dodać favikonę w Shopify?+
Sklep internetowy > Motywy > Dostosuj > Ustawienia motywu > Favicon. Prześlij kwadrat PNG (zalecane wymiary 512×512), kliknij Zapisz, a Shopify automatycznie wstawi ikonę na każdą stronę sklepu.
Jakiego rozmiaru favikony używa Shopify?+
Shopify wyświetla ikonę favicon w rozdzielczości 32×32 pikseli na kartach przeglądarki. Aby uzyskać najostrzejszy wynik, prześlij plik w rozdzielczości 512×512 — Shopify zmniejsza próbkę do rozdzielczości 32×32. Nigdy nie przesyłaj źródła mniejszego niż 32×32, w przeciwnym razie obraz będzie niewyraźny.
Dlaczego moja favikona Shopify wygląda na rozmazaną lub rozciągniętą?+
Prawdopodobnie przesłałeś obraz inny niż kwadratowy lub bardzo małe źródło. Przed przesłaniem przytnij logo do idealnego kwadratu i zacznij od rozmiaru co najmniej 256 × 256 pikseli. [favicon generator](tool:favicon-generator) automatycznie tworzy kwadrat 512×512 PNG gotowy na Shopify.
Dlaczego nie wyświetla się moja nowa favikona Shopify?+
Przeglądarki i pamięci podręczne CDN opóźniają aktualizacje. Otwórz okno incognito/prywatne i przejdź do adresu URL swojego sklepu, aby zobaczyć zaktualizowaną ikonę ulubionych bez zakłócania pamięci podręcznej. Jeśli podczas normalnego przeglądania nadal wyświetla się stara ikona, poczekaj kilka godzin, aż pamięć podręczna CDN wygaśnie.
Czy mogę dodać apple-touch-icon do mojego sklepu Shopify?+
Tak, ale wymaga to ręcznej edycji kodu. Prześlij plik apple-touch-icon.png o wymiarach 180×180 do folderu Zasoby motywu, a następnie dodaj `<link rel='apple-touch-icon' href='{{ "apple-touch-icon.png" | Asset_url }}'>` w theme.liquid w sekcji `<head>`.
Czy Shopify obsługuje ulubione ikony SVG?+
Wbudowane przesyłanie favikon Theme Editor nie akceptuje SVG. Aby użyć favikony SVG, dodaj ręcznie znacznik linku w theme.liquid: `<link rel='icon' type='image/svg+xml' href='{{ "favicon.svg" | Asset_url }}'>` po przesłaniu SVG do folderu Zasoby.
Czy potrzebuję programisty, aby zmienić moją ulubioną ikonę Shopify?+
Nie. Za pomocą Theme Editor (Sklep internetowy > Motywy > Dostosuj > Ustawienia motywu > Favicon) możesz przesłać i zapisać nową favikonę w niecałe dwie minuty, bez użycia kodu. Dostęp programisty jest potrzebny tylko w przypadku dodatków SVG lub apple-touch-icon.