Jak dodać Favicon do twojego bloga WordPress (proste metody)

Chcesz dodać favicon do twojego bloga WordPress?

Favicon lub ikonka witryny to mały obrazek, który pojawia się na karcie twojej przeglądarki internetowej obok tytułu witryny. Choć może się to wydawać trywialnym elementem, dobrze zaprojektowana ikona favicon może pomóc twojemu blogowi wyróżnić się w zatłoczonej przestrzeni online.

W tym artykule pokażemy, jak dodać faviconę do twojego bloga WordPress. W ten sposób możesz wywrzeć niezapomniane wrażenie na twoich odwiedzających.

Dlaczego powinieneś dodać Favicon do twojego bloga WordPress?

Ikona favicon jest niezbędna do dodania do twojego bloga WordPress, ponieważ pomaga użytkownikom szybko zidentyfikować twoją witrynę internetową i wzmocnić tożsamość marki. Na podstawie tej małej ikonki odwiedzający witrynę mogą łatwo rozpoznać twój blog.

Oto jak wygląda favicon w przeglądarce internetowej:

Innym celem favicon WordPress jest poprawa komfortu użytkowania. Gdy otwartych jest wiele kart, użytkownicy mogą spojrzeć na favicony, aby wiedzieć, na której witrynie internetowej się znajdują i przełączyć się na tę, którą chcą.

Jeśli użytkownicy dodadzą ikonę skrótu lub zakładkę do twojego bloga na swoich urządzeniach mobilnych, wówczas ikona favicon pojawi się jako ikona aplikacji na ich ekranie głównym. Ułatwi im to dostęp do twojej witryny internetowej za pomocą jednego dotknięcia.

Favicony mogą również pomóc w optymalizacji WordPress pod kątem wyszukiwarek (SEO). Jeśli zwrócisz uwagę na strony w wynikach wyszukiwania, zazwyczaj mają one funkcję favicon witryny przed meta tytułem strony. Może to sprawić, że twoja witryna internetowa będzie wyglądać na legalną i godną zaufania.

Jak stworzyć Favicon dla twojego bloga WordPress?

Najpierw dowiedzmy się, jak stworzyć dobrą faviconę dla twojego bloga.

Idealny rozmiar favicon WordPress to kwadratowy obrazek o szerokości i wysokości do 512 pikseli. Format obrazka favicon może być ICO, JPEG, PNG lub GIF.

SVG jest również popularnym formatem dla faviconów, ale nie są one domyślnie akceptowane przez WordPress. Można jednak skonfigurować WordPress tak, by zezwalał na dodawanie plików SVG.

Jeśli prowadzisz bloga biznesowego, możesz użyć logo twojej marki jako ikonki favicon. Jeśli jeszcze go nie masz, zapoznaj się z naszym przewodnikiem dla początkujących, jak stworzyć logo dla twojej witryny internetowej.

Jeśli masz gotowe logo, ale chcesz, aby tło było przezroczyste, możesz użyć Photoshopa lub darmowego narzędzia do edycji obraz ków z funkcją automatycznego usuwania tła. Upewnij się, że format pliku to PNG, aby zachować przezroczystość favikony.

Inną opcją jest darmowy generator favicon, taki jak Favicon.io. Narzędzie to umożliwia dostosowanie favicon od podstaw i pobranie plików w formacie PNG i ICO.

W związku z tym przyjrzyjmy się, jak łatwo dodać faviconę do twojego bloga WordPress. Omówimy 4 metody i możesz kliknąć poniższe odnośniki, aby przejść do metody, której chcesz użyć:

Metoda 1: Dodanie ikony Favicon za pomocą konfiguratora WordPress

Jest to najprostsza metoda zmiany favicon w WordPress. Wszystko, co musisz zrobić, to przesłać swój obrazek favicon do konfiguratora WordPress, a reszta zostanie załatwiona za Ciebie.

Pierwszym krokiem jest uzyskanie dostępu do konfiguratora WordPress. Jeśli korzystasz z klasycznego motywu, możesz przejść do Wygląd ” Dostosuj , aby to zrobić.

Jeśli korzystasz z motywu blokowego i nie możesz znaleźć konfiguratora, zapoznaj się z naszym przewodnikiem na temat poprawki brakującego konfiguratora motywu w panelu administracyjnym WordPress.

Następnie kliknij kartę „Tożsamość witryny” na lewym panelu bocznym.

W tym miejscu zobaczysz opcje umożliwiające dostosowanie logo witryny, sloganu, ikonki witryny i sloganu.

Jeśli chcesz dodać ikonę favicon witryny, musisz przewinąć w dół do sekcji „Ikona witryny” i kliknąć „Wybierz ikonę witryny”.

Pojawi się teraz biblioteka multimediów WordPress. Możesz wybrać istniejący obrazek lub przesłać nowy własny favicon z twojego komputera.

W tym przykładzie użyjemy logo WPBeginner jako ikonki witryny WordPress.

Po wybraniu obrazka kliknij przycisk „Wybierz” w prawym dolnym rogu okna.

Jeśli favicon jest większy niż zalecany rozmiar, WordPress pozwoli ci go przyciąć. Jeśli dokładnie odpowiada zalecanemu rozmiarowi, możesz go po prostu zostawić bez zmian.

Gdy obrazek będzie wyglądał dobrze, wystarczy kliknąć „Przytnij obrazek”.

Następnie zostaniesz przeniesiony do konfiguratora WordPress. Tutaj wszystko, co musisz zrobić, to kliknąć przycisk „Opublikuj” na lewym panelu bocznym, aby zakończyć twoją konfigurację favicon.

To wszystko! Teraz, gdy przesłałeś już swoją faviconę, możesz przejść na swoją witrynę internetową WordPress, aby sprawdzić, czy obrazek jest już aktywny.

Metoda 2: Dodanie ikony Favicon za pomocą edytora witryn WordPress

Jeśli korzystasz z motywu blokowego i chcesz dodać logo twojej marki zarówno jako część nagłówka witryny internetowej, jak i ikonkę witryny, to ta metoda jest dla ciebie.

W tym celu należy przejść do Wygląd ” Edytor z panelu administracyjnego WordPress.

Na tej stronie znajdziesz kilka menu umożliwiających dostosowanie twojej witryny internetowej, w tym Nawigacja i Style.

W tym poradniku należy kliknąć „Wzorce”, aby uzyskać dostęp do twojego wzorca bloku nagłówka witryny internetowej.

Po przewinięciu w dół zobaczysz kilka fragmentów szablonu: Nagłówek, Stopka i Ogólne.

Wystarczy kliknąć szablon „Nagłówek”, aby dodać tam twoją faviconę.

Następnie obok tekstu nagłówka pojawi się przycisk z ołówkiem.

Kliknij na nią, aby móc edytować wzorzec i wstawić twoją favikonę WordPress.

Znajdujesz się teraz w pełnej edycji witryny WordPress.

Teraz kliknij przycisk dodawania bloku „+” i wyszukaj blok Logo witryny. To tutaj dodasz obrazek, który stanie się twoją ikoną WordPress.

Przeciągnij i upuść blok w miejscu, w którym chcesz go umieścić w twoim nagłówku. W tym przykładzie umieściliśmy go obok tytułu witryny internetowej.

Następną rzeczą, którą należy zrobić, jest kliknięcie ikonki przesyłania w bloku Logo witryny.

Podobnie jak w przypadku poprzedniej metody, możesz wybrać istniejący obrazek lub przesłać nowy z biblioteki multimediów WordPress.

Następnie należy przejść do panelu bocznego Block settings po prawej stronie strony. Wystarczy włączyć ustawienie „Użyj jako ikonki witryny”, aby dodać logo jako faviconę.

Na koniec możesz nacisnąć przycisk „Zapisz” w prawym górnym rogu strony, aby opublikować twoją faviconę.

Pojawi się ostrzeżenie, że zmiana będzie miała wpływ na całą witrynę internetową. Upewnij się, że pole „Ikonka” jest zaznaczone i ponownie kliknij „Zapisz”.

Po wykonaniu wszystkich kroków możesz otworzyć swoją witrynę internetową, aby potwierdzić, że zmiana się powiodła.

Metoda 3: Dodanie Favicon za pomocą wtyczki WordPress Favicon Plugin

Jeśli wolisz używać wtyczki favicon WordPress, możesz skorzystać z tej metody, aby użyć darmowej wtyczki Favicon by RealFaviconGenerator.

Najpierw należy zainstalować i włączyć wtyczkę. Aby uzyskać więcej informacji, skorzystaj z naszego przewodnika na temat instalacji wtyczki WordPress.

Po włączaniu, przejdź do Wygląd ” Favicon w twoim kokpicie WordPress.

Następnie kliknij przycisk „Wybierz z biblioteki multimediów”, aby przesłać nowy obrazek lub użyć już istniejącego.

Należy pamiętać, że konieczne będzie użycie kwadratowego obrazu. Wtyczka zaleca, aby rozmiar ikonki witryny wynosił co najmniej 260 pikseli zarówno w szerokości, jak i wysokości, ale nie mniej niż 70 pikseli.

Po wybraniu obrazka wystarczy nacisnąć przycisk „Generuj favicon”.

Następnie wtyczka przekieruje cię do witryny internetowej RealFaviconGenerator, aby edytować favicon.

Możesz dostosować różne ustawienia, takie jak kolor tła i wygląd na stronach wyników wyszukiwania Google (SERP), iOS, Android, macOS Safari, Chrome i Windows Metro.

W sekcji „Opcje generatora favicon” możesz zaznaczyć pole, jeśli twoja witryna internetowa korzystała wcześniej z favicon. Jeśli tak, wpisz liczbę w drugim polu, aby wskazać używaną wersję favicon.

W ten sposób użytkownicy, którzy wcześniej przeszli na twoją witrynę, zobaczą nową faviconę zamiast starej.

Gdy wszystko wygląda już dobrze, wystarczy kliknąć przycisk „Generate your Favicons and HTML code”, aby dodać faviconę do twojej witryny WordPress.

Twój favicon powinien być teraz aktywny. Upewnij się, że wtyczka favicon WordPress jest włączona, aby favicon był zawsze włączony.

Metoda 4: Ręczne dodanie ikony Favicon do twojego bloga WordPress

Wreszcie, możesz dodać favicon WordPress do twojego bloga, ręcznie edytując pliki kodu twojego motywu.

Jest to przydatne, jeśli konfigurator motywu nie ma sekcji „Tożsamość witryny” lub jeśli używasz motywu blokowego i chcesz mieć inny obrazek favicon niż logo witryny.

Najłatwiejszym i najbezpieczniejszym sposobem edycji plików kodu twojego motywu jest użycie wtyczki WPCode.

WPCode to najlepsza wtyczka do fragmentów kodu dla początkujących. Dzięki ponad 100 gotowym fragmentom kodu i bezpiecznej obsłudze błędów, pozwala bezpiecznie wstawić własny kod bez uszkadzania twojej witryny internetowej.

Ponadto, wspaniałą rzeczą w WPCode jest to, że jeśli zaktualizujesz swój motyw, nie stracisz modyfikacji kodu, w tym favicon.

Na potrzeby tego przewodnika można skorzystać z darmowej wersji WPCode. Subskrypcja Pro zapewnia jednak dostęp do funkcji takich jak inteligentna logika warunkowa i integracje z aplikacjami innych firm, dzięki czemu twój kod może być zarządzany bardziej efektywnie.

Aby rozpocząć, należy zainstalować i włączyć WPCode. Aby uzyskać więcej informacji, możesz zapoznać się z naszym przewodnikiem krok po kroku, jak zainstalować wtyczkę WordPress.

Następną rzeczą, którą musisz zrobić, jest przygotowanie twoich plików favicon. W tym celu możesz skorzystać z darmowego generatora favicon, takiego jak Favicon.io.

Na witrynie internetowej można kliknąć „Obrazek”, aby przekonwertować plik z obrazkiem na plik zip i kod HTML. Alternatywnie można użyć opcji Emoji lub Tekst, aby utworzyć faviconę przy użyciu dostępnych emotikonów i czcionek.

Na następnej stronie możesz przesłać swój obrazek. Następnie kliknij „Pobierz”, aby zapisać plik zip favicon, który zawiera twoje pliki favicon.png i favicon.ico.

Pamiętaj, aby pozostawić tę stronę otwartą podczas wykonywania kolejnych kroków.

Teraz musisz przesłać plik zip favicon do katalogu głównego twojej witryny. W tym celu możesz użyć menedżera plików twojego hostingu WordPress.

Alternatywnie można to zrobić za pomocą klienta FTP, takiego jak FileZilla. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem dla początkujących na temat korzystania z FTP do przesyłania plików do WordPress.

Po otwarciu plików twojej witryny internetowej za pomocą menedżera plików lub FTP, przejdź do katalogu głównego.

Katalog główny WordPressa to zwykle katalog o nazwie „public” lub „public_html”, który zawiera najważniejsze katalogi WordPressa, takie jak wp-content i wp-admin.

W tym momencie można wyodrębnić i przesłać całą pobraną wcześniej treść pliku favicon do katalogu głównego.

Jeśli korzystasz z Menedżera plików, możesz kliknąć przycisk „Prześlij” u góry.

Następnie pojawi się nowa karta z prośbą o przesłanie plików.

Na tej stronie możesz kliknąć przycisk „Wybierz plik” i wybrać wszystkie pliki favicon.

Teraz wystarczy poczekać na pomyślne przesłanie plików.

Po zakończeniu możesz wrócić do karty menedżera plików. Powinieneś teraz zobaczyć wszystkie twoje pliki favicon w katalogu głównym, jak na poniższym zrzucie ekranu:

Wróćmy teraz do panelu administracyjnego WordPress.

W lewym panelu bocznym przejdź do Fragmenty kodu ” Nagłówek i stopka.

Następnie wróć do karty Favicon.io z wcześniejszego wpisu.

Następnie należy skopiować stamtąd kod HTML. W kodzie powinny znajdować się 4 tagi odnośników .

Następnie należy wrócić do WordPressa i wkleić kod w sekcji „Nagłówek” na stronie WPCode. Spowoduje to dodanie kodu do pliku header.php twojej witryny internetowej.

W kodzie wstaw pełny adres URL twojej witryny internetowej w cudzysłowie obok wszystkich atrybutów href, jak w poniższym przykładzie. Pamiętaj, aby dodać http:// lub https://, jeśli twoja witryna korzysta z certyfikatu SSL.

Na koniec kliknij przycisk „Zapisz zmiany” w prawym górnym rogu.

I to wszystko! Nie zapomnij przejść na swoją witrynę internetową, aby sprawdzić, czy zmiana favicon się powiodła.

Dlaczego moja ikona Ulubionych WordPress nie jest wyświetlana?

Jednym z powodów, dla których twój favicon WordPress może się nie wyświetlać, jest pamięć podręczna przeglądarki. Oznacza to, że twoja przeglądarka nadal wyświetla starą wersję twojej witryny.

Aby rozwiązać ten problem, należy wyczyścić pamięć podręczna. Jeśli potrzebujesz pomocy, możesz skorzystać z naszego przewodnika na temat czyszczenia pamięci podręcznej w twojej przeglądarce.

Możliwe jest również, że korzystasz z usługi CDN, która nadal przechowuje starą wersję twojej witryny. W takim przypadku należy wyczyścić pamięć podręczną CDN, aby zaktualizować treść twojej witryny internetowej.

Możesz otworzyć swoją witrynę internetową w trybie incognito lub w oknie przeglądania prywatnego, aby sprawdzić, czy ikonka twojej witryny WordPress została przesłana.

Jeśli instalacja favicon nie powiodła się, możesz spróbować ponownie załadować obrazek z inną nazwą pliku, aby rozwiązać problem.

Twoja funkcja ikonki witryny WordPress może również nie działać z powodu błędu mieszanej treści. Aby rozwiązać ten problem, zapoznaj się z naszym przewodnikiem na temat poprawki błędów mieszanej treści WordPress.

W niektórych przypadkach możesz również odkryć, że Twoja witryna internetowa wyświetla favicon dostawcy hostingu zamiast Twojej własnej. Jeśli tak się stanie, skontaktowanie się z zespołem pomocy technicznej może pomóc w rozwiązaniu problemu.

Zalecamy wybranie renomowanej usługi hostingowej WordPress z doskonałą pomocą techniczną dla klientów, aby skutecznie rozwiązywać takie problemy. Możesz sprawdzić naszą listę najlepszych dostawców hostingu WordPress, aby znaleźć najlepszą opcję dla twojej witryny internetowej.

Na koniec możesz sprawdzić, czy twój motyw WordPress ma specjalne narzędzie do przesyłania favicon. Może to wyjaśniać, dlaczego powyższe metody nie działają.

Mamy nadzieję, że ten artykuł pomógł ci dodać favicon do twojej witryny WordPress. Możesz również zapoznać się z naszym przewodnikiem po najlepszych darmowych kreatorach logo, które pomogą Ci wyglądać jak profesjonalista, lub z naszymi eksperckimi wyborami niezbędnych wtyczek WordPress do rozwoju Twojej witryny internetowej.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.