Jak dodać favicon do swojej witryny WordPress?

Favicon lub ulubiona ikona to mały obrazek obok tytułu strony na karcie przeglądarki. Ta ikona witryny odgrywa kluczową rolę w ustalaniu tożsamości Twojej witryny.

Jeśli posiadasz profesjonalną stronę internetową, rozważ użycie favicon, jeśli jeszcze tego nie zrobiłeś. Tutaj omówimy znaczenie tego i rzeczy, które należy wziąć pod uwagę podczas przygotowywania jednego. Pokażemy Ci również trzy metody dodawania favikony do Twojej witryny WordPress.

Dlaczego powinieneś używać favicon?

Aby zademonstrować znaczenie favicon, spójrz na zrzut ekranu poniżej.

Jak widać, każda karta ma inne ikony, które odróżniają odwiedzane strony internetowe. Gdy masz w przeglądarce kilka kart, favikony pomagają zidentyfikować te strony. W rezultacie zapewnia lepsze wrażenia użytkownika.

Favikona przydaje się nie tylko na kartach przeglądarki. Gdy użytkownicy dodadzą skrót do strony na swoim mobilnym ekranie głównym lub pulpicie, favicona zostanie wyświetlona na ekranie. Ponadto favikony mogą działać podobnie do logo. Kiedy ludzie to zobaczą, natychmiast rozpoznają Twoją witrynę i markę.

Przygotowanie faviconu

Najszybszym i najłatwiejszym sposobem utworzenia favicon jest użycie generatorów favicon. Nie musisz mieć żadnej wiedzy technicznej, ponieważ większość z nich zapewnia gotowe do użycia obrazy, które musisz tylko trochę poprawić.

Rozważ użycie logo swojej marki, ale upewnij się, że można je przyciąć do kwadratowej ikony. Musi również wyglądać na tyle prosto, aby mimo niewielkich rozmiarów był wyraźnie widoczny. Użyj programów do edycji obrazów, takich jak Photoshop, DesignWizard lub GIMP, aby zmodyfikować i zmienić rozmiar swojego logo.

Jako format obrazu zaleca się użycie pliku ICO, ponieważ większość przeglądarek go obsługuje. Jednak nie wszystkie programy do edycji zdjęć umożliwiają tworzenie plików ICO. Dlatego lepiej jest korzystać z generatorów favicon online, które zapewniają taką opcję. Lub zapisz obraz jako PNG i użyj internetowego konwertera ICO. Zazwyczaj rozmiar musi wynosić 16 x 16 pikseli.

Jeśli korzystasz z funkcji ikony witryny WordPress 4.3, nie musisz się martwić o wcześniejszą konwersję obrazu. Możesz teraz przesłać dowolny plik obrazu jako favicon . Niezależnie od tego zawsze upewnij się, że można go wyświetlić w dowolnej przeglądarce po przesłaniu.

3 sposoby na dodanie faviconu do witryny WordPress

Istnieją trzy metody, dzięki którym możesz dodać favicon do swojej witryny, wybierz preferowaną opcję.

Opcja 1: Konfigurator WordPress

W przypadku użytkowników WordPress 4.3 korzystanie z funkcji ikony witryny jest najwygodniejszym i zalecanym sposobem dodawania favicon.

Przygotuj kwadratowy obrazek, który ma co najmniej 512 pikseli wysokości i szerokości. Plik nie powinien przekraczać 128 MB. Jeśli masz prostokątny obraz, pozwolą Ci go przyciąć podczas przesyłania favikony .

Gdy obraz będzie gotowy, wykonaj następujące kroki:

1. Otwórz pulpit nawigacyjny WordPress, przejdź do Wygląd i wybierz Dostosuj.

2. Poszukaj zakładki zawierającej ikonę witryny. Większość motywów miałaby to w tożsamości witryny, ale niektóre zmieniają nazwę karty na tytuł witryny, nazwę marki, logo witryny i nagłówek itp.

3. Wybierz ikonę witryny i wybierz obraz z Biblioteki multimediów lub prześlij nowy plik.

4. Zostaniesz przeniesiony do edytora Crop Image. Dostosuj pozycję i proporcje, jak chcesz.

5. Gratulacje! Powinieneś mieć nową faviconę. Jeśli jeszcze się nie pojawił, WordPress zaleca wyczyszczenie pamięci podręcznej i ponowne uruchomienie przeglądarki.

Opcja 2: Korzystanie z wtyczek

Jeśli nie zaktualizowałeś swojego WordPressa, możesz użyć wtyczek, aby dodać favicon .

Niektóre wtyczki zapewniają większą kontrolę nad wyglądem favicon na urządzeniach innych niż komputery stacjonarne. Na przykład Favicon firmy RealFaviconGenerator daje możliwość dostosowania wyglądu ikony w różnych systemach operacyjnych.

Aby skorzystać z wtyczki, wykonaj następujące kroki:

1. Przejdź do Wtyczki i kliknij Dodaj nowy na pulpicie WordPress.
2. Wyszukaj Favicon przez RealFaviconGenerator, a następnie zainstaluj i aktywuj wtyczkę.
3. Wybierz Wygląd i kliknij Favicon na pulpicie nawigacyjnym. Prześlij kwadratowy obraz większy niż 70 x 70 pikseli. Idealnie obraz powinien mieć 260 x 260 pikseli lub więcej.
4. Zostaniesz przekierowany na stronę, na której możesz ustawić wygląd swojej favicon w iOS, Android Chrome, Windows i Safari. Następnie kliknij Wygeneruj favicony i kod HTML.

Poza tą wtyczką możesz użyć All in One Favicon. Wtyczka umożliwia ustawienie różnych favicon dla back-endu i front-endu. W ten sposób nie pomylisz się, gdy Twoja witryna i pulpit nawigacyjny będą otwarte.

Opcja 3: Instalacja ręczna przez klienta FTP

Inną metodą jest ręczne przesłanie faviconu do witryny WordPress. W tym celu musisz połączyć swoją witrynę z klientem FTP, takim jak FileZilla. Twoja ikona może być w formacie ICO lub PNG i powinna nosić nazwę favicon.

Zdecydowanie zaleca się również utworzenie motywu potomnego, aby użyć tej metody. W ten sposób zmiany w kodzie nie zostaną usunięte, gdy pojawi się nowa aktualizacja motywu.

Gdy Twoja witryna jest połączona, wykonaj następujące czynności:

1. Prześlij plik favicon do bieżącego folderu motywu za pośrednictwem klienta FTP. Jeśli używasz motywu podrzędnego, prześlij go do tego folderu.
2. Dodaj ten sam plik do katalogu głównego. Powinien znajdować się w tym samym folderze, co wp-content i wp-admin. Ma to na celu zapewnienie, że Twoje favicony będą widoczne w czytnikach kanałów.
3. Na pulpicie nawigacyjnym WordPress przejdź do Wygląd i kliknij Edytor motywów.
4. Teraz wybierz plik nagłówka motywu i dodaj ten kod poniżej w tagu, jeśli masz plik ICO:

<link rel=”ikona skrótu” href=”<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico” />

Zastąp część po href= aż do /favicon.ico ścieżką do katalogu głównego. Wyglądałoby to tak:

<link rel=”ikona skrótu” href=”<http://www.nazwatwojejdomeny.com/favicon.ico” />

Jeśli masz plik PNG, po prostu zamień format pliku. Następnie zaktualizuj plik.

5. Odśwież swoją stronę. Jeśli to działa, powinieneś już mieć nową faviconę.

W przypadku wszystkich metod nie zapomnij sprawdzić wyglądu swojej favicon na urządzeniach mobilnych. Otwórz swoją witrynę w przeglądarce mobilnej i dodaj ją do ekranu głównego.

Chociaż są małe, favicony mogą zwiększyć rozpoznawalność marki i zapewnić lepsze wrażenia użytkownika. Możesz użyć generatorów favicon online lub dowolnego oprogramowania do edycji obrazów, aby stworzyć własną favicon. Jeśli już go masz, po prostu dodaj go do swojej witryny WordPress, korzystając z jednej z trzech powyższych metod. Powodzenia!

Przeczytaj więcej Popularne wtyczki i motywy dla witryn WordPress LMS