Data: 31.03.2022
Co to Favicon? Czy warto dodać ikonę strony internetowej?
Ikona Favicon. Może niektórzy już spotkali się z tym określeniem, a nawet jeśli nie, to nie ma jednak możliwości, że nie natknęli się na to co ono oznacza. Widzimy go w oknie wyszukiwarki, w zakładkach 'ulubione' i nie tylko. Czym więc jest favicon? Co nam daje? Jak go stworzyć, a następnie wstawić na Twoją stronę internetową? Sprawdźmy to!
1. Czym jest Favicon – definicja
Jak już sama nazwa może nam sugerować Favicon to ikona (favorites icon). Jest to mały obrazek, który stanowi tożsamość witryny. Reprezentuje on stronę internetową lub daną markę. Należy dostosować go w pełni do firmy.
Gdzie wykorzystujemy Favicony
Favicony najczęściej spotykamy się na kartach w otwartym oknie większości przeglądarek - zaraz obok nazwy strony, tytułu artykułu etc. Jeśli korzystamy z zakładek (oznaczania stron gwiazdką), to tam też umieszczony jest Favicon. Poza tym pojawia się on przy wpisywanym przez nas adresie strony w wyszukiwarce, a jeśli działamy na Google z pozycji telefonu, to również przy samych wynikach wyszukiwań.
Czy jeszcze gdzieś wykorzystywane są Favicony? Oczywiście. Będzie to m.in pasek narzędzi i historia przeglądarki.
2. Jak zrobić Favicon swojej witryny? Dodaj ikonę witryny!
Favicon możemy stworzyć w każdym programie graficznym - tak samo jak innego rodzaju ilustracje. Ważne jest jednak zachowanie odpowiednich wymiarów i proporcji. Może nam się do tego przydać siatka projektowa. Szczególnie jeśli posiadamy u siebie np. na stronie inne ikony. Nie zapominajmy też o logo. Ono też powstaje na gridzie - niezależnie od tego czy jest to sam sygnet, logotyp czy też forma łączona. Aby zachować spójność, najlepiej będzie wykonywać wszystkie na jednym wzorze. Pozwoli nam to zachować między nimi spójność.
Generator Faviconów
Oprócz programów graficznych takich jak Photoshop i Illustrator do stworzenia Faviconu możemy wykorzystać specjalnie przeznaczone do tego generatory. Na rynku znajdziemy ich wiele. Wliczają się do nich m.in. favicon.io, generator favicon od Website Planet, favicon.cc etc.
Logo a Favicon
Wbrew pozorom logo to nie Favicon. Nie zmienia to jednak faktu, że bardzo często marki wykorzystują swoje sygnety do jego stworzenia. Nie jest to tylko najprostszy sposób, ale też najpewniejszy. W końcu nasz znak firmowy jest podstawą identyfikacji Twojej witryny. Oczywiście jeśli nasze logo jest zbyt rozbudowane - np. składa się z wielu elementów, możemy wykorzystać jeden akcent - najbardziej charakterystyczny, z którym można nas łatwo skojarzyć.
2 najważniejsze cechy Faviconu
Pomimo tego, że Favicon budowany jest na kwadracie, to może on przybrać różne formy. Najlepiej, aby w takim przypadku przestrzeń uzupełniająca była zapisana jako bezbarwna. Są jednak dwie cechy, o które należy szczególnie zadbać podczas tworzenia Faviconu i jest to:
-
prostota (projekt nie może być przekombinowany)
-
rozpoznawalność (Favicon powinien kojarzyć się z tym co sobą reprezentuje)
Jakie wymiary powinien mieć Favicon
To jakie wymiary będzie miał Favicon zależy m.in. od miejsca, w którym jest wyświetlany oraz przeglądarki.
Pierwsze, o czym warto wspomnień to to, że wymiary Faviconu podajemy na wzór kwadrat (1:1). Oczywiście nie każda ikona, którą widzimy m.in. w karcie przeglądarki, będzie miała jego kształt, ale każda została wpisana w jego ramy. Podstawowy wymiar Faviconu, który widzimy na kartach przeglądarki to 16 x 16 pikseli. Należy jednak pamiętać, że będzie to wtedy naprawdę bardzo niewielka grafika. Tworząc projekt najlepiej postawić na większe rozmiary np. 512 x 512 pikseli.
Przykładowe wymiary:
16x16: Favicon przeglądarki
32x32: Ikona skrótu paska zadań.
96x96: Rozmiar ikon skrótów na pulpicie.
180x180: Rozmiar ikon w urządzeniach dotykowych Apple (mobile)
Dokładne dane mogą się zmieniać, więc warto trzymać rękę na pulsie. Zwłaszcza że każda przeglądarka i innego typu narzędzia (np. kreator) mogą mieć delikatnie różniące się od siebie wymagania.
Format Faviconu
Kształt i wymiary już sobie zarysowaliśmy. Teraz przyszła pora na format. Czy istnieje jakiś dedykowany specjalnie dla Faviconu, czy może będzie on taki sam, jak w przypadku innych grafik? Do dwóch najpopularniejszych w tym przypadku formatów zaliczamy ICO oraz PNG.
Favicon możemy jednak zapisać również jako JPG lub GIF. Niektórzy praktykują też stworzenie pliku SVG, a następnie zapisanie go w innym formacie - jednym z wymienionych powyżej.
Ponad 600 000 ludzi tworzy strony za darmo, bez kodowania i przy wsparciu AI. Zobacz, jakie to proste
3. Dlaczego Favicon ma znaczenie? Ikona strony internetowej Cię wyróżni!
Można pomyśleć, że Favicon to na tyle drobna grafika, że nie jest ona istotna i nie warto poświęcać na nią czasu. Otóż nie. Z roku na rok w sieci pojawia się coraz więcej stron internetowych. Każda firma lub nawet marka osobista chcą się wyróżnić od konkurencji. Favicon więc jest jednym z elementów, który pozwala budować świadomość brandu i czymś, po czym można nas rozpoznać. Przykładem może być tutaj zwykłe przeglądanie internetu. Chyba każdemu z nas przynajmniej raz zdarzyło się otworzyć zbyt wiele kart w jednym czasie. Gdyby nie Favicony można by się było w tym trochę pogubić. Poza tym załóżmy, że mamy stronę internetową, ale nie ustawiliśmy do niej ikony. Użytkownika, który ją odwiedza, może to zdziwić i zniechęcić - wydamy się mniej profesjonalni.
4. Jak dodać favicon do strony internetowej w kreatorze WebWave?
Favicon możemy wprowadzić na naszą stronę przy pomocy kodu HTML. Jeśli plik zapisaliśmy w formacie PNG może to wyglądać np. tak: <link rel="icon" type="image/png" href="/my_favicon.png" sizes="16x16">.
Oczywiście nie musimy tego stosować, ponieważ wstawienie Faviconu strony internetowej bezpośrednio z pozycji kreatora jest bardzo proste. Po prawej stronie znajduje się 'Panel ustawień' - przechodzimy do karty 'Strona', a następnie 'Ustawienia ogólne' i już. Zaraz pod polem, w które wprowadzamy nazwę naszej witryny znajduje się sekcja z Faviconem. Ładujemy nasz gotowy projekt i po zapisaniu, a następnie publikacji będzie on wyświetlał się jako ikona strony.
Tak jak wspomnieliśmy sobie o tym wcześniej, podstawową formą Faviconu jest kwadrat, więc jeśli wybierzemy znak o innym kształcie (np. prostokąta), zostanie on zdeformowany.
Zamieszczając plik w kreatorze, nie musimy przejmować się wymiarami, ponieważ w WebWave są one generowane automatycznie.
Co to Favicon? - podsumowanie
Favicon to niewielka ikona, ale pełni ona naprawdę istotną rolę i dla każdego, kto planuje mieć własną stronę internetową jest to istny must have. Pozwala nam bowiem wyróżnić się spośród konkurencji i przyczynia się do budowania naszej rozpoznawalności w sieci - Korzystając na co dzień z internetu (czy to w pracy czy prywatnie) potrafimy w jednym czasie mieć otwarte co najmniej kilka kart (jak nie kilkadziesiąt). Favicony pozwalają nam je od siebie odróżnić. Wiesz już jak dodać favicon w naszym kreatorze, więc jeśli jeszcze Twoja strona go nie ma, to teraz jest najlepszy moment, aby to zmienić.
Autor: Kaja Rowicka
Popularne artykuły.
Kreator stron www WebWave umożliwia tworzenie stron www z pełną swobodą. Strony internetowe możesz tworzyć zaczynając od czystej karty lub wykorzystując szablony www. Strona www bez kodowania? To łatwe - zacznij już teraz.
contact@webwavecms.com
+48 731 395 898
Porozmawiaj z nami na czacie
Od godziny 08:00 do 24:00
Ta strona została stworzona w kreatorze WebWave.
Znajdziesz nas na:
Kreator WebWave.
Oferta.