Przykłady Favicon, najlepsze praktyki i techniki

Czy kiedykolwiek zwracasz uwagę na te małe ikony u góry kart przeglądarki? Co powiesz na to, kiedy zapiszesz skrót do strony internetowej lub strony online? Te małe obrazy lub ulubione są zaprojektowane specjalnie do tego celu.

Istnieje wyraźna różnica między tym, co sprawia, że ​​ikona jest dobra, a zła. Zostaniesz wybaczony za myślenie, że decyzje projektowe na małą skalę mają mniejsze znaczenie. Ale źle zaprojektowany favicon może źle wpłynąć na Twoją markę.

Dzisiaj patrzymy na to, czym są te ikony, podstawowe techniki projektowania i specyfikacje, których musisz przestrzegać.

Poznaj elementy Envato

Co to jest Favicon?

Po prostu favicon to mała, przezroczysta ikona używana do reprezentowania strony internetowej, marki lub firmy. Favicons pomagają poprawić wrażenia użytkownika, zapewniając spójny znacznik, który informuje odwiedzających witrynę, że są na tej samej stronie podczas nawigacji dzięki spójnemu wyglądowi.

Termin favicon pochodzi od „ulubionej ikony”. Ta terminologia pochodzi z dni przeglądarki Internet Explorer, kiedy strony z zakładkami zostały nazwane „Ulubionymi”. Favicon został po raz pierwszy przyjęty przez World Wide Web Consortium (W3C) dla HTML 4.0, około 2000 r., I zaczął pojawiać się bardziej konsekwentnie w oknach przeglądarki w następnym roku.

Użyj ulubionych, aby szybko przełączać się między kartami przeglądarki, identyfikować zakładkę lub znaleźć zapisaną aplikację lub skrót w telefonie. Identyfikator wizualny jest tym, czego większość ludzi używa do powiązania tych linków i stron z prawym przyciskiem, aby uzyskać do nich dostęp.

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

Uwagi techniczne

W pewnym momencie wszystkie ulubione były super małymi 16-pikselowymi kwadratami. Tak już nie jest w przypadku większej liczby ekranów siatkówki o wysokiej rozdzielczości i ikon skrótów do rozważenia.

HTML 5 zawiera standardy dla ulubionych o wielu rozmiarach do wszystkich zastosowań, od drobnych ikon przeglądarki do ikon stacji dokujących do komputerów i ikon na ekranie głównym. Tak naprawdę nie potrzebujesz już tego 16-pikselowego kwadratu.

Nowoczesne rozmiary i zastosowanie favicon:

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

Najlepsze praktyki

Chociaż wydaje się, że jest to ikona, która może być nieznacząca pod względem ogólnego wyglądu, nie jest to prawda.

Ulubiony mówi wiele o Twojej marce i stronie internetowej. Użytkownicy zaczęli ich oczekiwać, jeśli nie mogą zidentyfikować ich po imieniu. Te małe elementy przyczyniają się do ogólnego komfortu użytkowania i marki.

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

Pamiętaj o tych najlepszych praktykach:

• Favicon powinien łączyć się z tożsamością Twojej marki, ale często jest zbyt mały, aby zawierać całe logo. Użyj identyfikowalnego elementu, takiego jak pierwsza litera nazwy marki lub niewielki znak, którego używasz w połączeniu z marką.
• Pomyśl o kształcie. Domyślnie przestrzeń favicon jest kwadratowa. Jeśli chcesz czegoś innego, konieczne jest przezroczyste tło. Niektóre systemy mogą również zaokrąglać krawędzie, co należy wziąć pod uwagę.
• Upewnij się, że plik jest mały, ale nie za mały. Prześlij rozmiar favicon, który będzie poprawnie renderowany na większości urządzeń, ale nie spowoduje uszkodzenia całej witryny.
• Unikaj słów lub skomplikowanych elementów w projekcie favicon.
• Trzymaj się prostej, uproszczonej palety kolorów favicon. Jest za mały, aby zwariować z kolorem. Dlatego większość tych małych ikon używa niewiele więcej niż tła i pierwszego planu z dużym kontrastem między nimi.

Techniki projektowania

Ponieważ favicon jest mały, możesz chcieć zaprojektować go według kaprysu w Photoshopie. To nie jest zalecana trasa dla długowieczności.

Najważniejszą zasadą wizualną projektowania favikonów jest uproszczenie projektu. Nie przesadzaj z kolorami, tekstem lub elementami marki.

Zbuduj swój ulubiony w narzędziu wektorowym, takim jak Illustrator lub Szkic, a następnie wyeksportuj projekt do wymaganych rozmiarów. Zapewni to, że wraz ze zmianą rozdzielczości ekranu pojawi się favicon, który przetrwa próbę czasu. (Wszystko, co musisz zrobić, to ponownie wyeksportować w nowym rozmiarze).

Najważniejszą zasadą wizualną projektowania favikonów jest uproszczenie projektu. Nie przesadzaj z kolorami, tekstem lub elementami marki. Patrząc na przykłady w tym poście, zobaczysz, że prawie wszystkie te małe elementy są czytelne w rozmiarze 16 na 16 pikseli.

Unikaj sztuczek, takich jak animacja; przeszkadzają tylko tutaj.

Uznaj to za wyzwanie projektowe. Stworzenie czegoś tak małego, że łatwo go odczytać, może być dość trudne.

Zapisz plik jako przezroczysty png. Jest to dobry nawyk, który zapewnia, że ​​nie skończysz z dziwnymi krawędziami lub ramkami na favicon. (Nic nie wygląda gorzej niż postrzępiona biała krawędź otaczająca ikonę).

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

Mimo że jest mała, ikona reprezentuje Twoją markę. Zaprojektuj to dobrze.

Po przygotowaniu pliku możesz dodać go do swojej witryny za pomocą zaledwie kilku wierszy kodu. (Wiele motywów WordPress i twórców stron już zawiera element favicon, więc nawet nie musisz myśleć o tym kroku).

Po przesłaniu pliku obrazu wstaw następujący kod do nagłówka swojej witryny, zauważając, że „iconpath” i „iconname” odnoszą się do określonego elementu pliku:

• Plik indeksu HTML:
• WordPress:

Przykłady

Poniższe przykłady obejmują niektóre elementy marki z powiązanymi ikonami ulubionych. (Pamiętaj, aby kliknąć i pokazać projektantom trochę miłości na ich stronach Dribbble).

Prodigi.team Responsive Logotype

Proponowany system logo Butterscotch

Logo Favicon Display

Szablon Favicon

Opcja logo TEC 2

Wniosek

To, czego favikony nie mają wielkości, nadrabia wrażeniami użytkowników. Ikony te służą jako narzędzia nawigacyjne dla osób odwiedzających witrynę i tych, które zwykle pozostawiają zbyt wiele otwartych kart przeglądarki.

Zasadniczo favicon to szybki identyfikator wizualny, który łączy użytkownika z Twoją cyfrową obecnością. Zadbaj o to, aby zapewnić najlepszą, dokładniejszą reprezentację Twojej marki.