Jak wstawić favicons w WordPress?

Favicons? Czym są te elementy? Dlaczego muszę korzystać z nich? Jak dodać favicons w WordPress? Jak zrobić ikonę z obrazka dla favicon swojej witryny? Odpowiedzi na te pytania znajdziesz w tym artykułu.

Wierzę, że obecnie dość często zapominam czy nie wiemy, dlaczego naprawdę potrzebujemy favicons. To nie jest tak haniebne, ponieważ ta informacja nie należy do kategorii najważniejszych rzeczy, o których powinieneś wiedzieć. Jeśli jednak prowadzisz własną witrynę internetową, musisz o tym wiedzieć. Więc, zanim przejdziemy do opisania sposobów dodawania favicons, omówmy czym są te elementy.


Czym jest favicon?

Wyraz "favicon" oznacza "ulubioną ikonę". Jest to mała ikona witryny o rozmiarze 16x16px, którą można zobaczyć po lewej stronie paska adresu w przeglądarce. Taką ikonę Ty i każdy użytkownik witryny widzą na liście zakładek i menu rozwijanym wśród przewidywanych adresów URL.


Cel favicon

Mimo że ikony są najmniej istotną częścią witryny, nadal pokazuje dbałość o szczegóły, które sprawiają, że witryna jest ekscytująca. Małe kwadratowe „odznaki” są również znaczące, jeśli chcesz powiedzieć o swojej marce. Ale głównym celem dzisiejszych ulubionych jest poprawa jakości obsługi. Ikona brakującej witryny ma uniwersalny symbol przeglądarki i kończy się na setkach innych witryn.

Miniatury witryn informują o dodatkowych wysiłkach, które podejmujesz, aby witryna była atrakcyjna dla odbiorców. Z punktu widzenia marki obraz strony internetowej sprawi, że odwiedzający i potencjalni klienci wybiorą Twoją witrynę, ponieważ będą ci bardziej ufać i docenią twoje wysiłki. Zacznij ulepszać swój branding online już dziś; dzięki grafice internetowej 16x16 stało się łatwiejsze niż kiedykolwiek!


Jak stworzyć Favicon? Generatory

Tworzenie favicon nie jest trudne, szczególnie jeśli umiesz pracować w Photoshop lub innym graficznym edytorze. Zwykle rozmiar favicon wynosi 32x32 lub 16x16 pikseli. Jest jednak mała wskazówka, która pomoże Ci stworzyć  favicon: wystarczy utworzyć dokument o rozmiarze 128x128 pikseli w programie Photoshop, a następnie po prostu zmienić jego rozmiar na 16x16 pikseli.

  1. Przytnij lub dodaj miejsce wokół obrazu, aby było kwadratowe;
  2. Edytuj ikonę do 16 x 16 pikseli;
  3. Zapisz ją jako favicon.ico;
  4. Gdy obraz będzie gotowy, prześlij go na http://www.yourdomain.com/favicon.ico;
  5. Wyczyść pamięć podręczną i ponownie załaduj stronę, jeśli ikona nie jest wyświetlana.

Jeśli nie jesteś zawodowym web projektantem możesz skorzystać z tych stron internetowych. Możesz wybrać gotowy favicon z istniejącej kolekcji lub stworzyć własny!


Jak zainstalować Favicon w WordPress?

Instalacja ikony na stronie WordPress zajmie Ci chwilę. Prześlij plik .ico do głównego folderu motywu za pomocą klienta FTP, a następnie prześlij kopię pliku favicon.ico do głównego katalogu witryny, aby był wyświetlany w „czytnikach kanałów” użytkowników. Teraz wszystko jest gotowe! Krótko mówiąc, ikony witryn są niezbędne do rozpoznania witryny i marki. Nie ma usprawiedliwienia, aby nie tworzyć kwadratowej grafiki.

Mówią, że diabeł tkwi w szczegółach, a te szczegóły to tak zwane miniatury stron internetowych, na które ludzie zwykle nie zwracają dużej uwagi. Poświęć trochę czasu, aby dodać miniaturę do swojej witryny już dziś i zdobyć więcej klientów jutro, ponieważ obraz strony internetowej jest dowodem profesjonalizmu i dbałości o szczegóły, co jest bardzo cenione.


Czym jest favicon i dlaczego go potrzebujesz?

Jest on wyświetlany na kartach przeglądarki, kanałach RSS, katalogach witryn, niektórych wyszukiwarkach, takich jak Yandex itp., Wskazując w ten sposób Twoją witrynę i czyniąc ją bardziej widoczną. Tradycyjnie jest to plik .ICO 16x16px, ale współczesne wersje WordPress obsługują wszystkie typy plików graficznych o dowolnym rozmiarze, co, szczerze mówiąc, powinno było zostać wykonane dawno temu.

* * *

W WordPress w wersji 4.2 i starszej musisz utworzyć favicon.ico i umieść go w folderze głównym swojej witryny za pomocą Total Commander, cPanel lub innego narzędzia, którego używasz do przesyłania plików na konto hostingowe. Najprostszym sposobem na jego utworzenie jest skorzystanie z jednej z bezpłatnych usług online - na przykład tego generatora. Wybierz obraz na komputerze, kliknij przycisk „Generuj favicon” i pobierz wynik w formacie .ICO.

Teraz prześlij wszystko na serwer.

Na koniec przejdź do Wygląd> Edytor na kokpicie, wybierz header.php i upewnij się, że jego obszar <head> zawiera następujące linie:

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">

Jeśli nie, dodaj je samodzielnie. Nie zapomnij zapisać zmian.

Po zakończeniu nowa ikona pojawi się na karcie przeglądarki - dzięki temu będziesz wiedzał, że wszystko działa tak, jak powinno.

* * *

W WordPress w wersji 4.3 lub nowszej favicon służy również jako ikona aplikacji, a ta ostatnia powinna być kompatybilna z wyświetlaczami siatkówki. Dlatego obraz favicon powinien mieć co najmniej 512 pikseli na każdy rozmiar. Możesz go zainstalować za pomocą menu Dostosuj w adminie WordPress. Ta opcja zazwyczaj znajduje się na karcie „Tożsamość witryny”, ale w niektórych motywach jej lokalizacja może się różnić.

Kliknij ‘Zmień obrazek’, prześlij przyszłą ikonę i zapisz zmiany.

I to wszystko, Teraz wiesz jak dodać favicon na WordPress.


Czy naprawdę są potrzebne?

Odpowiedź brzmi - tak. Favicon jest dobry na wielu poziomach. Ta ikona ułatwia identyfikację witryny w internecie pomaga jej wyróżniać się spośród innych. Tak naprawdę, to każda strona ma favicon, ale możesz stworzyć dla swojej niepowtarzalny.

Spójrz jak wyglądają favicons, gdy masz więcej niż kilka otwartych kart w Chrome lub jakiejkolwiek innej przeglądarce.

wordpress favicon
wordpress favicon

Jeśli często korzystasz z internetu, wiesz, jak często zdarzają się sytuacje, gdy są otwarte 10 kart i musisz zidentyfikować każdą witrynę bez ikony wyświetlanej na karcie.


Wtyczki dla Favicon WordPress

Także, jeśli pracujesz z WordPress, możesz skorzystać ze wtyczek, pozwalających na dodawanie favicon dl strony.

  • RealFaviconGenerator - Ta wtyczka pomoże bezproblemowo przesłać wybrany favicon na stronę. W dodatku, można nie tylko stworzyć, a również także wygenerować ikonę z gotowego obrazka w mediatece.
  • All In One Favicon - Ta wtyczka służy nie tylko do przesyłania favicon do witryny WordPress, ale również do obsługi tych ikon na urządzeniach Apple Touch.

* * *

P.S. Nie zapomnij aby sprawdzić zestaw naszych motywów WordPress


Ten artykuł został przetłumaczony z angielskiego. Oryginał można znaleźć tutaj: How To Add A Favicon To Your WordPress Website.


Czytaj również:

Tutorial: jak zmienić domyślny kolor i typografię w motywie WordPress

Jak wyłączyć pingbacki w WordPressie

Jak założyć stronę internetową za darmo na WordPressie?



Katarzyna Pawłowska

W branży IT od 8 lat. Fan nowych technologii webowych, web designu oraz rozwiązań użytecznych i funkcjonalnych. W praktyce: marketer, DJ, blogerka. W wolnym czasie wspiera inicjatywy propagujące wiedzę z dziedziny SMM i rozwija swoją miłość do crossfitu.