Как да проектирате favicon: Най-доброто ръководство

дизайн на фавикон
(Кредит на изображението: Майкъл Фларъп)
КЪМ:


Дизайнът на Favicon е по-важен, отколкото си мислите. Тук размерът наистина има значение, тъй като добре проектираното лого трябва да бъде разпознаваемо при какъвто и да е размер. Необходимо е да се мащабира от масивни екрани чак до икона, която може да бъде по-малка от 16 х 16 пиксела, известна като фавикон. Чудесен пример за дизайн на фавикон е логото на Google. Той работи перфектно за по-големи екрани с големия си „G“ и отличителен четирицветен текст. И все още е разпознаваем, когато се свие до мъничкото четирицветно „G“, което се вижда в адресната лента на уеб браузърите.

Фавиконът може да се види и като икона за пряк път, икона на раздел или икона на отметка, така че трябва да погледне частта. За да видите проектите на favicon, които работят, вижте нашата информация за вдъхновение за дизайн на лого и вижте тази зашеметяваща колекция от Икони на приложения за iOS които го разбират точно както трябва.

В тази статия ще преминем през процеса на това как да проектираме перфектния значок. Ще включим конкретни съвети за създаване на значок за устройства на Apple, Android, Chrome, Opera и Safari. Плюс удобен наръчник за различните размери и формати на favicon, които трябва да знаете. Използвайте бързите връзки (вдясно), за да преминете направо към раздела, който искате.

Дизайн на Favicon: Бързи връзки

- Правила за проектиране на Favicon
- Favicon размери матрица
- Предпочитания за настолен браузър
- Предпочитания за Apple Touch
- Android, Chrome и Opera
- Прикрепеният раздел на Safari



В ранните дни на мрежата, favicon е просто файл с икони 16x16px, но в днешно време е малко по-сложен. Има различни размери и процеси на фавикон за различен контекст. Създаването на подходящ значок е наука.

И така, ние ще започнем с някои най-добри съвети за това как трябва да изглежда вашият фавикон и след това ще преминем към конкретни съвети за това как да създадете фавикон за различен контекст. Ще използваме шаблон, наличен в Прилагане на пиксели за лесно генериране на различните необходими размери на фавикон, и фавиконът от Прилагане на пиксели като пример.

Правила за проектиране на Favicon

01. Направете го разпознаваем

Първото нещо, което трябва да се вземе предвид при проектирането на значок, е това, което трябва да бъде представено в платното. Не забравяйте, че вашият значок се показва на потребителя само когато той вече е на вашия уебсайт или сте го маркирали. Така че няма нужда да се опитвате да привличате потребителя с вашия фавикон.

Считайте favicons като трезви указатели, които помагат на потребителите да разпознават уебсайта ви, когато разглеждат техните списъци с отметки и начални екрани. Следователно искате да използвате вашето лого или който и да е символ най-лесно позволява на потребителя да разпознава вашия уебсайт. Ако нямате регистрационна марка, която отговаря на квадратното платно, използвайте най-разпознаваемата част от вашето лого.

03. Дръжте го ясно

Има и няколко неща, които трябва да избягвате. Не използвайте Favicon като маркетингов инструмент - това означава, че няма ценови етикети, „нови“ или „актуализирани“ банери и т.н. Всъщност изобщо не искате да поставяте текст във фавикона. Текстът не се мащабира добре и има вероятност така или иначе да бъде нечетлив. И накрая, не използвайте снимка - тя ще бъде мътна и неузнаваема при размера, в който ще се появи.

04. Създайте две версии

Favicon на прозрачен фон и един на плътен фон за запълване

Различните среди работят добре за различен контекст(Кредит за изображение: Michael Flarup / Прилагане на пиксели)

Когато за първи път бяха представени значки в Internet Explorer 5, те се появиха в лентата за URL адреси и в списъка с отметки. Днес иконките се показват в много други контексти, включително списъци с маркери, бързи менюта и дори мобилни и телевизионни начални екрани. Това затруднява прогнозирането на начина, по който вашият значок ще бъде показан на крайния потребител.

За да сте сигурни, че вашият фавикон изглежда добре в много различни контексти, в които ще се появи, в идеалния случай трябва да предоставите два фавикон стила:

Лого на прозрачен фон
Тази версия се показва в лентата за URL адреси, списъците с отметки и на други места, където фавиконът се показва до URL адреса или името на вашия уебсайт.

Лого върху плътно запълване
Тази версия се използва в мрежови маркери и бързи менюта, където браузърът или устройството маскират фона, за да се постигне еднакъв вид в контекста.

Favicon размер cheatsheet

Както споменахме по-горе, различните контексти изискват различни по големина значки. По-долу можете да видите кратко ръководство за различните формати и размери, които ще трябва да предоставите, за да покриете всички основни случаи на употреба.

Преди това иконите трябваше да се предоставят във формат ICO. Днес е добре да предоставите файловете във формат PNG (с изключение на иконата на прикрепен раздел Safari, която трябва да бъде предоставена като SVG).

Ако искате лесен начин за проектиране и експортиране на всички размери на значки, погледнете Favicon шаблон над върху Прилагане на пиксели.

Favicon cheatsheet

Това са най-често срещаните размери на favicon(Кредит за изображение: emergeinteractive)

Сега нека разгледаме по-подробно специфичните изисквания на различните случаи на употреба.

Предпочитания за настолен браузър

Как да създадете favicon за десктоп браузър

Нека започнем с най-ясния Favicon, който ще трябва да създадете: класически Favicon за класическите десктоп браузъри. Този тип favicon работи най-добре на прозрачен фон, тъй като често се появява в URL лентата и в списъците с отметки.

Favicons, показани в лентата на отметките и URL лентата в Google Chrome

Клавиши в класически стил, показани в лентата на отметките и URL лентата в Google Chrome(Кредит за изображение: Michael Flarup / Прилагане на пиксели)

Ще трябва да предоставите този тип favicon в три размера, всички в PNG формат с прозрачен фон .

  • 16x16
  • 32x32
  • 48x48

Apple

Как да създадете Apple Touch favicons

IOS на Apple използва Apple Touch Icons да представлява уебсайтове, които са запазени на началния екран на iOS като отметки. Това означава, че иконата на Apple Touch ще бъде закръглена до катерица маска на икони на приложения за iOS.

Той ще се показва и на който и да е фон, който потребителят е избрал за началния си екран. Имайки предвид това, иконата на Apple Touch трябва да има плътен фон за запълване стил.

Начален екран на iPhone с икони

Този значок ще се покаже на фона на началния екран на потребителя(Кредит за изображение: Michael Flarup / Прилагане на пиксели)

Apple favicons трябва да се доставят в a PNG формат . Можете да се измъкнете с предоставяне на 180x180 Икона на Apple Touch, която автоматично ще се мащабира за различните размери на iPhone и iPad. В повечето случаи това ще работи добре.

Ако не, можете да предоставите допълнителни размери за различните устройства на Apple:

  • 60x60
  • 76x76
  • 120x120
  • 152x152
  • 180x180

Android, Chrome и Opera

Как да създадете favicon за Android, Chrome и Opera

Android, Chrome и Opera използват android-chrome-192x192.png и android-chrome-512x512.png че Google препоръчва .

След въвеждането на адаптивни икони в Android, уебсайтовете, добавени към началния екран на Android, ще маскират дизайна 192x192, така че иконата се оформя след предпочитания от потребителя стил на маскиране. Това може да е форма на катерица, елипсис, правоъгълник, заоблен правоъгълник или сълза.

Favicons на началния екран на Android Pie

Любимите тук ще бъдат маскирани в различни форми, според предпочитанията на потребителя(Кредит за изображение: Michael Flarup / Прилагане на пиксели)

Трябва да създадете PNG favicon с солиден фон , в 192x192 и 512x512 .

Приложете тези знаци, като добавите a manifest.json файл към вашия сайт и връзка към него в рамките на таговете:

Ето кода за manifest.json файл:

{ 'name': '', 'short_name': '', 'icons': [ { 'src': '/android-chrome- 192x192.png', 'sizes': '192x192', 'type': 'image/png' }, { 'src': '/android- chrome-512x512.png', 'sizes': '512x512', 'type': 'image/png' } ], 'theme_color': '#ffffff', 'background_color': '#ffffff', 'display': 'standalone' }

Сафари

Как да създадете значок за закрепения раздел на Safari

Това е странното и това е единственият значок, който трябва да бъде предоставен векторен формат като SVG файл . Той се показва като икона на миниатюри, когато потребителят закачи раздел в прозореца на браузъра Safari.

икона на фавикон: SVG формат

За разлика от всички други значки, тази икона се генерира от SVG изображение(Кредит за изображение: Michael Flarup / Прилагане на пиксели)

Този Favicon трябва да бъде 100% черен SVG файл с прозрачен фон . SVG може да бъде само един слой, а сафари изисква viewBox атрибутът на SVG да бъде зададен на ' 0 0 16 16 ' .

Други видове фавикон

Има някои размери и формати на favicon, които не са включени в тази статия, напр. Google TV, уеб магазин на Chrome и икони на Apple Touch преди iOS 7. Защо? Тъй като те са оттеглени или защото рядко са подходящи за обикновения уеб разработчик.

Като цяло разработчиците и дизайнерите трябва да се стремят да поддържат възможно най-голямо разнообразие от устройства и операционни системи, но понякога това просто няма смисъл. Но ако искате да видите по-пълен списък с изображения на Favicon, не забравяйте да погледнете това Favicon мамят лист на GitHub.

Прочетете още: