Favicon (иконка сайта)

Какой формат использовать для favicon?

Первоначально все значки создавались как файлы — формат, разработанный Microsoft для хранения ярлыков программ Windows. Самым большим преимуществом этого формата является то, что он может хранить изображения разных размеров в одном файле.

Раньше Internet Explorer поддерживал только этот формат файла, но современные браузеры также позволяют использовать значки , а некоторые браузеры даже поддерживают значки , и . Единственным исключением являются более ранние версии Internet Explorer, такие как 10 и ниже — они совместимы только с файлами .

Как правило, значки теперь считаются немного устаревшими, и большинство сайтов сегодня перешли на значки в формате . Причина этого — качество изображения: высокая кроссбраузерность и кроссплатформенность. Иконки выглядят намного лучше в большинстве современных браузеров и устройств.

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

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

Если вам интересно, какой формат файла использовать, мы рекомендуем либо классический , либо более широко поддерживаемый . Более подробно о других форматах вы можете узнать из таблицы ниже.

Основные браузеры и поддержка различных форматов фавикона в разных версиях

Браузер	ICO	PNG	JPEG	SVG	GIF
Google Chrome	Да	От 4.0	От 4.0	Нет	От 4.0
Opera	От 7.0	От 7.0	От 7.0	Нет	От 7.0
Firefox	От 1.0	От 1.0	Да	Да	От 1.0
Internet Explorer	От 5.0	От 11.0	Да	Нет	От 11.0
Safari MacOS	Да	От 4.0	От 4.0	Да	От 4.0

Коллекции готовых значков

Где же можно подобрать более-менее приличный элемент, который сможет украсить ваш ресурс, придав ему необходимые шарм и привлекательность?

Audit4web.ru

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

Favicon.co.uk

Этот сайт хорош тем, что картинки подаются аккуратными порциями, которые не выносят мозг просматривающему их. Очень удобно «есть» информацию ложками, а не из кастрюли. Сейчас не работает, возможно оживет.

Findicons.com

Это далеко не полный список и наверняка у многих из вас появятся свои любимые места, где можно быстро найти приличное изображение, но принцип их остается неизменным: эти картинки уникальными не назовешь. Поэтому предлагаю перейти к следующему пункту плана нашей сегодняшней беседы, а именно к вопросу о том, как сделать фавикон.

Краткая техинструкция по фавиконам

Соблюдать технические параметры фавиконов нужно для того, чтобы иконки сайтов отображались на любых устройствах — в хорошем качестве и именно с той картинкой, которую вы задумали. И начать нужно с подбора правильного формата и размера.

Формат фавикона

Самый известный, хоть уже и устаревший формат фавиконов — ICO. Его основное преимущество в том, что один файл может хранить в себе несколько вариантов размеров фавикона.

Раньше Internet Explorer поддерживал только этот формат, сегодня же практически все известные браузеры распознают иконки в PNG, некоторые — в GIF, JPEG, SVG. Исключение — Internet Explorer 10 и более ранние версии браузера, которые принимают только ICO-файлы.

Сегодня ICO считается уже немного устаревшим форматом, чаще всего предпочтение отдают PNG. Почему именно этот формат? Ответ простой — чтобы при любых обстоятельствах (браузерах и девайсах) сохранять высокое качество фавикона. PNG поддерживается и корректно отображается практически всеми современными браузерами.

У фавиконов в формате SVG, GIF, JPEG проблемы именно в отсутствии такой широкой поддержки. Но пару слов в защиту SVG формата все-таки хочется сказать — иконки в SVG масштабируются без потери качества, что в будущем может стать отличным решением всех проблем с отображением фавиконов. Дело за браузерами, которые уже постепенно начали внедрять поддержку этого формата свободной векторной графики.

Узнать, какие именно форматы фавиконов поддерживают разные браузеры, можно с помощью онлайн-сервиса . Например, вы сможете увидеть, какие браузеры поддерживают или не поддерживают фавиконки в формате PNG и SVG.

Размер фавикона

Классический размер фавикона составляет 16х16 пикселей. Поэтому стоит обязательно проверить, как ваш значок выглядит в таком маленьком разрешении.

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

Не так давно некоторые веб-мастера получили от Google письмо с рекомендацией увеличить разрешение фавикона до 192×192.

В письме речь шла о том, что более качественные фавиконы могут принести в 2 раза больше кликов по новым вкладкам в Chrome и на главной странице Android. Согласитесь, на расплывчатый фавикон вряд ли захотят кликать — значит, низкое разрешение иконки не вариант для хорошего пользовательского опыта.

Несколько общих правил, которых стоит придерживаться:

Использовать квадратный значок сайта.
Не использовать фавикон чужой компании или неприемлемого характера (например, свастика) — иначе поисковик будет отображать картинку по умолчанию – бесцветную планетку.
Фавикон должен быть доступным для сканирования поисковыми роботами.

Пять лет назад с релизом HTML5 появился атрибут sizes, который значительно облегчает работу с фавиконами. Этот атрибут нужно указывать в формате ширина х высота без единиц измерения (если их несколько, используйте пробел). Например:

Технические параметры фавиконов во многом зависят от тех устройств или браузеров, которые их будут считывать. Именно поэтому существуют много онлайн-сервисов, которые помогают учесть все нюансы и создать иконки сайтов в нужных форматах и размерах.

Создание и редактирование иконок. Бесплатные и функциональные редакторы иконок.

Время чтения:4 минуты Изображений:6

Что такое иконка? Иконка по сути это маленькая картинка, которая должна представлять объект, программу, веб страницу или команду. Вначале иконки стали использовать в приложениях, где имелись окна. По иконке можно было понять, что это за окно, даже если оно было свернуто до размеров иконки. Сейчас иконки используют очень широко, и в зависимости от места использования, иногда иконки выглядят как настоящие шедевры.

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

Веб элементы и иконки имеют очень важное значение для увеличения юзабилити веб-сайта.

Иконки– это простой и эффективный способ привлечь пользователей к содержанию вашего сайта. У иконок та же психологическая цель, что и у абзацев: они визуально разбивают содержание, сделав его менее пугающим

Хорошо отформатированные страницы с текстом, разбитым на легко воспринимаемые абзацы и подчеркнутые иконками, легко читаются и визуально достаточно привлекательны, чтобы поддерживать внимание пользователя. Поэтому иногда так и хочется дать совет: прекратите тратить время на написание монолитного содержания, которое никто не будет читать, и начать работу с иконками!

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

Однако иконки не заменяют содержание, они лишь привлекают внимание к содержанию. Иконки должны иметь отношение к содержанию и иметь простой дизайн

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

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

Создание иконок для веб сайтаэто весьма нелегкий процесс, отличающийся от создания макета сайта. Даже обладая мощными инструментами для создания качественных иконок, не так то просто создать такие иконки. Но даже если вы не специализируетесь на создании качественной графики и иконок, вам не помешает иметь в своем арсенале или хотя бы знать о программах, которые вам могут быть полезны в работе над иконками.

Ведь часто приходиться что-то править на иконках, подгоняя их под функционал сайта. И хотя в сети есть огромное количество готовых бесплатных иконок на все случаи жизни, иногда трудно подобрать точно необходимую иконку. Кроме того, использовать общедоступные ресурсы не является хорошим тоном, уникальная графика создает особый эффект, придавая уникальность дизайну.

Сегодня можно найти любые программы для создания и редактирования иконок. Многие из них платные и стоят дорого. Но существует также и бесплатные программы для создания иконок, функционал которых вполне достаточен для создания или редактирования иконок. Вы можете в таких редакторах легко создать или отредактировать, например, фавикон для вашего сайта.

Ниже вы можете найти бесплатные и эффективнее редакторы иконок, которые позволят вам с легкость изменять или создавать иконкидля сатов.

скачать редактор иконок IcoFX

скачать редактор иконок Greenfish Icon Editor Pro

скачать редактор иконок Icon Editor for Windows

скачать редактор иконок Iconmaker

скачать редактор иконок Liquid Icon XP Editor

Установка фавикона

Я покажу два способа установки, первый подойдет для всей сайтов, например, для сайта на HTML или WordPress, Второй способ только для проектов на движке WordPress.

Первый способ

Для начала нужно поместить созданный favicon.ico в корень сайта. Подключаемся к хостингу по FTP-соединению с помощью клиента FileZilla, перемещаем файл в корневую папку.

После этого открываем главную страницу сайта с помощью любого редактора кода, в Вордпресс это можно сделать, открыв меню Внешний вид -> Редактор тем, файл header.php и размещаем следующий код в разделе <head>:

<link rel="icon" href="/favicon.ico" type="image/x-icon" /> 
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

Сохраните файл, обновите страницу, появится фавикон. Если не отображается фавикон, то необходимо почистить куки в браузере.

Второй способ

Как я говорила ранее этот способ подойдет только для установки на CMS WordPress.

Открываем меню Внешний вид, далее выбираем шаблон, нажимаем настроить, далее Свойства сайта. Загружаем иконку на и сразу можем увидеть результат.

Did we forget anyone?

There are, of course, more favicon flavors out there, some of them quite obscure, so let’s see how our setup fares with them. Maybe, it’s time to say farewell to some of the less successful formats out there.

Windows Tile Icon

Microsoft Edge used to support a special icon format to pin websites to the start menu. For recent versions of Windows, this is no longer required.

Safari Pinned Icon

Safari formerly had a separate requirement to display an icon in pinned tabs. However, since Safari 12, we can use a regular favicon for pinned tabs. Even apple.com doesn’t use the anymore.

rel=”shortcut”

A lot of (now outdated) tutorials will include a into HTML like this:

Be warned that is not, and never has been, a valid link relation. Read this amazing article by Mathias Bynens from ten years ago that explains why we never needed shortcuts and why is just fine.

Yandex Tableau

Yandex Browser is a Chromium-based browser from the biggest Russian search engine. In Russia, it has a 20% market share. It has a nice feature that allows a website to display live data in widgets on a home screen through a special JSON manifest provided by the link. However, this feature proved not to be very popular, and Yandex has now removed the corresponding technical documentation from its website. Regular icon manifests will work just as well.

Opera Coast

In the past, Opera Coast, an experimental browser for iOS, required a special 228×228 icon. This browser left the App Store in 2017, and I doubt it survived the multiple iOS updates since that time.

Now, as we wave good-bye to our fallen comrades, let’s see how to produce an ultimate favicon set for those who are still standing.

Панель иконокЗначок менюАккордеонВкладкиВертикальные вкладкиЗаголовки вкладокВкладки полностраничныеВкладки при наведенииВерхняя навигацияОтзывчивый верхний навигаторНавигация с иконкамиМеню поискаСтрока поискаФиксированная боковая панельАнимированные боковые панелиОтзывчивая боковая панельПолноэкранная навигация наложенияМеню Off-CanvasБоковые кнопки навигацииБоковая панель с иконкамиМеню с горизонтальной прокруткойВертикальное менюНижняя навигацияОтзывчивая нижняя навигацияГраницы навигацииМеню по правому краюСсылка меню по центруМеню равной шириныФиксированное менюСкольжение вниз по полосе прокруткиСкрыть меню при прокруткеУменьшить меню при прокруткеЛипкая навигацияНавигация на изображенияВыпадающее менюВыпадающий при кликеВыпадающее меню в навигацииВыпадающий список в боковой навигацииОтзывчивая навигация с выпадающимПодменю навигацияВсплывающее менюМега менюМобильное менюМеню занавесСвернуть боковой барСвернуть боковую панельПагинацияХлебные крошкиГруппа кнопокГруппа вертикальных кнопокЛипкий социальный барНавигация таблеткиОтзывчивый заголовок

Уникальность

Уникальность относится как к целому набору иконок, так и к каждой в отдельности.

Мобильное приложение с 3D интеграцией

Уникальность набора

Первый тип уникальности вряд ли нуждается в разъяснении. Он подразумевает такой дизайн набора иконок, который отличает его от других и делает особенным и запоминающимся, а также обеспечивает уникальность бренда.

Уникальность не означает, что вы должны создавать продукты, которые еще никто никогда не видел. Такие значки могут лишь отпугнуть людей. Интернет-пользователи привыкли к определенным принципам и стереотипам. Ломать их — не лучшее решение. Эти принципы ограничивают креативность, но делают UI-элементы предсказуемыми и понятными. Целевая аудитория не обязана напрягаться, чтобы понять ваши разработки.

Используйте понятные всем метафоры, но уделите время созданию их уникального визуального образа. Пользователи не хотят разгадывать загадки.

Простые значки с особенным дизайном:

Уникальность иконки

Уникальность иконки — это её отличие от других в наборе. В своем стремлении создать единство продукта, дизайнеры часто забывают о его значении. Следует помнить, что единство и однообразие — далеко не одно и то же. У каждого элемента своя цель. Слоган современного разработчика гласит: каждая иконка имеет значение.

Пользователи не оценят красивый набор с визуально одинаковыми изображениями, которые трудно отличить друг от друга.

«Единый» — не значит «такой же»!

Пример дизайна с визуально идентичными деталями (единство стиля сохранено):

Изображение от Dindra Desmipian: Иконки рук

Преимущества использования фавикона

Вот основные преимущества использования значка на вашем сайте:

Достоверность

Несмотря на небольшой размер, наличие значка помогает вашему сайту выглядеть более авторитетным и профессиональным. Поскольку современный пользователь Интернета имеет тенденцию судить о предпринимателях и предприятиях на основе того, насколько профессионально разработан их веб-сайт, пользовательский значок favicon принесет вам дополнительные очки.

Отзыв бренда

Фавиконы после названия веб-сайта – это следующее, что посетители часто связывают с бизнесом. Причина в том, что оба они появляются в браузере, когда кто-то посещает ваш сайт. С учетом сказанного, фавикон играет более важную роль, чем название веб-сайта с точки зрения брендинга. Графика более запоминающаяся и узнаваемая, чем текст.

Повторные посещения

Фавикон также может помочь увеличить ежемесячный трафик на ваш сайт. Скажем, например, посетитель очень спешил, когда впервые открыл ваш веб-сайт, и решил добавить его в закладки для будущего посещения. Когда они позже просматривают свои закладки, вам будет легко визуально выделиться в списке, если у вас будет узнаваемый значок. Проще говоря, у вашего веб-сайта будет больше шансов быть добавленным в закладки и повторным посещением пользователями поисковых систем.

Теперь, когда вы знаете о его преимуществах, пришло время создать значок для вашего веб-сайта. К счастью, существует несколько генераторов значков, которые помогут вам создать персонализированный значок для вашего веб-сайта.

Как установить фавикон на сайт

После того как картинка готова ее нужно установить на сайт. Сделать это можно несколькими способами:

Непосредственно в корневой каталог сайта загрузив иконку через файл менеджер хостинга. Действия буду показывать на примере хостинга Макхост. (Этот способ подойдет для любого сайта.)
Через настройки темы WordPress в панели управления сайтом.

Переходим на хостинге Mchost в раздел сайты и открываем «Файл менеджер»

Файл менеджер в панели управления сайтами на Mchost

Корневая директория сайта

Нам откроется функционал загрузки файлов. Выбираем загрузка с компьютера и жмем «Выберите файл». Откроется проводник Windows, в котором переходим в компьютерную папку куда вы сохраняли готовую фавиконку. Выделяем картинку и жмем открыть.

Процесс агрузки файла в корневую директорию сайта

И после этого жмем закачать.

Поледний этап закачки файла

Проверяем директорию видим, что файл закачен.

Фавикон в корневом каталоге сайта

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

Фавикон сайта igrymozga.ru

Если вдруг фавиконка не отображается. Это бывает в очень редких случаях:

У вас старая версия браузера
Дело в самой теме вордпресс

Для решения этой проблемы нужно, в файл header.php нашей темы добавить перед закрывающимся тэгомспециальный код:

В ВордПресс переходим в административную панель управления в раздел «Внешний вид» «Редактор тем»

Переход в редактор тем в WordPress

Здесь с левой стороны ищем наш файл и нажимаем на него. Нам откроется код где находим конструкцию, заключенную в тег, вставить в нее наш код и нажать «Обновить файл»

Редактирование файла header

Нужно запомнить. Если у вас установлена тема ВордПресс для которой выходят обновления, этот код придется вставлять каждый раз, когда обновляется ваша тема так как обновление происходит путем замены файлов.

Если у вас сайт не на CMS, то у вас скорей всего не будет файла header.php тогда ищем файл index.html и в нем уже находим теги <head> <head/>. Редактировать тогда придется с помощью функций хостинга.

Корневой каталог простого сайта

Вставка кода для в файл index.html

Или через один из файловых менеджеров, например, FileZilla соединившись с хостингом использовав протокол FTP.

Как вставить через настройки темы WordPress

Есть еще один способ установки фавикона. Для этого нам понадобится квадратная картинка размером не менее 512×512 пикселей.

Поэтому я изначально подбирал картинку именно такого размера.

Для установки переходим в консоль управления и открываем настройки темы. Находятся они «Внешний вид» «Настроить»

Переход в настройки внешнего вида темы WordPress

Далее в меню с лева открываем «Свойства сайта»

Свойства сайта в меню настроек темы root

Здесь нажимаем «Выберите иконку сайта»

Свойства сайта

Нам откроется библиотека файлов где нужно перейти в раздел «Загрузить файлы» и нажать «Выберите файлы»

Загрузчик файлов в WordPress

Откроется процесс загрузки картинок с компьютера. Выбираем нужную картинку и жмем «Открыть»

Процесс загрузки файлов с компьютера

И далее в библтотеке файлов жмем «Выбрать»

Выбор картинки в билиотеке файлов

Затем сохраняем изменения нажав «Опубликовать»

Сохранение изменений в настройках сайта

А теперь давайте я покажу как проверять правильность установки фавиконки.

Значение фавиконки для сайта

Во-первых, данная картинка позволяет выделиться на фоне общей серой массы ресурсов, подобных вашему. Логотип какой-либо фирмы или ее бренда делает ресурс узнаваемым для пользователя.

Во-вторых, в поисковой выдаче при формировании сниппета в Яндексе сайт всегда показывается с этим значком

Если хотите выглядеть «опрятно» и привлекать внимание, то придется найти генератор фавиконки в интернете и создать ее, но об этом немного позже

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

Попросту говоря, этот значок является еще одним средством увеличить популярность и посещаемость вашего ресурса.

Вот вам пример запроса и списка сайтов к нему подобранного.

Вот только эту картинку-ярлычок Яндекс показывает не сразу. Обычно, сервису требуется какое-то время, чтобы проиндексировать изображение с помощью специального инструмента, но не так уж и много (чуть больше месяца или около того). Держу пари, многим любопытно, как же проверить, показывается ли фавикон сайта в выдаче или нет? Вот вам три простых способа:

1) «Найдите» свой сайт с помощью поисковика Яндекс. Если изображение уже загружено, то оно будет видно.

3) Если пользуетесь инструментом Яндекс.Вебмастер, то сможете проверить состояние своих фавиконок с его помощью (они отображаются рядом с сайтами).

Код для таск-менеджеров Grunt и Gulp

Теперь, когда мы понимаем принципы генерации favicon, для отображения вашего сайта на различных устройствах, мы можем автоматизировать этот процесс с помощью таск-менеджеров. Достаточно после генерации посмотреть вкладки Grunt или Gulp, в зависимости от того, что вы используете, и подробно изучить предложенный код, чтобы в дальнейшем использовать его в своих проектах и автоматизировать процесс генерации без обращения к онлайн ресурсу.

В своих проектах мы используем Gulp

1. Установите плагин

npm install gulp-real-favicon --save-dev

2. Вставьте код в свой

var realFavicon = require ('gulp-real-favicon');
var fs = require('fs');

// File where the favicon markups are stored
var FAVICON_DATA_FILE = 'faviconData.json';

// Generate the icons. This task takes a few seconds to complete. 
// You should run it at least once to create the icons. Then, 
// you should run it whenever RealFaviconGenerator updates its 
// package (see the check-for-favicon-update task below).
gulp.task('generate-favicon', function(done) {
	realFavicon.generateFavicon({
		masterPicture: 'TODO: Path to your master picture',
		dest: 'TODO: Path to the directory where to store the icons',
		iconsPath: '/',
		design: {
			ios: {
				pictureAspect: 'backgroundAndMargin',
				backgroundColor: '#ffffff',
				margin: '21%'
			},
			desktopBrowser: {},
			windows: {
				pictureAspect: 'whiteSilhouette',
				backgroundColor: '#da532c',
				onConflict: 'override'
			},
			androidChrome: {
				pictureAspect: 'shadow',
				themeColor: '#ffffff',
				manifest: {
					name: 'PUGOFKA',
					display: 'browser',
					orientation: 'notSet',
					onConflict: 'override'
				}
			},
			safariPinnedTab: {
				pictureAspect: 'silhouette',
				themeColor: '#5bbad5'
			}
		},
		settings: {
			compression: 5,
			scalingAlgorithm: 'Mitchell',
			errorOnImageTooSmall: false
		},
		markupFile: FAVICON_DATA_FILE
	}, function() {
		done();
	});
});

// Inject the favicon markups in your HTML pages. You should run 
// this task whenever you modify a page. You can keep this task 
// as is or refactor your existing HTML pipeline.
gulp.task('inject-favicon-markups', function() {
	gulp.src()
		.pipe(realFavicon.injectFaviconMarkups(JSON.parse(fs.readFileSync(FAVICON_DATA_FILE)).favicon.html_code))
		.pipe(gulp.dest('TODO: Path to the directory where to store the HTML files'));
});

// Check for updates on RealFaviconGenerator (think: Apple has just
// released a new Touch icon along with the latest version of iOS).
// Run this task from time to time. Ideally, make it part of your 
// continuous integration system.
gulp.task('check-for-favicon-update', function(done) {
	var currentVersion = JSON.parse(fs.readFileSync(FAVICON_DATA_FILE)).version;
	realFavicon.checkForUpdates(currentVersion, function(err) {
		if (err) {
			throw err;
		}
	});
});

3. Замените на путь до вашего исходника из которой будут генерироваться иконки. Например,

4. Замените на путь до директории где будут лежать ваши сгенерированые иконки. Например,

5. Замените на путь до файлов в которые будет вставлен код внедрения favicon. Например,

6. Замените на путь до директории, где хранятся ваши HTML файлы.

7. Сгенерируйте иконки командой

gulp generate-favicon

8. Интегрируйте иконки в ваш шаблон

gulp inject-favicon-markups

Предназначение иконки

При разработке иконки важно учесть, как она будет использоваться, и какие ее функции. Например, иконка мобильного приложения должна выполнять функцию идентификации и выделять его среди других приложений на смартфоне

Это касается как списка программ уже на смартфоне, так и в магазине приложений (App Store, Google Play)

Например, иконка мобильного приложения должна выполнять функцию идентификации и выделять его среди других приложений на смартфоне. Это касается как списка программ уже на смартфоне, так и в магазине приложений (App Store, Google Play).

Также нужно понимать, что, сосредотачиваясь исключительно на маркетинговой составляющей иконки, нельзя забывать о сценариях, когда приложением начнут пользоваться. Разумнее сделать иконку ориентированной не на единичную загрузку, а на ежедневное использование продукта рядовым пользователем.

Что такое Фавикон

Favicon (favicon.ico, фавикон, фавиконка) – это маленькая иконка сайта, которая отображается в поисковой выдачи, рядом с названием. Размер фавикона для сайта должен быть 16×16, 32×32 или 120×120 пикселей.

Рекомендуемый тип файла – это *.ico. Но может быть других форматов gif, jpeg, png, bmp. Я на всех своих сайтах использую файл с расширением *.ico.

А еще фавиконка отображается во вкладках и закладках браузера. Маленькая иконка, по которой можно легко узнать интернет-ресурс.

Помимо визуальной составляющей, это важный пункт для продвижения сайта.

Например, отсутствие фавиконки, приводит к ошибке в Яндекс Вебмастере, что в результате может привести к понижению в поисковой выдачи. Это уже серьезная причина чтобы добавить фавикон.

The long version, where everything is explained

“Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.”

—Antoine de Saint-Exupéry, Airman’s Odyssey

The concept of a favicon, which is short for “favorite icon”, have been around since the early 2000s. We’ve all seen those cute little images in our browser’s tab bar which help us differentiate our open websites. Users expect your website to have a favicon. It’s one of those little things that make other people take you seriously.

Even Apple, which has always had some kind of aesthetic beef with icons that don’t come from Cupertino, downplaying favicons in Safari for years, has finally given up and now properly displays them across all of its devices.

So, it’s common to offload the grueling task of generating these necessary files for an ever-growing list of screens and devices to favicon generator tools. No one in their right mind would ever want to spend hours creating them by hand. We’re here to build websites, after all, not to make browser vendors happy.

A set of favicons generated by a popular online generator

As a creator of NanoID and a proponent of minimalistic open source, I tend to think in a slightly different direction. What is the most efficient set of website icons? Which formats are outdated? Which icon types can be replaced with small compromises?

Thus, I set out to create a minimal list of favicons that will work in all cases and in all browsers—barring some edge cases—and even then, this will still work, just not 100% perfectly.

Какой формат использовать?

Желательные форматы Favicon: ico, png, svg

ICO

Устаревающий формат. Зато поддерживается большинством браузеров.
Он включает в себя значки разных размеров. Поэтому браузеры могут подтянуть иконку более низкого разрешения.

SVG

Применяется в Safari MacOS. Файлы мало весят, а отображаются хорошо. Дружно ждем, когда все браузеры начнут поддерживать этот формат.

Допустимые форматы: jpeg и gif

Не все браузеры поддерживают отображение таких значков.

Если ваша фавиконка имеет нестандартные форматы png или ico, то лучше проверить ее через сервис caniuse.com. Так вы поймете, поддерживают ли браузеры нужный вам формат.

Размер иконки

Для растровых форматов, размер нужен. Раньше, когда фавикон только появился, компьютеры были не такими мощными, а разрешения мониторов маленькими, по современным меркам. А соответственно и стандартный размер иконки был 16х16 пикселей. И это продолжалось достаточно продолжительное время. Сегодня, современные сайты этот размер уже не используют. По рекомендации того же Яндекса, 120х120 пикселей наиболее оптимальный.

Рекомендация Яндекса по размеру и формату favicon

В свою очередь Google рекомендует иконки кратные 48 пикселям – 48х48, 96х96, 144х144. Однако это касается десктопных браузеров. У телефонов плотность пикселей гораздо выше, да и количество иконок там помещается меньше, даже при аналогичном разрешении с монитором. Поэтому слишком маленькая иконка может выглядеть размытой, при масштабировании. Для современных смартфонов на Android рекомендуют 192х192, для iPhone – 180×180.

Favicon для Android

36×36 – для экранов с коэффициентом плотности 0.75
48×48 – для экранов с коэффициентом плотности 1
72×72 – для экранов с коэффициентом плотности 1.5
96×96 – для экранов с коэффициентом плотности 2
144×144 – для экранов с коэффициентом плотности 3
192×192 – для экранов с коэффициентом плотности 4

Favicon для Apple

57×57 – для iPhone с не ретина дисплеем и iOS версии 6.0 и ниже
60×60 – для iPhone с не ретина дисплеем и iOS версии 7.0
72×72 – для iPad с не ретина дисплеем и iOS версии 6.0 и ниже
76×76 – для iPad с не ретина дисплеем и iOS версии 7.0
114×144 – для iPhone с ретина дисплеем и iOS версии 6.0 и ниже
120×120 – для iPhone с ретина дисплеем и iOS версии 7.0
144×144 – для iPad с ретина дисплеем и iOS версии 6.0 и ниже
152×152 – для iPad с ретина дисплеем и iOS версии 7.0
180×180 – для iPhone 6 Plus c iOS версии 8.0

В итоге получается, что мельчить большого смысла нет, и стоит использовать размер не менее 120 пикселей. Начиная с версии HTML 5 можно указывать несколько размеров иконок в коде, поэтому имеет смысл сделать несколько фавиконов. В зависимости от платформы и разрешения пользователя, ему будет показываться наиболее подходящий из размеров. Как это правильно прописывать, поговорим чуть ниже в этой статье.

Для того чтобы создать сам favicon, есть два основных способа. Первый – ручная отрисовка иконки на специализированных онлайн-сервисах или при помощи графических редакторов типа Photoshop. Второй – скачать и использовать уже готовые иконки. Рассмотрим оба варианта по порядку.