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.

Pomoc. 

Oferta. 

Materiały. 

Firma.

Popularne artykuły. 

Jak zrobić sklep internetowy?

Jak zrobić landing page?

Jak zrobić stronę internetową?

Dołącz do ponad 460 tysięcy ludzi, którzy tworzą strony za darmo i bez kodowania. 

Zacznij teraz 

Zacznij teraz 

Czym jest favicon i czy jest nam potrzebny

31 marca 2022

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 stronę? Sprawdźmy to!

 

1.Co to jest favicon?

 

Jak już sama nazwa może nam sugerować favicon to ikona (favorites icon). Reprezentuje ona stronę internetową lub daną markę.  

 

Gdzie wykorzystujemy favicony 

Favicony najczęściej spotykamy się na kartach w otwartym oknie przeglądarki - 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 stworzyć favicon

 

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ą jej identyfikacji. 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 16x16 px. Należy jednak pamiętać, że będzie to wtedy naprawdę bardzo niewielka grafika. Tworząc projekt najlepiej postawić na większe rozmiary np. 512x512 px. 

 

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. 

 

Zacznij teraz 

3. Dlaczego favicon ma znaczenie? 

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 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ż dodanie 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.

 

 

Podsumowanie 

 

Favicon to mała, niepozorna ikona, ale pełni ona naprawdę istotną rolę i dla każdego posiadacza strony www 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 jescze Twoja strona go nie ma, to teraz jest najlepszy moment, aby to zmienić. 

Zacznij teraz 

Autor: Kaja Rowicka 

Data: 31.03.2022

Panel Webmastera

Zarejestruj się

Zaloguj się