Praktycznie na dowolnej nowoczesnej stronie internetowej pojawia się specjalna ikona wyświetlana na karcie przeglądarki po pełnym załadowaniu zasobu. To zdjęcie jest tworzone i instalowane przez każdego właściciela niezależnie, choć nie jest to obowiązkowe. W ramach tego artykułu omówimy opcje instalacji Favicon na stronach utworzonych różnymi metodami.

Dodawanie Favicon do strony

Aby dodać ten typ ikony do witryny, musisz najpierw utworzyć odpowiedni obraz o kształcie kwadratu. Można to zrobić tak, jak przy użyciu specjalnych programów graficznych, na przykład Photoshop i po skorzystaniu z niektórych usług online. Ponadto pożądane jest wcześniejsza konwersja przygotowanej ikony do formatu ICO i zmniejszenie jej do rozmiaru 512 × 512 px .

Uwaga: bez dodawania niestandardowego obrazu na karcie wyświetlana jest ikona dokumentu.

Zobacz także:
Usługi online do tworzenia ulubionych
Jak stworzyć obraz w formacie ICO

Opcja 1: Dodaj ręcznie

Ta opcja dodania ikony do witryny będzie Ci odpowiadać, jeśli nie korzystasz z platformy udostępniającej specjalne narzędzia.

Metoda 1: Pobierz Favicon

Najprostszą metodą, obsługiwaną przez dosłownie każdą nowoczesną przeglądarkę internetową, jest dodanie wcześniej utworzonego obrazu do katalogu głównego witryny. Można to zrobić za pomocą interfejsu internetowego lub dowolnego wygodnego menedżera FTP.

Przykładowe ikony witryny w formacie ico

Czasami żądany katalog może mieć nazwę "public_html" lub dowolną inną, w zależności od preferencji dotyczących ustawień.

Przykład prawidłowego umieszczenia ikony witryny

Skuteczność metody zależy bezpośrednio nie tylko od formatu i rozmiaru, ale również od poprawnej nazwy pliku.

Metoda 2: Edycja kodu

Czasami może to nie wystarczyć, aby dodać Favicon do katalogu głównego witryny, tak aby był wyświetlany na karcie przez przeglądarki po pełnym pobraniu. W tej sytuacji będziesz musiał edytować główny plik ze znacznikami strony, dodając specjalny kod do jego początku.

  1. Dodaj następującą linię między znacznikami "HEAD" , gdzie "* / favicon.ico" należy zastąpić adresem URL obrazu.

  2. Przykład dodawania ikon ICO do kodu strony

  3. Najlepiej jest użyć bezwzględnego łącza z prefiksem zamiast względnego.
  4. Kod z bezwzględnym odnośnikiem do ikony witryny

  5. W niektórych przypadkach wartość "rel" można zmienić na "ikonę skrótu" , zwiększając tym samym zgodność z przeglądarkami internetowymi.
  6. Zmień wartość rel w linku do ikony witryny

  7. Wartość "typu" może również zostać zmieniona w zależności od formatu używanego obrazu:

    Uwaga: Najbardziej uniwersalnym jest format ICO.

    • ICO - "image / x-icon" lub "image / vnd.microsoft.icon" ;
    • Przykład dodawania ikon ICO do witryny

    • PNG - "image / png" ;
    • Przykładowy kod do dodawania ikon PNG do witryny

    • GIF - "image / gif" .
    • Przykładowy kod do dodawania ikon GIF do witryny

  8. Jeśli Twój zasób jest skierowany przede wszystkim do najnowszych przeglądarek, ciąg znaków może zostać skrócony.

  9. Przykład uproszczonego kodu do dodawania ikony

  10. Aby osiągnąć największą kompatybilność, możesz dodać kilka linii naraz z linkiem do strony favicon.
  11. Używanie wielu linii kodu dla ikony

  12. Zainstalowany obraz będzie wyświetlany na wszystkich stronach witryny, ale można go dowolnie zmieniać, dodając wcześniej wspomniany kod w oddzielnych sekcjach.
  13. Przykład ikony na karcie w przeglądarce

W obu tych metodach pojawienie się na karcie przeglądarki zajmie trochę czasu.

Opcja 2: Narzędzia WordPress

Podczas pracy z WordPress możesz odwołać się do poprzednio opisanej opcji, dodając powyższy kod do pliku "header.php" lub używając specjalnych narzędzi. Dzięki temu ikona będzie widoczna na karcie strony, niezależnie od przeglądarki.

Metoda 1: Panel sterowania

  1. Z menu głównego rozwiń listę "Wygląd" i wybierz sekcję "Dostosuj" .
  2. Przejdź do sekcji Dostosuj w panelu WordPress

  3. Na stronie, która się otworzy, musisz użyć przycisku "Właściwości witryny" .
  4. Przejdź do Właściwości witryny w Panelu WordPress

  5. Przewiń sekcję "Ustawienia" na dole i w sekcji "Ikona witryny" kliknij przycisk "Wybierz obraz" . W takim przypadku obraz powinien mieć rozdzielczość 512 × 512 pikseli .
  6. Idź do pobierania ikon w panelu WordPress

  7. Przez okno "Wybierz obraz" wgraj żądany obraz do galerii lub wybierz poprzednio dodany.
  8. Pobierz ikony procesów dla witryny WordPress

  9. Po tym nastąpi powrót do "Właściwości witryny" , a wybrany obraz pojawi się w bloku "Ikona" . Tutaj możesz zobaczyć przykład, przejdź do edycji lub usuń go, jeśli to konieczne.
  10. Pomyślnie zainstalowano logo WordPress

  11. Po ustawieniu żądanej akcji za pomocą odpowiedniego menu, kliknij przycisk "Zapisz" lub "Opublikuj" .
  12. Zapisywanie właściwości witryny na WordPress

  13. Aby zobaczyć logo na karcie dowolnej strony witryny, w tym "Panel sterowania" , załaduj ponownie.
  14. Pomyślnie zainstalowano logo witryny WordPress

Metoda 2: All In One Favicon

  1. Na stronie "Panel sterowania" wybierz "Wtyczki" i przejdź do strony "Dodaj nowy" .
  2. Przejdź do sekcji Wtyczki w Panelu WordPress

  3. Wypełnij pole wyszukiwania zgodnie z nazwą potrzebnej wtyczki - wszystko w jednym faviconie - iw bloku z odpowiednim rozszerzeniem kliknij przycisk "Zainstaluj" .

    Wyszukaj wtyczkę, aby zainstalować ikony w WordPress

    Proces dodawania zajmie trochę czasu.

  4. Instalowanie wtyczki na WordPress

  5. Teraz musisz kliknąć przycisk "Aktywuj" .
  6. Aktywacja wtyczki WordPress

  7. Po automatycznym przekierowaniu musisz przejść do sekcji ustawień. Można to zrobić poprzez "Ustawienia" , wybierając "Wszystko w jednym Faviconie" z listy lub używając linku "Ustawienia" na stronie "Wtyczki" w bloku z wymaganym rozszerzeniem.
  8. Przejdź do ustawień wtyczek w WordPress

  9. W sekcji z parametrami wtyczki dodaj ikonę do jednej z prezentowanych linii. Należy to powtórzyć zarówno w bloku "Ustawienia Frontendu" , jak i "Ustawienia Backend" .
  10. Prześlij ikonę ustawień Frontendu do WordPress

  11. Kliknij przycisk "Zapisz zmiany" , gdy obraz zostanie dodany.
  12. Przesyłanie ikony ustawień Backend do WordPress

  13. Po zakończeniu aktualizacji strony do obrazu zostanie przypisany unikalny link, który zostanie wyświetlony na karcie przeglądarki.
  14. Pomyślnie zainstalowana ikona dla witryny WordPress

Ta opcja jest najłatwiejsza do wdrożenia. Mamy nadzieję, że udało Ci się zainstalować Favicon na stronie za pośrednictwem panelu sterowania WordPress.

Wniosek

Wybór sposobu dodawania ikony zależy wyłącznie od twoich preferencji, ponieważ we wszystkich opcjach możesz osiągnąć pożądany rezultat. Jeśli pojawią się trudności, sprawdź ponownie wykonane działania i możesz zadać odpowiednie pytanie w komentarzach.