Jak zmienić Favicon w PrestaShop 1.7?

27 października 2019|Kamil Bolek

Po instalacji sklepu PrestaShop konieczne jest dostosowanie kilku elementów. Jedną z czynności do odhaczenia jest z pewnością ustawienie ikony sklepu, a więc Favicona. Pomaga on budować rozpoznawalność Twojej firmy. W tym krótkim tutorialu pokażę Ci jak ustawić ikonę Twojego sklepu PrestaShop.

Czym jest Favicon?

To ikona Twojego sklepu internetowego. Wyświetlana jest na zakładce, w przeglądarce internetowej. Poniżej przykład Favicona:

Przykład Favicon sklep internetowy

Favicon w PrestaShop

Domyślnie ustawiony Favicon na sklepie to ikona z logo PrestaShop. Czyli pingwin na błękitnym tle. Każdy poważny sklep internetowy nie powinien posługiwać się domyślnym Faviconem, zatem warto go zmienić czym prędzej, szczególnie z uwagi na fakt, że proces ten zajmie kilka minut. Do podmiany Favicona nie będzie potrzebny Ci również programista – zmiany wdrożysz na własną rękę, bez najmniejszych problemów. Proces będzie się składał z dwóch szybkich kroków:

  1. Wygenerowanie ikony w formacie .ico
  2. Podmiana ikony w Panelu PrestaShop

Przygotowanie Favicon w formacie .ico

Zanim podmienimy domyślny Favicon na docelowy, wpierw musimy przygotować odpowiedni plik. Musisz wiedzieć bowiem, że zwykła grafika w formacie .jpg czy .png nie będzie zaczytana. Grafikę taką musimy skonwertować na plik w formacie .ico. Nie musisz się martwić – proces jest bardzo prosty, a całość wykonamy za pomocą darmowego narzędzia online.

Pierwszy krok to przygotowanie pliku .png lub .jpg z ikoną Twojego sklepu. Rozmiar nie ma znaczenia, ale najlepiej gdyby wymiary wynosiły co najmniej 50×50 pikseli. Grafika może też być większa, i nie ma żadnego ograniczenia rozmiarowego.

Pamiętaj, że ikona Twojego sklepu PrestaShop będzie wyświetlona w niewielkim rozmiarze, zatem zadbaj o jej czytelność.

Czego nie robić

  • Nie umieszczaj nazwy swojej firmy – składa się ze zbyt dużej ilości znaków i w małym formacie będzie nieczytelna
  • Nie umieszczaj skomplikowanych grafik – podobnie jak powyżej, w małym formacie rozpoznanie elementu może być kłopotliwe

Pomysły na Favicon

  • Jeśli Twój sklep internetowy posługuje się sygnetem, umieszczenie go jako Favicon będzie najlepszym rozwiązaniem. Sygnet to symbol Twojej marki, tak jak np. nadgryzione jabłko firmy Apple, czy litera „M” restauracji McDonald’s.
  • Jeżeli Twój sklep nie ma sygnetu, możesz jako Favicon użyć jedną z liter nazwy firmy. My dla przykładu jako Favicon naszej strony nexis.pl ustawiliśmy literę „X”.

Jeśli masz już gotową ikonę, musimy ją skonwertować na wspomniany wcześniej format .ico. W tym celu wystarczy, że wpiszesz w Google „png to favicon converter” i wejdziesz w dowolną stronę. Jeśli jednak nie masz żadnych preferencji, polecam Ci narzędzie favicon-generator.org. Oczywiście jest ono w pełni darmowe. Wgrywasz plik w formacie .png lub .jpg, a po chwili pobierasz Favicon.

Skoro masz już wygenerowany Favicon, teraz czas na ostatni krok – podmianę domyślnej ikony na docelową. Poniższa instrukcja jest przygotowana pod PrestaShop 1.7, ale w starszych wersjach proces jest bardzo podobny.

Zmiana Favicon w PrestaShop 1.7

Zaloguj się do swojego Panelu PrestaShop. W menu po lewej stronie znajdź sekcję ULEPSZENIA, a następnie kliknij w Wygląd > Szablony:

Zmiana ikony Favicon w PrestaShop

Znajdziesz się na stronie, w której zmienia się Favicon. Po prawej stronie odnajdź sekcję Favicon, a następnie kliknij w przycisk Browse. W kolejnym kroku wybierz wcześniej przygotowaną ikonę sklepu, z następnie zapisz zmiany.

To wszystko! Od teraz Twój sklep będzie posiadał nową, oryginalną ikonę. Zmiany będą widoczne po odświeżeniu strony. Jeśli nowa ikona nie będzie widoczna po odświeżeniu, konieczne będzie wyczyszczenie pamięci podręcznej. Jeśli nie wiesz jak wyczyścić pamięć podręczną, zapraszam Cię do tego artykułu.

4.5/5 - (11 votes)
Prowadzisz sklep
PrestaShop?

Zobacz, jak możemy ulepszyć
Twój sklep internetowy.

Chcę zobaczyć