Co to jest ikona Favicon i jak ją stworzyć?
Favicon, będąc skrótem od „Favorite Icon” (czyli „ulubiona ikona”), jest konkretnym obrazkiem związanym z danym serwisem internetowym. Można go zobaczyć na wielu stronach, znajduje się on zazwyczaj obok adresu strony w przeglądarce internetowej, na kartach lub w historii przeglądania. Favicon pomaga użytkownikom w łatwym identyfikowaniu Twojej strony internetowej, gdy ta […]
Favicon, będąc skrótem od „Favorite Icon” (czyli „ulubiona ikona”), jest konkretnym obrazkiem związanym z danym serwisem internetowym. Można go zobaczyć na wielu stronach, znajduje się on zazwyczaj obok adresu strony w przeglądarce internetowej, na kartach lub w historii przeglądania.
Favicon pomaga użytkownikom w łatwym identyfikowaniu Twojej strony internetowej, gdy ta jest otwarta z wieloma innymi. Działa to na zasadzie szybkiej wizualnej identyfikacji. Ma to swą wartość zwłaszcza, gdy strona jest dodana do zakładek, a ikona jest wyświetlana obok nazwy strony. Ta mała grafika może pomóc wyróżnić Twoją stronę spośród innych.
Favicon zazwyczaj jest plikiem o rozszerzeniu .ico i o wymiarach 16×16 pikseli, choć istnieją też inne formaty (np. PNG, GIF) i rozmiary (np. 32×32, 64×64), które mogą być używane w zależności od przeglądarki
Jak Stworzyć Favicon?
Stworzenie favicona może wydawać się skomplikowane, ale tak na prawdę nie jest. Poniżej przedstawiamy szereg prostych kroków, które pozwolą Ci stworzyć własny favicon.
Krok 1:
Najpierw zacznij od stworzenia własnej grafiki, która będzie używana jako favicon. Pamiętaj, że powinna być ona reprezentatywna dla Twojej strony internetowej. W przypadku większości firm, klarownym i jednoznacznym wyborem jest logo. Najlepiej będzie zaprojektować to w formacie 1024×1024 px
Krok 2:
Następnie musisz zmniejszyć rozmiar swojego obrazka do 16×16 pikseli – choć o tym więcej w kolejnym punkcie. Pamiętaj, że redukcja wielkości trudnego wzoru może sprawić, że będzie on nieczytelny lub niewyraźny. Czytelność to kluczowy aspekt prawidłowego favicona.
W tym punkcie zwróć uwagę jak wygląda ikona w formacie 16×16, ponieważ będzie to format docelowy.
Krok 3:
Kiedy masz już gotowy obrazek, musisz go skonwertować do formatu .ico. Istnieją różne darmowe narzędzia online, które umożliwiają taką konwersję. Ważne jest, aby zwrócić uwagę na ich zaufaną reputację, zanim zdecydujesz się na ich użycie. Jeżeli zdecydujesz się na użycie zewnętrznego narzędzia – wówczas przyda się większa rozdzielczość np. 1024×1024, ponieważ te narzędzia automatycznie przeskalują ikonę na docelową rozdzielczość.
Krok 4:
Teraz musisz dołączyć swój favicon do strony internetowej. Aby to zrobić, umieść plik favicon.ico w głównym katalogu swojej strony. Następnie dodaj poniższą linię do sekcji „head” (<head>) swojej strony HTML:
<link rel="icon" href="http://example.com/favicon.ico" type="image/x-icon">Zastąp „http://example.com/favicon.ico” ścieżką do twojego pliku favicon.
Krok 5:
I wreszcie, Twój favicon powinien już być widoczny na Twojej stronie. Pamiętaj jednak, że niektóre przeglądarki mogą wymagać odświeżenia (lub nawet wyczyszczenia pamięci podręcznej), zanim zauważysz jakiekolwiek zmiany.
A więc tak właśnie tworzy się favicon – z pozoru mała rzecz, ale z dużym potencjałem!
Darmowe narzędzia
- https://www.favicon.cc
- https://realfavicongenerator.net/
- https://favicon.io/
Z pewnością narzędzi jest więcej – ja korzystam głównie z tych trzech powyżej.