WIOSENNA wyprzedaż z RABATAMI do 87 %

+ DARMOWA domena w planach rocznych

Oferta wygasa za:

00 :

13 :

41 :

21

Mały szczegół, który sprawi, że Twoja marka zostanie zauważona i zapamiętana przez klientów – ikona strony internetowej, czyli favicon. Budując swoją markę, nie powinieneś zapominać o tej skromnej ikonce.

Szukasz informacji, jak zrobić favicon? Dobra wiadomość – stworzenie tej ikonki nie wymaga dużego wysiłku.

Chociaż możesz uruchomić witrynę bez niej, tak naprawdę nie ma powodu, aby nie ująć tego zadania na liście rzeczy do zrobienia w zakresie brandingu.

Czym więc jest favicon?

Favicony to małe ikony wyświetlane w zakładkach oraz na stronach z ulubionymi stronami w przeglądarkach takich jak Chrome, Mozilla i Safari.

Nazwa “favicon” to skrót od słowa “favorite icon”, czyli ulubiona ikona, ale występuje również pod innymi nazwami:

  • Ikona skrótu
  • Ikona strony internetowej
  • Ikona zakładki

Jednak wszystkie one znaczą to samo.

Początki favicon sięgają roku 1999, kiedy to internauci poznali je wraz z premierą przeglądarki Internet Explorer 5.

Firmy zazwyczaj używają pomniejszonej wersji swojego logo jako favicony, zmniejszonej nawet do 16×16 pikseli.

Stanowią one pomocne dla użytkowników wizualne oznaczenia, dzięki którym mogą oni z łatwością przeglądać wiele stron internetowych.

Powiedzmy, że robisz zakupy w internecie. Wyobraź sobie, że kilkanaście kart otwartych w Twojej przeglądarce przedstawia tę samą ikonę przedstawiającą sklep.

To, co zazwyczaj widzisz, to szereg malutkich logo, dzięki czemu porównując artykuły i ceny, łatwo przełączasz się między sklepami.

Zapewne, obok każdej favicony widnieją tytuły meta, które mógłbyś przeczytać, ale kto ma na to czas?

Jak zrobić favicon?

Mężczyzna rysujący, ujęcie z bliska

Teraz gdy już wiesz, czym jest favicona, prawdopodobnie zdecydujesz się na umieszczenie jej na swojej stronie internetowej.

Jest to jeden z najprostszych sposobów, aby Twoja firma zapadła w pamięć internautom, a ponadto zapewni Ci profesjonalny wizerunek.

Jak więc zrobić favicon? To nie takie trudne.

Masz nawet pewne opcje do wyboru. Możesz zrobić ją samodzielnie lub skorzystać z generatora favicon, który wykona pracę za Ciebie.

Ponieważ jest to przydatna umiejętność, przejdźmy najpierw przez poszczególne kroki, które należy wykonać, aby samodzielnie stworzyć favicon dla swojej witryny.

1. Stwórz obraz

Szukając odpowiedniej ikony dla strony internetowej, najbardziej oczywistym wyborem jest wykorzystanie logo firmy.

Możesz jednak wybrać dowolny obraz, który będzie reprezentował Twoją stronę. Upewnij się tylko, że:

  • Jest spójny z Twoją marką. Zastosuj te same kolory, typografię i kształty.
  • Wyróżnia się. Twoi klienci powinni być w stanie łatwo zapamiętać obraz.
  • Nie powiela innej ikony ani obrazu. Nie pozwól, aby mylono Cię z inną marką.

Możesz zaprojektować obraz favicony za pomocą edytora, takiego jak Photoshop lub oprogramowania open-source, takiego jak Canva. Jeśli dysponujesz odpowiednim budżetem, możesz też zatrudnić profesjonalnego projektanta.

Jeżeli chcesz, aby Twoja ikona prezentowała się zgrabnie, profesjonalnie i zapadała w pamięć, musisz wystrzegać się kilku zbędnych elementów.

Pamiętaj, aby nie łamać tych niepisanych zasad związanych z tworzeniem favicon:

  • Żadnych zdjęć. Ponieważ favicon musi mieć odpowiedni rozmiar, aby zmieścić się w zakładce przeglądarki, żadne zdjęcie nie będzie wystarczająco wyraźne, aby dobrze się prezentować, ani tym bardziej zapadać w pamięć.
  • Żadnych słów. Z pewnością możesz umieścić jedną, dwie, a nawet trzy litery w swoim faviconie, zwłaszcza jeśli jest to część Twojego logo, ale całe słowa? Zapomnij o tym. 
  • Żadnych marketingowych treści. Chociaż jest to świetne rozwiązanie z punktu widzenia budowania marki i zachowania spójnego wizerunku, favicon nie jest miejscem do umieszczania elementów promocyjnych, takich jak banery reklamowe z napisami “nowe” lub “wyprzedaż”.

Zastosuj właściwy rozmiar

Zakładki przeglądarek wyświetlają favicony w rozmiarze 16×16 pikseli, natomiast na stronie mogą być one wyświetlane w rozmiarze 32×32 lub nawet 64×64 pikseli.

Zadbaj o to, by Twoja faviconka wyglądała jak najlepiej niezależnie od tego, na jakiej stronie zostanie umieszczona, i stwórz ją w większym formacie. Zawsze można ją potem zmniejszyć do rozmiaru 16×16 pikseli.

Zastosuj właściwy format

Dawniej favicony należało zapisywać w formacie .ico, teraz akceptowane są również pliki .png. Aby przekonwertować pliki do formatu .ico, możesz użyć narzędzi takich jak na przykład faviconer.com.

Jeśli chcesz, aby Twoja favicona wyświetlała się jako ikona przypiętej karty Safari, musisz zapisać ją w postaci pliku .svg.

Zastosuj właściwy styl

Warto pamiętać, że favicony nie pokazują się tylko na kartach przeglądarki i listach zakładek. Zobaczymy je również na urządzeniach mobilnych i w menu skrótów.

Biorąc to pod uwagę, przygotuj dwie wersje swojej favicony: Jedną o jednolitym wypełnieniu i jedną przezroczystą. W ten sposób zyskasz gwarancję, że będzie ona wyglądała dobrze niezależnie od tego, gdzie zostanie wyświetlona.

2. Wgraj obraz na swoją stronę internetową

Mężczyzna pracujący z laptopem i pieskiem

Kolejne kroki są stosunkowo proste.

Po prostu zmień nazwę pliku graficznego .png lub .ico na “favicon” i prześlij plik do katalogu głównego swojej strony internetowej.

Jeśli utworzyłeś plik .png, najprawdopodobniej będziesz musiał przesłać kilka plików, aby uwzględnić wszystkie żądane rozmiary.

To właśnie dlatego warto przekonwertować favicon do formatu .ico. Plik .ico może zawierać więcej niż jedną ikonę, co oznacza, że poszczególne rozmiary mogą zostać załadowane na Twoją stronę jednocześnie.

3. Dodaj podstawowy kod HTML

Możliwe, że nie będziesz musiał dodawać żadnego kodu, aby ułatwić nowoczesnym przeglądarkom znalezienie Twojej favicony. Większość z nich automatycznie wykryje favicon.png lub favicon.ico i użyje ich jako Twoich ikon.

Warto jednak dodać podstawowy kod, który sprawi, że ikona będzie widoczna w każdej przeglądarce.

Możesz wprowadzić kod HTML ‘link rel= shortcut icon’ otwierając plik header.php i wpisując go pod lub za znacznikiem :

<link rel=“shortcut icon” type=“image/ico” href=”/favicon.ico>

Pamiętaj tylko, aby zmienić typ rozszerzenia pliku w zależności od tego, w jakim formacie zapisałeś swoją faviconę.

4. Nadaj jej uniwersalny charakter

Logo Apple na budynku

Coraz więcej transakcji e-commerce odbywa się za pośrednictwem urządzeń mobilnych, więc jeśli możesz zoptymalizować swoją stronę pod kątem tych urządzeń, zdecydowanie powinieneś to zrobić.

Chociaż nie wszyscy na świecie korzystają z urządzeń Apple, jeśli chcesz, aby Twój favicon działał poprawnie na tych urządzeniach, musisz stworzyć ikonę Apple Touch.

Ikony Apple Touch reprezentują strony internetowe, które zostały zapisane na ekranie głównym na smartfonach lub tabletach Apple.

Nie wszystkie witryny optymalizują swoje favicony pod kątem urządzeń Apple. W takich przypadkach, gdy użytkownik zapisze adres URL witryny na ekranie głównym, pojawia się miniaturowa wersja strony docelowej.

Natomiast jeśli chcesz, aby Twoja strona prezentowała się bardziej elegancko, możesz utworzyć i przesłać plik z ikoną specjalnie dostosowaną do tych urządzeń.

Na początek, plik musi być zapisany w formacie .png. Najlepiej jest też stworzyć ikonę w rozmiarze do 180×180 pikseli, dzięki czemu będzie ona dobrze wyglądać na każdym ekranie.

Na koniec warto dodać do swojej strony osobny kod HTML dla ikon Apple Touch. Kod ten będzie wyglądał mniej więcej tak:

<link rel=”apple-touch-icon” sizes=180×180” href=”/apple-touch-icon-180×180.png>

Jak jeszcze bardziej ułatwić sobie zadanie?

Z pewnością pamiętasz tę część artykułu, która dotyczyła dwóch metod tworzenia favicon dla swojej witryny.

Pewnie zastanawiasz się, w jaki sposób druga opcja może być prostsza od pierwszej – skoro tamta była całkiem prosta.

Pomyśl o kreatorze stron internetowych.

Każdy przyzwoity kreator stron www opracowany w taki sposób, aby ułatwić użytkownikom wykonanie każdego zadania, przynajmniej jeśli chodzi o stworzenie własnej witryny, będzie wyposażony w generator favicon.

Narzędzie takie jak generator favicon od Zyro udostępni Ci komplet informacji, których potrzebujesz, aby dowiedzieć się, jak zrobić favicon, bez dodatkowych czynności związanych z kodowaniem, konwersją i znalezieniem projektanta, który wykona najciekawszą część pracy.

Przejdźmy więc przez etapy tworzenia i przesyłania favicony do witryny za pomocą takiego generatora, na przykładzie Zyro.

Generator Favicon zrzut ekranu strony Zyro

1. Wybierz szablon

Do wyboru masz jeden z gotowych szablonów Zyro lub możliwość przesłania własnego obrazu.

2. Spersonalizuj

Skorzystaj z dostępnych narzędzi, aby edytować obraz lub szablon, jego kolory, układ i tekst.

3. Pobierz

Gotowe – teraz możesz pobrać swoją faviconę w postaci pliku .png lub .ico i opublikować ją na swojej stronie.

Aby przesłać wygenerowaną faviconę na stronę Zyro, nie musisz niczego kodować ani konwertować, wystarczy tylko kilka kliknięć.

Po prostu przejdź do edytora Zyro. Jeśli masz kilka stron internetowych, wybierz tę, na którą chcesz wgrać swój favicon.

Wybierz Ustawienia ogólne z rozwijanego menu, wybierz Favicon i rozwiń dostępne opcje.

Przejdź do sekcji Przeglądaj pliki, aby znaleźć ikonę favicon, którą wygenerowałeś za pomocą narzędzia Zyro, a następnie kliknij w nią dwukrotnie, aby ją wgrać.

Następnie wyświetl podgląd, aby zobaczyć, jak Twoja ikona będzie się wyświetlać w przeglądarkach.

Jeśli będziesz zadowolony z efektu, kliknij Zapisz zmiany, a Twoja ikona strony internetowej zostanie załadowana.

Napisane przez

Awatar autora

Katarzyna

Katarzyna jest specjalistką w dziedzinie marketingu internetowego oraz miłośniczką nowoczesnych technologii. W szczególności interesuje się zagadnieniami z zakresu tworzenia stron i aplikacji internetowych oraz budowania marek. W pracy, jak i po pracy, zawsze towarzyszy jej troje czworonożnych przyjaciół, a w wolnym czasie zanurza się w sekrety psychologii.

Dołącz do rozmowy

Twój adres e-mail nie zostanie opublikowany. Wszystkie pola są wymagane.