Co to jest Favicon

Favicon to mały obrazek graficzny, który reprezentuje Twoją stronę internetową. Zwykle pojawia się on w kartach przeglądarki, na liście zakładek oraz w wynikach wyszukiwania jako element identyfikacyjny strony. Jest to ikona o rozmiarze 16×16 pikseli lub 32×32 pikseli, która służy jako wizualny identyfikator marki. Dzięki favicon użytkownicy mogą łatwiej rozpoznać Twoją witrynę wśród innych otwartych zakładek lub w folderze ulubionych.

Tworzenie favicon jest stosunkowo proste i można je wykonać na kilka sposobów – od projektowania w programach graficznych po korzystanie z gotowych narzędzi online. Poniżej przedstawiamy kilka sposobów dodawania ikonki do Twojej strony internetowej. Zobacz, który będzie dla Ciebie odpowiedni. Jeżeli masz problem z dodaniem – napisz do nas. Bardzo chętnie pokierujemy i powiemy w jaki sposób rozwiązać napotkany problem.

Przygotuj plik graficzny

Do stworzenia favicon możesz użyć takich programów jak Adobe Photoshop, GIMP czy Canva. Ważne, aby:

Obrazek miał wymiary 16×16 px, 32×32 px lub 48×48 px.
Plik był zapisany w formacie .ico, choć inne formaty, takie jak .png, również są akceptowane przez przeglądarki.

Jeśli nie masz doświadczenia z programami graficznymi, możesz użyć darmowych generatorów favicon, np.:

Favicon.io
RealFaviconGenerator.net

Wystarczy przesłać obraz, a narzędzie automatycznie wygeneruje favicon w odpowiednich rozmiarach i formatach.

Jak dodać Favicon na stronach WordPress

Dodanie favicon do WordPressa jest bardzo łatwe, ponieważ platforma posiada wbudowane narzędzie do zarządzania ikonami witryny.

Oto kroki, które należy wykonać:
Upewnij się, że masz przygotowany plik w odpowiednim formacie (.png, .ico, .svg) i rozmiarze (512×512 px zalecane dla WordPress).

Zaloguj się na swoje konto i przejdź do sekcji Wygląd → Dostosuj.
W menu dostosowywania znajdź zakładkę Tożsamość witryny.

Kliknij opcję Ikona witryny.
Prześlij przygotowany plik favicon i zatwierdź zmiany.

Jak dodać Favicon w kodzie źródłowym strony

Plik favicon należy zintegrować z kodem HTML za pomocą znacznika <link>.
Poniżej znajduje się kod, który trzeba dodać w sekcji <head> pliku HTML.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Moja strona</title>

    <!-- Favicon w formacie ICO -->
    <link rel="icon" href="/images/favicon.ico" type="image/x-icon">
    
    <!-- Alternatywnie favicon w formacie PNG -->
    <link rel="icon" href="/images/favicon.png" type="image/png">

    <!-- Favicon dla urządzeń Apple -->
    <link rel="apple-touch-icon" href="/images/apple-touch-icon.png">
</head>
<body>
    <h1>Witaj na mojej stronie!</h1>
</body>
</html>

Podsumowanie

Dodanie favicon do swojej strony to kluczowy element budowy wizerunku online. Pomaga on w wyróżnieniu Twojej witryny na tle innych i poprawia jej rozpoznawalność. Korzystając z opisanych powyżej metod, możesz szybko utworzyć i dodać favicon do swojej strony, nawet jeśli nie masz dużego doświadczenia technicznego. Nie zapomnij, że detale takie jak favicon mają znaczenie w profesjonalnym odbiorze Twojej marki!