Опубликовано автор в категориях Дизайнеру.

Favicon (фавикон) — неловкие шаги Интернета, пережиток первых дней Internet Explorer, немного неудобные в обращении, так как не используют известные и любимые веб-технологии, а скорее возвращаются к используемому в Windows формату файла .ico. Однако это важная часть вашего веб-сайта, и буквально первая вещь, которую видят пользователи в URL строке в браузере.  Значки веб-сайта также используются в разных местах, например во вкладках и закладках браузера. Те, кто хочет больше узнать о том, как вывести favicon для сайта может почитать эту статью, а ниже рассказывается о том, как подготовить favicon именно для ретина-дисплея.

Чтобы сделать их доступными для ретина-дисплеев, дополнительная работа требуется, но это сделать достаточно просто. Чтобы принимать правильные значки, которые работают во всех браузерах, и в частности в более старых версиях IE , вам необходимо создать
.ico файл с двумя вариантами размера: 16px на 16px для стандартных дисплеев, и 32px на 32px для ретина-дисплеев.

Для начала создайте два варианта иконок в любом редакторе изображений (например, Photoshop) и сохраните их как 32-bit PNG файл с альфа-каналом. Затем Вам нужно использовать специализированное приложение для редактирования иконок, чтобы создать фактический .ico файл. http://xiconeditor.com/ — бесплатное веб-приложение, которое хорошо подходит для этого:

favicon-editor

Внесите оба варианта размера, и сохраните ваш .ico файл как favicon.ico в корневой папке вашего сайта.

Вы можете легко проверить подходит ли ваш значок веб-сайта для ретина-дисплея,  просто используйте приложение Preview.app.  Появятся все варианты размера.

Когда дело доходит до фавиконов, появляется сложность в некоторых деталях, например, иногда бывает нужно вручную настроить изображение форматом 16×16 пиксель за пикселем, чтобы убедиться, что оно осталось острым и четким. Вы можете узнать много нового о хорошем дизайне иконок  различных размеров из десктопных приложений, где иконки обычно были доступны в различных размерах. Вот например иконка из Fantastical, приложение для календаря OS X, показывает наименьший (16×16) и наибольший (512×512) вариант:

favicon-samples

Вы можете четко видеть, что меньшая версия это не просто автоматически уменьшенный вариант большой иконки – что просто приведет к расплывшемуся беспорядку. Вместо этого маленькая иконка нарисована от руки, ненужные детали удалены и значительно упрощены.

Заметьте, что вы можете иметь тот же размер иконки в вашем фавикон-файле неоднократно, с различными альфа-каналами. Например, favicon.ico файл сайта Apple.com  имеет четыре разных варианта, с 1-битной и 8-битной прозрачностью для обоих размеров иконки.

На практике вам хватит двух иконок, 16px на 16px для стандартных дисплеев, и 32px на 32px для ретина-дисплеев, в обеих используйте 8-битную прозрачность – только действительно старые браузеры не смогут использовать этот формат.

Favicon для сенсорных устройств

Дополнительно вам нужно будет создать ряд вариантов разрешения иконок для мобильного рабочего стола. Эти файлы не относятся к фавиконов и конфигурируются с помощью мета-тегов.

Для самой широкой поддержки, вам необходимо создать четыре иконки 57×57, 72×72, 114×114 и 144×144.

Далее, для подключения созданных картинок в формате PNG, используйте следующий HTML фрагмент:

<!-- For third-generation iPad with high-resolution Retina display: -->
<link href="apple-touch-icon-144x144-precomposed.png" rel="apple-touch-icon-precomposed" sizes="144x144" />
<!-- For iPhone with high-resolution Retina display: -->
<link href="apple-touch-icon-114x114-precomposed.png" rel="apple-touch-icon-precomposed" sizes="114x114" />
<!-- For first- and second-generation iPad: -->
<link href="apple-touch-icon-72x72-precomposed.png" rel="apple-touch-icon-precomposed" sizes="72x72" />
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link href="apple-touch- icon-precomposed.png" rel="apple-touch-icon-precomposed" />
touch-icons

Заметьте, что вам нужно указать различные размеры в точном порядке для максимальной совместимости. Иконки будут выглядеть замечательно в любом IOS или Android устройстве, когда пользователь добавит ваш URL как ссылку на рабочем столе.

И вот оно – красивые иконки с высоким разрешением, которые великолепно выглядят на компьютере и в мобильном устройстве!

С английского перевела Виктория Павлова, оригинал — Don’t Forget About Favicons on Retina Screens.

Оставить комментарий

  • (не будет показан)