favicon | Kurs WordPress od podstaw Stwórz samodzielnie swojego bloga Sat, 18 Feb 2023 10:59:37 +0000 pl-PL hourly 1 150306349 Jak dodać ikonę witryny (favicon) do WordPress https://wordpress.aurainweb.pl/jak-dodac-favicon-do-wordpress/ Wed, 02 Feb 2011 10:37:04 +0000 http://wordpress.aurainweb.pl/?p=36 Ikona witryny z ang. Favicon (favorites icon) jest małą ikonką wyświetlaną w pasku adresu oraz na belce przeglądarki internetowej. Posiadanie tej ikonki jest o tyle istotne iż wyróżnia stronę z …

Artykuł Jak dodać ikonę witryny (favicon) do WordPress pochodzi z serwisu Kurs WordPress od podstaw.

]]> Ikona witryny z ang. Favicon (favorites icon) jest małą ikonką wyświetlaną w pasku adresu oraz na belce przeglądarki internetowej. Posiadanie tej ikonki jest o tyle istotne iż wyróżnia stronę z tłumu otwartych przez użytkownika zakładek stron internetowych. Dodawanie faviconu w systemie WordPress jest bardzo proste i zawiera się w kilku punktach.

Favicon

logo WordPress
logo WordPress

Ikonę witryny możemy dodawać na kilka sposobów – użyć personalizacji szablonu, poprzez wtyczkę lub wgrać z pomocą FTP.

favicon, ikona wpisu
favicon, ikona witryny

Z skąd wziąć Favicon?

Standardowo favicon powinien mieć wymiary:

  • 16 x 16 pikseli
  • 32 x 32 pikseli
  • 512 x 512 pikseli

Ikonę witryny można samemu łatwo utworzyć za pomocą dowolnego programu graficznego. Dawniej wymaganym formatem było .ico ale obecnie może to być plik .png lub .jpg. Jeśli jednak nie umiemy obsługiwać programu do grafiki możemy skorzystać z generatora.

Przykładowe generatory

Z ich pomocą można samodzielnie utworzyć proste ikonki:

Dodawanie z pomocą personalizacji szablonu (dostosowania)

Ikonę witryny można dodać do strony na kilka sposobów. Jednym z nich jest dodawanie go z pomocą opcji personalizacji.

personalizacja szablonu
personalizacja motywu

W tym celu wchodzimy w Wygląd -> Personalizacja następnie z meny po lewej stronie Tożsamość witryny (w innym szablonie opcja nazywała się to Site title/tagline/logo). Opcja ta nosić może również inną nazwę (ustaloną przez autora szablonu). Sam jej wygląd jednak jest standardowy.

dodawanie ikony witryny
dodawanie ikony witryny

Na czerwono zaznaczyłam sekcję, która nas interesuje. Teraz klikamy w przycisk Wybierz obrazek.  Jeśli tego jeszcze nie zrobiliśmy wgrywany nasz obrazek do CMS.

wyszukaj ikonkę
wyszukaj ikonkę

Proces wygrywania jest analogiczny jak w przypadku innych grafik. Po wybraniu obrazka WordPress może się nas zapytać o to czy chcemy go przyciąć.

Kiedy mamy już ikonkę i w podglądzie jej wygląd wydaje dobry publikujemy zmianę. Od tego momentu obrazek będzie się wyświetlał na pasku adresu.

Ręczna instalacja favicon w WordPress

Co potrzebne jest do wstawienia Favicon przez serwer FTP
  • program do obsługi ftp
  • dane do naszego hostingu
  • ikonka, którą chcemy umieścić w pasku adresu
  • program do edycji kodu HTML i PHP (np. notepad)

Na początek musimy zdecydować gdzie umieścimy nasz obrazek, możemy to np. zrobić w katalogu głównym szablonu (np. /wp-content/themes/nazwa-waszego-szablonu/).

Następnie edytujemy znajdujący się tam plik header.php.

UWAGA: Wato przed wprowadzaniem zmiany zrobić wersję zapasową pliku.

Wszystko co musimy zrobić to umieścić pomiędzy znacznikami:

<head>

</head>

Linijkę kodu:

<link rel="icon" href="<?php echo esc_url( get_template_directory_uri() ); ?>/favicon.ico" type="image/x-icon" />

Następnie zapisać plik i umieszczamy na serwerze.

Ewentualnie możemy edytować szablon z poziomu panelu administracyjnego w lokalizacji Wygląd ->Edytor

Gdzie również można edytować plik header.php

Efekt będzie widoczny od razu lub dopiero po pewnym czasie. Czyli kiedy nasza przeglądarka odświeży sobie wygląd blogu.

Zamieszczona niżej linijka kodu generuje bezpośredni adres do wykorzystywanego szablonu, można więc wykorzystać ją do wstawiania także innych elementów umieszczonych w szablonie.

<?php echo esc_url( get_template_directory_uri() ); ?>

Zamiana starego Favicon na nowy z FTP

Podmiana starego favicon na nowy wygląda podobnie tyle że wystarczy podmienić starą ikonkę na nową. W tym celu ikonka musi mieć taki sam format i nazwę co stara. Jeśli tak nie jest edytujemy plik header.php poprzez zmianę nazwy favicon.

Źródło: http://codex.wordpress.org/Creating_a_Favicon

Zaktualizowano 27/05/2015

Zaktualizowano 11/08/2018

Dodatkowe tagi:
Jak dodać takie coś, obrazek na górze strony?
obrazek obok tytułu strony, na belce przeglądarki

Artykuł Jak dodać ikonę witryny (favicon) do WordPress pochodzi z serwisu Kurs WordPress od podstaw.

]]> 36