Good Mood

projektowanie Favicon jest ważniejsze niż mogłoby się wydawać. Rozmiar naprawdę ma tutaj znaczenie, ponieważ dobrze zaprojektowane logo musi być rozpoznawalne niezależnie od rozmiaru, w którym jest widoczne. Musi skalować się od ogromnych ekranów aż do ikony, która może być tak mała, jak 16 x 16 pikseli, znanej jako favicon. Doskonałym przykładem projektu favicon jest logo Google. Doskonale sprawdza się na większych ekranach dzięki dużemu ” G ” i wyróżniającemu się czterokolorowemu tekstowi., I nadal jest rozpoznawalny, gdy zmniejszy się do maleńkiego czterokolorowego ” G ” widocznego na pasku adresu przeglądarki internetowej.
favicon może być również postrzegany jako ikona skrótu, ikona karty lub ikona zakładki, więc musi wyglądać jak część. Aby zobaczyć, które projekty favicon działają, zobacz nasze podsumowanie inspiracji do projektowania logo i sprawdź tę oszałamiającą kolekcję ikon aplikacji na iOS, które są w sam raz.

w tym artykule przejdziemy przez proces projektowania idealnego faviconu., Będziemy zawierać szczegółowe wskazówki dotyczące tworzenia favicon dla urządzeń Apple, Android, Chrome, Opera i Safari. Plus poręczny przewodnik po różnych rozmiarach i formatach favicon, które musisz znać. Użyj szybkich linków (po prawej), aby przejść bezpośrednio do żądanej sekcji.

• szukasz innego rodzaju ikony? Zobacz nasz przewodnik po najlepszych darmowych zestawach ikon

we wczesnych czasach Internetu favicon był po prostu plikiem ikon 16x16px, ale obecnie jest nieco bardziej skomplikowany., Istnieją różne rozmiary i procesy favicon dla różnych kontekstów. Tworzenie WŁAŚCIWEGO faviconu to nauka.

zaczniemy od kilku wskazówek, jak powinna wyglądać Twoja favicona, a następnie przejdziemy do konkretnych porad, jak utworzyć favicon dla różnych kontekstów. Będziemy używać szablonu dostępnego w Zastosuj piksele, aby łatwo wygenerować różne wymagane rozmiary favicon, a favicon z Zastosuj piksele jako przykład.,

reguły projektowania Faviconu

sprawiają, że jest on rozpoznawalny

pierwszą rzeczą, którą należy wziąć pod uwagę przy projektowaniu faviconu, jest to, co musi być reprezentowane w kanwie. Pamiętaj, że Twoja favicon jest wyświetlana użytkownikowi tylko wtedy, gdy jest już na twojej stronie lub ma zakładkę. Więc nie ma potrzeby, aby spróbować i przyciągnąć użytkownika z favicon.

Użyj swojego logo

traktuj favicony jako trzeźwe drogowskazy, które pomagają użytkownikom rozpoznać Twoją stronę podczas przeglądania ich list zakładek i ekranów głównych., Dlatego chcesz użyć swojego logo lub dowolnego symbolu, który najłatwiej pozwoli użytkownikowi rozpoznać Twoją witrynę. Jeśli nie masz logomarku pasującego do kwadratowego płótna, użyj najbardziej rozpoznawalnej części logo.

Zachowaj jasność

jest też kilka rzeczy, których powinieneś unikać. Nie używaj faviconu jako narzędzia marketingowego – oznacza to brak tagów cenowych, „nowych” lub „zaktualizowanych” banerów i tak dalej. W rzeczywistości w ogóle nie chcesz umieszczać tekstu wewnątrz ikony favicon. Tekst nie skaluje się dobrze, a szanse są, że i tak będzie nieczytelny., Na koniec nie używaj zdjęcia – będzie błotniste i nierozpoznawalne w rozmiarze, w którym się pojawi.

utwórz dwie wersje

gdy favicony zostały po raz pierwszy wprowadzone w Internet Explorer 5, pojawiły się na pasku adresu URL i na liście zakładek. Obecnie favicony są wyświetlane w wielu innych kontekstach, w tym w listach zakładek, menu skrótów, a nawet ekranach domowych urządzeń mobilnych i telewizyjnych., To sprawia, że trudno przewidzieć, jak twoja favicon będzie wyświetlany użytkownikowi końcowemu.

aby Twoja favicon wyglądała dobrze w wielu różnych kontekstach, w których ma się pojawić, najlepiej podaj dwa style favicon:

Logo na przezroczystym tle
Ta wersja jest wyświetlana na pasku adresu URL, listach zakładek i innych miejscach, w których favicon pojawia się obok adresu URL lub nazwy witryny.,

Logo na solid fill
ta wersja jest używana w zakładkach i menu skrótów podobnych do siatki, gdzie przeglądarka lub urządzenie maskuje tło, aby uzyskać jednolity wygląd w kontekście.

arkusz cheatowy o rozmiarze Favicona

jak wspomniano wcześniej, różne konteksty wymagają faviconów o różnych rozmiarach. Poniżej znajduje się krótki przewodnik po różnych formatach i wymiarach, które musisz DOSTARCZYĆ, aby objąć wszystkie główne przypadki użycia.

wcześniej favicony musiały być dostarczane w formacie ICO., Dziś można dostarczyć pliki w formacie PNG (z wyjątkiem ikony przypięcia Safari, która powinna być dostarczona jako SVG).

Jeśli chcesz w prosty sposób zaprojektować i wyeksportować wszystkie rozmiary favicon, spójrz na szablon favicon w Apply Pixels.

teraz przyjrzyjmy się bliżej specyficznym wymaganiom różnych przypadków użycia.,

favicony przeglądarki desktopowej

Jak utworzyć favicon przeglądarki desktopowej

Zacznijmy od najprostszej favicon, którą musisz utworzyć: klasyczna favicon dla klasycznych przeglądarek desktopowych. Ten typ favicon działa najlepiej na przezroczystym tle, ponieważ często pojawia się na pasku adresu URL i na listach zakładek.,

musisz podać ten typ faviconu w trzech rozmiarach, wszystko w formacie PNG z przezroczystym tłem.,

• 16×16
• 32×32
• 48×48

Apple

jak tworzyć ikony Apple Touch

iOS firmy Apple używa ikon Apple Touch do reprezentowania stron internetowych, które zostały zapisane na ekranie głównym systemu iOS jako zakładki. Oznacza to, że ikona Apple Touch zostanie zaokrąglona do maski squircle ikon aplikacji iOS.

będzie również wyświetlany na tle wybranym przez użytkownika dla ekranu głównego. Mając to na uwadze, ikona Apple Touch powinna mieć solidny styl wypełnienia tła.,

Apple favicons powinny być dostarczane w formacie PNG. Możesz uzyskać dostęp do ikony Apple Touch o wymiarach 180×180, która automatycznie skaluje się dla różnych rozmiarów iPhone ' a i iPada. W większości przypadków będzie to działać dobrze.,

Jeśli nie, możesz podać dodatkowe rozmiary dla różnych urządzeń Apple:

• 60×60
• 76×76
• 120×120
• 152×152
• 180×180

Android, Chrome i Opera

jak utworzyć favicon dla Androida, Chrome i opery

Android, Chrome i Opera używają androida-Chrome-192×192.png i android-chrome-512×512.png, które poleca Google.,

od czasu wprowadzenia adaptacyjnych ikon w Androidzie, strony internetowe dodane do ekranu głównego Androida będą maskować projekt 192×192, więc ikona nabiera kształtu po preferowanym przez użytkownika stylu maskowania. Może to być squircle, elipsa, prostokąt, Zaokrąglony prostokąt lub kształt łezki.

<link rel="manifest" href="/manifest.json">

 <link rel="mask-icon" href="your_icon.svg">