Czy kiedykolwiek zwracałeś uwagę na te malutkie ikonki na górze zakładek przeglądarki? A może kiedy zapisujesz skrót do witryny lub strony online? Te malutkie obrazki, lub favicony, są zaprojektowane specjalnie do tego celu.

Jest dość wyraźna różnica między tym, co czyni dla dobrej lub złej malutkiej ikonki. Można by wybaczyć, gdybyś myślał, że decyzje projektowe w małej skali mają mniejsze znaczenie. Ale źle zaprojektowana favicon może źle odbijać się na twojej marce.

Dzisiaj przyjrzymy się, czym są te ikony, podstawowym technikom ich projektowania i specyfikacjom, których będziesz musiał przestrzegać.

Co to jest Favicon?

Po prostu, favicon jest małą, przezroczystą ikoną używaną do reprezentowania witryny, marki lub firmy. Favicony pomagają poprawić doświadczenie użytkownika, zapewniając spójny znacznik, który mówi odwiedzającym witrynę, że są na tej samej stronie, gdy nawigują dzięki spójnej wizualnej.

Termin favicon pochodzi od „ulubionej ikony”. Ta terminologia pochodzi z czasów Internet Explorera, kiedy strony z zakładkami były nazywane „Ulubionymi”. Po raz pierwszy favicon został przyjęty przez World Wide Web Consortium (W3C) dla HTML 4.0, około 2000 roku, i zaczął pojawiać się bardziej konsekwentnie w oknach przeglądarki w następnym roku.

Używaj faviconów do szybkiego przełączania się między kartami przeglądarki, identyfikacji zakładki lub znalezienia zapisanej aplikacji lub skrótu w telefonie. Identyfikator wizualny jest tym, czego większość ludzi używa, aby powiązać te linki i strony z odpowiednim przyciskiem, aby uzyskać do nich dostęp.

Tradycyjnie, favicony używały formatu pliku .ico, ale teraz jest to mniejszy problem. Każdy przezroczysty typ pliku będzie działał w większości przypadków; .png jest często wybieranym formatem.

Uwagi techniczne

W pewnym momencie wszystkie favicony były super małymi 16-pikselowymi kwadratami. To już nie jest przypadek z bardziej zaawansowanymi ekranami siatkówki i ikonami skrótów do rozważenia.

HTML 5 zawiera standardy dla faviconów z wieloma rozmiarami dla wszystkich rodzajów zastosowań, od małych ikon przeglądarki do ikon stacji dokującej komputera do ikon ekranu głównego. Nie potrzebujesz już nawet tego 16-pikselowego kwadratu.

Nowoczesne rozmiary favicon i zastosowanie:

• 32×32: Standard dla większości przeglądarek desktopowych (zastępuje 16×16)
• 128×128: Sklep Chrome i mała ikona ekranu gwiazdy Windows 8
• 152×152: ikona dotykowa iPada
• 167×167: ikona dotykowa iPada Retina
• 180×180: ikona Retina iPhone’a
• 192×192: rekomendacja aplikacji internetowej Google Developer
• 196×196: Ikona ekranu głównego Androida

Najlepsze praktyki

Choć wydaje się, że ikona, która jest taka sobie, może być nieistotna w kontekście ogólnego projektu, jest to dalekie od prawdy.

Fawikony mówią wiele o Twojej marce i witrynie. Użytkownicy zaczęli się ich spodziewać, jeśli nie mogą ich zidentyfikować po nazwie. Te małe elementy przyczyniają się do ogólnego doświadczenia użytkownika i marki.

Jak więc możesz w pełni wykorzystać favicon?

Pamiętaj o tych najlepszych praktykach:

• Fawicon powinien łączyć się z tożsamością Twojej marki, ale często jest zbyt mały, aby zawierać całe logo. Użyj rozpoznawalnego elementu, takiego jak pierwsza litera nazwy Twojej marki lub mały znak, którego używasz w połączeniu z marką.
• Pomyśl o kształcie. Miejsce na favicon, domyślnie, jest kwadratowe. Jeśli chcesz czegoś innego, konieczne jest przezroczyste tło. Niektóre systemy mogą również zaokrąglić krawędzie, dzięki czemu jest to kolejna kwestia, o której należy pamiętać.
• Upewnij się, że plik jest mały, ale nie za mały. Załaduj favicon o rozmiarze, który będzie wyświetlany poprawnie na większości urządzeń, ale nie zamula całej witryny.
• Unikaj słów lub złożonych elementów w projekcie favicon.
• Trzymaj się prostej, opływowej palety kolorów dla favicon. Jest ona zbyt mała, aby szaleć z kolorami. Dlatego większość tych małych ikon używa niewiele więcej niż kolor tła i pierwszego planu z dużym kontrastem między nimi.

Techniki projektowania

Ponieważ favicon jest mały, możesz być skłonny do zaprojektowania go pod wpływem kaprysu w Photoshopie. To nie jest zalecana droga dla długowieczności.

Buduj swoją favikonę w narzędziu wektorowym, takim jak Illustrator lub Sketch, a następnie wyeksportuj projekt do niezbędnych rozmiarów. Zapewni to, że wraz ze zmianą rozdzielczości ekranu, będziesz miał favicon, który przetrwa próbę czasu. (Jedyne co będziesz musiał zrobić, to ponownie wyeksportować projekt w nowym rozmiarze.)

Główną zasadą projektowania wizualnego dla faviconów jest utrzymanie prostego projektu. Nie przesadzaj z kolorem, tekstem lub elementami marki. Patrząc na przykłady w tym poście, zobaczysz, że prawie wszystkie z tych małych elementów są czytelne przy rozmiarze 16 na 16 pikseli.

Unikaj sztuczek takich jak animacje; one tylko przeszkadzają w tym przypadku.

Uznaj to za wyzwanie projektowe. Stworzenie czegoś tak małego, aby było łatwe do odczytania, może być dość trudne.

Zapisz plik jako przezroczysty png. To dobry nawyk, który gwarantuje, że nie skończysz z dziwnymi krawędziami lub granicami na favicon. (Nic nie wygląda gorzej niż poszarpana biała krawędź otaczająca ikonę.)

Używaj zasad dobrego projektowania. Nigdy nie wiadomo, kiedy favicon może być użyty do czegoś w większym, bardziej widocznym rozmiarze. Zapisywanie zakładki strony internetowej, na przykład, może używać dużej wersji favicon. To samo dotyczy dokowania, a nawet podglądów wyników wyszukiwarek.

Nawet jeśli jest mała, ta ikona reprezentuje twoją markę. Zaprojektuj ją dobrze.

Gdy masz już gotowy plik, możesz dodać go do swojej witryny za pomocą zaledwie kilku linii kodu. (Wiele motywów WordPress i kreatorów stron internetowych ma już element favicon w zestawie, więc nie musisz nawet myśleć o tym kroku.)

Po przesłaniu pliku obrazu, wstaw następujący kod do nagłówka swojej strony internetowej, zwracając uwagę, że „iconpath” i „iconname” odnoszą się do konkretnego elementu pliku:

Przykłady

Poniższe przykłady zawierają niektóre elementy marki z powiązanymi faviconami. (Upewnij się, że klikniesz i pokażesz projektantom trochę miłości na ich stronach Dribbble.)

Prodigi.team Responsive Logotype

Butterscotch Proposed Logo System

Logo Favicon Display

.

Szablon Favicon

TEC Logo Option 2

Podsumowanie

To, czego faviconom brakuje w rozmiarze, nadrabiają doświadczeniem użytkownika. Te ikony służą jako narzędzia nawigacyjne dla odwiedzających Twoją witrynę i tych, którzy mają tendencję do pozostawiania zbyt wielu otwartych kart przeglądarki.

Jako ogólna zasada, favicon jest szybkim identyfikatorem wizualnym, który łączy użytkownika z Twoją cyfrową obecnością. Zadbaj o to, aby zapewnić, że jest to najlepsza, bardziej dokładna reprezentacja Twojej marki.