Разборы

Что такое фавикон и как его создать

что такое фавикон

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

Фавикон (favicon) — это иконка, расположенная перед названием страницы во вкладке браузера. Как правило, картинка содержит логотип, первую букву наименования бренда либо изображение, релевантное тематике ресурса.

Фавикон
Фавикон позволяет легко найти нужный сайт среди множества вкладок

Фавикон —  это картинка, значок веб-страницы. Впервые такие изображения начали использовать в браузере Internet Explorer. Узнаваемая картинка помогала легко найти нужный сайт среди множества открытых вкладок. Называли такие картинки FAVoritesICON — в переводе «значок для избранного», отсюда и упрощённое наименование — favicon.

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

фавикон служит дополнительным элементом
На мобильном экране фавикон служит дополнительным элементом для привлечения внимания

Вне зависимости от места своего размещения, фавикон привлекает внимание пользователей, и помогает запомнить сайт.

Для чего нужен фавикон

Основное предназначение фавикона — выделить бренд или его сайт среди браузерных вкладок. При отсутствии иконки на вкладке отображается картинка чёрно-белой планеты, по которой невозможно распознать сайт. Представьте, что в вашем браузере одновременно открыто 10-15-20 вкладок. При таком количестве открытых страниц текст заголовка просто не виден, и распознать нужный сайт можно только по изображению.

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

Владельцам сайтов фавикон полезен тем, что:

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

Посетителям фавикон облегчает поиск вкладки либо закладки.

зачки в браузере
Большинство пользователей легко угадает названия сайтов по этим значкам в диспетчере закладок браузера и без подписи

Дизайн фавикона

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

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

Выделяется ли фавикон на фоне конкурентов? Посмотрите выдачу поисковика по вашим ключевым запросам и изучите фавиконы. Обратите внимание на форму, цвет и содержание картинок конкурентов. Вам необходимо придумать что-то, что будет кардинально отличаться.

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

Понятно ли, что именно изображено на фавиконе? Учтите, что на небольшой картинке будет сложно различить мелкие детали. Постарайтесь избегать слишком ярких цветов. Они будут отвлекать внимание от содержания сайта.

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

Realfavicongenerator
В Realfavicongenerator еще на этапе регистрации можно посмотреть, какие браузеры и платформы поддерживает сервис

Помимо проверки и демонстрации отображения сервис даёт рекомендации, что стоит улучшить в иконке.

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

Что касается непосредственно создания иконки, важно правильно подобрать размер и формат картинки.

 

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

Favicon — растровое изображение и измеряют его в пикселях.

Стандартный размер фавикона, поддерживаемый большинством браузеров и устройств — 16×16 px в формате .ico.

Но в зависимости от операционной системы и версии браузера размер варьируется — 24х24, 32х32, 64х64 и более. Например, Google рекомендует создавать фавиконки, кратные 48 пикселям —  48 x 48, 96 x 96, 144 x 144 и т. д. Это помогает масштабировать картинку в браузере без ухудшения качества.

Для формата .svg точные размеры не предусмотрены. Главное, сделать картинку квадратной.

На устройствах Apple, начиная с версии iOS 1.1.3, и на некоторых устройствах с ОС Android применяют большие иконки. Это позволяет использовать фавиконы как значки веб-приложений. Так рекомендуемый размер иконки для iPhone равен 60×60 px, для iPhone с retina-дисплеем — 120×120 px.

Для iPad и iPad с retina-дисплеем, рекомендуют иконки размером 76×76 и 152×152 пикселя соответственно.

Для устройств на Android с браузером Chrome оптимальны фавиконы размером 192×192 пикселя в формате .png.

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

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

Формат favicon

Изначально картинки для фавиконов создавали только в формате .ico. Этот формат использовал для закладок Microsoft Internet Explorer. Иконки помещали в корневой каталог сайта под именем favicon.ico.

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

Позже на смену .ico пришли форматы .png и .svg. Они хорошо отображаются и меньше весят. Большинство современных платформ и операционных систем поддерживают .png, а формат .svg используют в Safari MacOS.

Иногда фавиконки делают в форматах .jpeg и .gif. Это допустимо, но нежелательно, поскольку поддерживают эти форматы не все браузеры. Firefox и Opera разрешают использование анимированных «гифок», но не рекомендую их применять — движущиеся картинки будут отвлекать внимание посетителя при просмотре сайта и раздражать пользователя при отображении среди браузерных вкладок.

В таблице показаны версии основных браузеров и поддерживаемые ими форматы фавикона:

 

Основные браузеры и поддержка различных форматов фавикона в разных версиях
Браузер ICO PNG JPEG SVG GIF APNG GIF-анимация
Google Chrome Да От 4.0 От 4.0 Нет От 4.0 Нет Нет
Opera От 7.0 От 7.0 От 7.0 Нет От 7.0 От 9.5 От 7.0
Firefox От 1.0 От 1.0 Да Да От 1.0 От 3.0 Да
Internet Explorer От 5.0 От 11.0 Да Нет От 11.0 Нет Нет
Safari MacOS Да От 4.0 От 4.0 Да От 4.0 Нет Нет

На текущий момент основные форматы для фавикона —  это .ico и .png. Формат .jpeg в некоторых случаях может отображаться некорректно. Для Safari MacOS лучше применять .svg. А вот прочие форматы использовать нецелесообразно из-за плохой поддержки.

Для хорошего отображения фавиконов в разных контекстах желательно создавать иконки в двух вариантах:

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

В таблице я показала,  какие стиль и размер фавикона в форматах .png/.svg выбрать для разных браузеров и операционных систем

 

Классические десктопные браузеры

16×16, 32×32, 48×48 PNG Прозрачный

 

Браузер Safari

Вектор SVG Прозрачный

 

Мобильный браузер Opera

228×228 PNG Сплошная заливка

 

Windows 8.0

144×144 PNG Прозрачный

 

Windows 8.1

128×128, 270 x 270, 558×558 PNG Прозрачный

 

Apple iOS

180×180 PNG Сплошная заливка

 

Google Android и Chrome

192×192, 512×512 PNG Сплошная заливка

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

 

Favicomatic показывает возможные размеры
Favicomatic показывает возможные размеры фавикона и в подсказке рассказывает, где их можно применять

Если вы всё же сомневаетесь, какой размер фавикона выбрать, используйте значки размером 16x16px или 32x32px в формате .ico или .png. Но если вы хотите максимально позаботиться об UX/UI, желательно учесть требования платформ относительно оптимальных размеров.

Теперь, когда мы немного разобрались в размерах и форматах, можно переходить к созданию иконок. Оптимальный вариант — использование сервисов.

Генераторы для создания фавикона

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

 

Favicon.by

Сайт

Favicon.by
В Favicon.by вы можете нарисовать фавикон или конвертировать загруженное изображение

Позволяет самостоятельно  нарисовать фавикон на сайт и отредактировать его. Можно импортировать изображение из файла или с сайта и подкорректировать до нужного вида. Как будет отображаться фавикон, можно посмотреть до скачивания. Результатом генерации становится картинка размером 16×16 пикселей в формате .ico.

 

Logaster

Сайт

Logaster
Создание фавикона из логотипа в Logaster

Условно-бесплатный сервис 2 в 1. Здесь можно создать логотип, а потом на его основе сгенерировать фавикон. Можно создать логотип любых размеров в форматах pdf, .svg, .png, .jpeg. Один маленький логотип на белом фоне доступен бесплатно, для скачивания остальных нужно оплатить доступ к сервису.

 

Perfectoweb

Сайт

Perfectoweb
Интерфейс генератора фавиконов Perfectoweb

Инструмент для создания фавиконов в популярных размерах: 16х16, 32х32, 48х48, 64х64, 128х128. Процесс создания максимально прост: загрузить картинку, выбрать размер, скачать иконку.

 

Favicon.io

Сайт

Favicon.io
Favicon.io предлагает несколько вариантов создания фавикона

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

Если по какой-то причине вам не подходят сгенерированные фавиконы, скачайте готовые иконки. Например, на сайте faviconka, а по запросу «скачать фавикон» вы найдёте множество похожих ресурсов. Также можно нарисовать иконку в Photoshop, Illustrator, Figma или заказать у профессионального дизайнера.

Как разместить на сайте

Чтобы добавить фавикон на сайт без CMS, нужно:

  1. Вставить между тегами <head>…</head> на главной странице сайта фрагмент кода с адресом значка и типом передаваемых данных. Вам необходимо указать путь к месту хранения иконки —  URL. Затем название файла с иконкой и используемый формат — например, favicon.png.
    <head>
    ...
    <link rel="icon" href="https://URL сайта/favicon.ico" type="image/x-icon">
    ...
    </head>
  2. Если вы редактировали страницу вне хостинга, загрузите файл редактируемой страницы на хостинг с заменой существующего файла и сохраните. Удобнее редактировать файл прямо на хостинге, подключившись к нему при помощи редактора кода по FTP. Например, через Notepad++.
  3. В корневую папку сайта («public_html»; «html»; «site»; «www») либо в папку с изображениями загрузите файл иконки. Используйте файловый менеджер в панели управления хостинга или сторонний FTP-клиент.
Пример HTML
Пример HTML-страницы с добавленным кодом фавикона

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

Для сайтов на CMS (WordPress, Drupal, Joomla) фрагмент кода также добавляют между тегами head в файл шаблона шапки сайта header.php.

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

Распространенные ошибки

Существуют разные причины, по которым фавикон не отображается. Например:

Кеширование страниц браузером. Для устранения проблемы очистите кеш браузера и обновите страницу. Комбинация клавиш «CTRL + F5» поможет почистить кеш, оставаясь на странице.

Неверный формат либо размер иконки. Проверьте совместимость формата и наличие всех необходимых атрибутов в коде фавикона.

Ошибка в размещении кода. Убедитесь, что код фавикона расположен в блоке <head>.

Прошло слишком мало времени. Индексация фавикона поисковиками может занимать от двух недель до двух месяцев.

Запрет на индексацию иконки в файле robots.txt. Разрешите индексацию: исправьте Dissalow: favicon.ico на Allow: favicon.ico.

Неуместное изображение. Проверьте, что изображение не содержит элементы, похожие на запрещённые символы (оскорбительные картинки, изображения 18+).

Низкое качество либо неуникальность фавикона. Поисковик иногда игнорирует иконки с низким разрешением либо скопированные с других ресурсов.

Фильтры поисковых систем на сайте. Косвенные признаки фильтров: снижение посещаемости без явных причин, выпадение из поиска значительной доли страниц, сообщение о проблемах на сайте в Google Search Console или Яндекс.Вебмастере.

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

Touch для iOS Safari
Сервис уведомляет об отсутствии в корневом каталоге значка Touch для iOS Safari

Запомнить

Что такое фавикон? Это значок сайта, расположенный рядом с title страницы.

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

Изображения для фавикона чаще всего создают в форматах .ico, .png, .svg.

Размер иконки варьируется от 16х16 px и зависит от места размещения.

Быстро создать фавикон помогают сервисы-генераторы.

Готовую иконку размещают в блоке <head> в корневом каталоге сайта .

Найти ошибки отображения помогают сервисы-чекеры.