Фавикон: какими бывают и как создать, 14 сервисов

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

Зачем нужен? Казалось бы, такая мелочь ни на что не влияет, однако фавикон вносит свой положительный вклад в узнаваемость и открываемость ресурса. Главное, правильно выбрать размер, формат, и тематику картинки.

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

Изначально фавикон показывался онлайн в качестве мини-изображения сайта при добавлении его во вкладку «Избранное». Впервые эта маленькая картинка появилась в марте 1999 года вместе с выходом пятой версии Internet Explorer, самого востребованного браузера того времени.

Сегодня фавикон есть практически у каждого сайта, он отображается почти во всех браузерах, а также в поисковых выдачах Google и Yandex.

Можно ли отнести фавикон к логотипу? И да, и нет. В упрощённом смысле – это форма фирменного знака, отличающаяся очень малыми размерами и созданная специально для web-сайтов.

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

Польза от фавиконов

Фавикон выполняет три полезных функции:

1. Помогает пользователям ориентироваться в интерфейсе

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

   Фавикон можно найти:

   • на вкладках в браузерах;

   • в закладках веб-обозревателей;

   • в выдачах Yandex и Google;

   • в мобильном поиске;

   • на главной странице в некоторых браузерах у часто посещаемых веб-сайтов.

Читайте также!
«Как увеличить поток клиентов, правильно подобрав способ»
Подробнее

2. Формирует доверие пользователей, повышает узнаваемость сайта или ресурса

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

3. Увеличивает кликабельность интернет-ресурса

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

Технические характеристики фавикона

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

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

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

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

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

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

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

Стандартные параметры иконки сайта: 16х16 пикселей. При его создании необходимо обязательно проверять, как выглядит изображение в таком маленьком разрешении.

Другие размеры фавиконов используются нечасто. Не так давно веб-мастера получили официальное письмо от компании Google, в котором содержались рекомендации об увеличении иконки до 192х192 пикселей. Решение Гугл аргументировано тем, что высокое качество фавиконов может значительно повысить кликабельность сайта по новым вкладкам в Chrome и на главной странице Android. Расплывчатое, нечёткое изображение иконки сайта не вызывает доверия у посетителей, следовательно, стоит переходить на изображения с высоким разрешением.

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

• Иконка сайта должна быть квадратной.

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

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

• Фавикон должен быть доступным для сканирования поисковыми роботами.

Благодаря релизу HTML5, который состоялся в 2017 году, появился атрибут sizes, который упростил работу с иконками сайтов. Этот атрибут указывается в формате «ширина х высота» без указания единиц измерения.

Если у вас несколько размеров, используйте пробел. Например:

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

Требования к дизайну фавикона

Самое главное при разработке иконки сайта – выбрать подходящее изображение. Оно может быть:

• Тематическое

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

• Контрастное

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

• Упрощённое

Фавикон имеет очень маленькое разрешение. Не стоит создавать детализированное изображение – его всё равно будет невозможно рассмотреть. Выберите максимально простую смысловую картинку с минимумом деталей и цветов.

• Креативное

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

Добавление фавикона на сайт

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

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

Обязательная иконка сайта

Необходимый формат фавикона для загрузки, поддерживаемый абсолютно всеми браузерами и устройствами, – ICO. HTML-код для его подключения:

Особого внимания при подключении требуют два момента: размер фавикона и его расположение.

Большинство веб-мастеров советуют загружать иконку в формате ICO с разрешением 16х16 пикселей. Однако контейнер данного формата динамический – он может менять размеры изображения в онлайн-режиме. То есть браузер, распознающий размер 16х16 пикселей, без труда сожмёт загруженное изображение в 32х32 pixel до необходимого. Однако если при сжатии картинка становится нечёткой, следует загружать фавикон в 16х16 pix – в этом случае обратитесь за помощью к профессиональному дизайнеру, который нарисует иконку в графическом редакторе в нужном вам качестве и величине.

Дополнительные иконки сайта

В корне проекта должно находиться только изображение в формате ICO (favicon.ico). Остальные иконки могут располагаться в любом месте, например:

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

Формат SVG

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

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

Фавиконы для устройств торговой марки Apple

Размеры иконок для устройств торговой марки Apple (iPhone и iPad) значительно отличаются от стандартных технических требований. Как установить фавикон, который будет корректно отображаться на технике Apple? Загрузить иконку установленного компанией формата.

Самый востребованный размер изображения фавикона сайта для Apple-устройств: 180х180 пикселей. Пример подключения такой иконки:

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

Большинство Apple-устройств умеет работать с иконками большого размера. Есть усовершенствованный метод подключения фавиконов больших размеров – с помощью манифеста. Он позволяет скрыть это присоединение всех размеров из <head>, что автоматически делает разметку для поисковых роботов более читаемой.

Манифест

Манифест представляет собой JSON-файл, содержащий в себе все подробности веб-приложения для браузера. Этот формат изначально был разработан компанией Google.

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

Создайте в корне проекта файл. Название у него может быть любое, расширение: «.webmanifest» – так браузер будет понимать, с каким типом файла он взаимодействует. Например, mfest.webmanifest.

Так как любой манифест является JSON-файлом, от должен начинаться с открывающей скобки { и заканчиваться закрывающей скобкой }:

Внутри скобок создайте секцию, в которой будут располагаться фавиконы. Если у вас несколько иконок, добавьте массив []:

Затем добавьте фавиконы по следующему шаблону:

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

В манифесте можно указать размеры фавиконов 180х180 pix и 512х512 пикселей. Как быть с промежуточными размерами изображений иконок сайта? Не стоит беспокоиться о них: браузер уменьшит исходную картинку до нужного ему параметра.

Значения настроек:

• src – путь до изображения фавикона;

• type – тип файла;

• sizes – размер изображения фавикона.

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

14 сервисов для выбора и создания фавикона

Ниже представлен список из четырнадцати самых популярных генераторов фавиконов:

1. favicon.cc

   С помощью этого сервиса вы можете нарисовать иконку сайта с нуля либо создать её на основе загруженного вами изображения. Сервис также предоставляет возможность разработки анимированных фавиконов в формате GIF.

2. genfavicon.com

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

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

3. favicon-generator.org

   Этот сервис позволяет создавать иконки для веб-сайтов, а также приложений для Android, iOS, Microsoft. Для этого вам необходимо загрузить на сайт выбранное заранее изображение в формате JPG, PNG или GIF и конвертировать его в картинку ICO. Сервис также предлагает готовые фавиконы: вы можете выбрать подходящий для вас значок, отфильтровав все находящиеся в библиотеке по буквам, номерам или цветам.

4. realfavicongenerator.net

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

   

5. favicongenerator.com

   Данный сервис позволяет конвертировать картинки из форматов PNG, JPG, GIF в формат ICO. Просто загрузите подготовленное заранее изображение на сайт, укажите нужный вам размер и кликнете по кнопке «Создать фавикон».

   Для корректного добавления созданной иконки на ваш веб-ресурс используйте подробную инструкцию, которую предоставляет сервис.

6. favicomatic.com

   Данная платформа предлагает два формата создания значков для сайта. Вы можете загрузить готовое изображение и конвертировать его в формат ICO. Сервис также предлагает большой выбор инструментов по созданию favicon с нуля: вы можете менять размер иконки, цвет фона и пр. Этот сервис позволяет делать значки не только для веб-сайтов, но и для приложений в Android и iOS.

Читайте также!
«9 видов программы лояльности для клиентов»
Подробнее

7. xiconeditor.com

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

8. favicon

   Упрощённый по функционалу сервис, который позволяет преобразовать готовое изображение в формат ICO. Платформа поддерживает загрузку картинок в формате PNG. Сервис не предоставляет инструментов по графическому редактированию загруженного изображения – всё, что вы можете здесь сделать, – это изменить размер и формат.

9. favicon.pro

   Эта платформа помогает преобразовать готовое изображение из форматов JPG, PNG или GIF в файл ICO. Всё, что нужно сделать: загрузить выбранную ранее картинку на сайт, выбрать нужный размер готовой иконки (сервис поддерживает размеры от 16х16 pixel до 128х128 пикселей). Добавление созданного фавикона на сайт подробно описано в инструкциях, которые предоставляет сервис.

10. favico.com

    Ещё один простой, интуитивно понятный сервис по созданию значков для сайтов. Он позволяет преобразовывать готовые изображения из форматов JPG, PNG и GIF в файл с расширением .ico. Он поддерживает размеры картинок от 16х16 пикселей до 32х32 pixel. На платформе также можно найти подробную инструкцию по загрузке фавикона в корневой каталог сайта.

    

11. faviconit.com

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

12. webestools’s favicon online generator

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

13. antifavicon.com

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

14. faviconr.com

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

Идеи для создания креативного фавикона

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

1. Используйте разные фавиконы для пользовательского варианта веб-ресурса и версии для разработчиков

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

2. Создавайте нетривиальные иконки сайта

   Вспомните, насколько сложно и трудоёмко создать логотип для бренда, который в одной картинке или слове будет отображать ценность продукта либо компании в целом. У разработки фавикона ровно те же трудности.

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

   

   Тем не менее многие организации преуспевают в разработке необычных, креативных и запоминающихся фавиконов:

   • Фавикон YоuTube – ярчайший пример простого и при этом очень оригинального дизайна. Разработчики не стали мудрить и сжимать текстовый логотип, а для иконки сайта использовали красный значок «Play». Этот фавикон узнаваем во всём мире. Кроме того, значок меняется в зависимости от состояния, в котором находится видео: когда вы приостанавливаете просмотр ролика, фавикон меняется на значок «Пауза».

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

   • Значок Trello оригинален тем, что он транслирует тот цвет, который установлен вами в качестве фона. Причём данная тема работает даже с загруженными задними планами.

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

   • Фавикон Github выполнен в виде маскота, который меняет свой цвет в зависимости от того, в каком состоянии находится система.

   • Иконка Flickr – динамичная: она транслирует процесс загрузки добавляемого вами на сайт изображения.

3. Аккуратно используйте анимированные значки сайта

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

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

4. Создавайте динамичные фавиконы

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

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

5. Создавайте иконки сайта в формате онлайн-игры

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

   • Iconic History – расширение для браузера, с помощью которого можно превратить историю посещённых вами сайтов в сетку из их иконок. Кроме того, у него имеется дополнительная настройка, позволяющая выделить в сетке ресурсы, просмотренные в определённое время дня или ночи.

   • Defender of the Favicons – фавикон, созданный в формате онлайн-игры. Программа очень простая и быстрая, так как размеры иконки не позволяют сделать что-то более замысловатое, однако это отличный пример того, как креативно можно подходить к созданию значка для сайта.

Скачайте полезный документ по теме:

Чек-лист: Как добиваться своих целей в переговорах с клиентами

Индексация фавиконов поисковиками

Поисковые системы Google и Yandex легко и быстро индексируют фавиконы веб-сайтов и интернет-ресурсов. Чаще всего этот процесс занимает от нескольких дней до недели. Распознавание иконок сайтов проходит в автоматическом режиме, даже в случае смены фавикона на новый.

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

Требования к фавиконам от Google

Эта поисковая система начинает постепенно отказываться от стандартного размера иконки в 16х16 пикселей. Google индексирует и такие значки, но отображаются они не всегда корректно и качественно. Главное требование Google по размеру фавикона – кратность 48 (например, 96х96 пикселей). Большинство веб-мастеров сходятся во мнении о том, что при выборе размера иконки сайта стоит ориентироваться именно на требования Google.

Остальные технические требования от этой поисковой системы просты:

• Фавикон не должен содержать изображения непристойного или оскорбительного содержания.

• Значок должен соответствовать стилистике сайта, бренда и компании в целом.

• Фавикон должен быть уникальным. Копирование чужих иконок запрещено.

Индексация у Google длится немного дольше, чем у Yandex. Кроме того, этот поисковик особенно медленно реагирует на частую смену иконок на сайте.

Требования к фавиконам от Yandex

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

Основные требования к фавиконам от Google и Yandex:

• Гугл отдаёт предпочтение форматам ICO и SVG (понимает и распознаёт форматы PNG и GIF).

• Яндекс отдаёт предпочтение формату SVG (понимает и читает форматы ICO, PNG и даже BMP – но лучше не экспериментируйте с ним).

• Анимация не распознаётся и Google, и Yandex, поэтому лучше не добавлять её.

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

Проверка фавикона на ошибки

Основные причины, по которым иконка может не отображаться:

• Кеширование страниц в браузере: чтобы справиться с проблемой, необходимо очистить кеш и обновить страницу (сочетание клавиш «Ctrl + F5» поможет сделать это прямо на странице).

• Несоответствие размера или формата иконки требованиям браузера: проверьте ее соответствие всем установленным браузером техническим требованиям.

• Неверное размещение фавикона в коде: проверьте, чтобы иконка сайта была размещена внутри тега <head>.

• Недостаточное время для индексации: в редких случаях она может затянуться до двух месяцев.

• Файл robots.txt содержит ограничение на индексацию фавикона: исправьте файл, указав «Allow: favicon.ico».

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

• Плохое качество картинки: поисковики иногда игнорируют иконки с низким разрешением.

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

• На веб-сайт наложены фильтры: проверьте системы аналитики на наличие сообщений от поисковых систем о наличии проблем на ресурсе.

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

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

Автор статьи

Дмитрий Свистунов

Руководитель SEO-отдела и разработки

Последние статьи этого автора:

• Адаптивная верстка сайта: гайд для начинающих
• Анкор ссылки: виды, правила составления, влияние на продвижение
• Белая раскрутка сайта без перехода на темную сторону

Забрать гарантированный подарок

Полезные
материалы
для руководителей

Скачать 3,2 MB