Как сделать favicon для сайта

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

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

В MaryProject мы рассматриваем favicon как часть комплексной SEO-оптимизации сайта. Сам по себе фавикон не заменяет техническую оптимизацию, контент, структуру и работу с коммерческими факторами, но он влияет на визуальное восприятие ресурса, доверие пользователей и аккуратность технической настройки сайта..

Что такое фавикон и зачем он нужен для вашего сайта

Favicon - это сокращение от favorites icon, то есть «иконка для избранного». Чаще всего в качестве фавикона используют логотип компании, фирменный знак, первую букву названия бренда или простую графическую иконку, которая помогает быстро узнать сайт.

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

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

Раньше для сайта часто создавали один favicon небольшого размера, например 16×16 пикселей. Сейчас этого недостаточно. Один и тот же сайт может открываться на десктопе, смартфоне, планшете, в разных браузерах и операционных системах. Поэтому для корректного отображения нужно подготовить набор иконок под разные платформы, размеры и технические требования.

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

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

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

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

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

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

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

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

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

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

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

Десктоп

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

Для десктопных браузеров обычно используют несколько размеров иконок: 16×16, 32×32 и 48×48 пикселей. Если вы создаете мультиразмерный .ico-файл, эти варианты можно включить внутрь одного файла.

Google рекомендует использовать иконки, размеры которых кратны 48 пикселям: например 48×48, 96×96, 144×144. Также можно использовать формат .svg, который не привязан к конкретному размеру и масштабируется без потери качества.

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

Если вы используете формат .ico, мультиразмерную иконку удобно создать через сервис icoconvert или аналогичные инструменты. В настройках можно выбрать размеры 16×16, 32×32 и 48×48 пикселей.

Android, Chrome и Opera

Для Android, Chrome и Opera рекомендуется создавать иконки в формате .png размером 192×192 и 512×512 пикселей. Такие размеры подходят для отображения сайта на домашнем экране мобильного устройства и в интерфейсах браузера.

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

Веб-манифест - это JSON-файл, который содержит информацию о сайте или веб-приложении: название, цветовую тему, иконки, режим отображения и другие параметры. Обычно файл называется site.webmanifest.

Чтобы подключить манифест к сайту, нужно добавить ссылку на него в блок head HTML-страницы:

В манифесте есть ключ icons. В нем указывается список иконок, их размеры и форматы. Если этот блок не настроен, браузер будет искать другие варианты: favicon.ico, link rel="icon" или, в крайнем случае, использовать скриншот страницы.

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

Mac OS и iOS Safari Web Clip

Для корректного отображения в macOS Safari рекомендуется использовать favicon в формате .svg. Это особенно важно для закрепленных вкладок в Safari. Такая иконка должна быть простой, плоской и хорошо читаемой. Лучше избегать сложных градиентов, теней, мелких деталей и перегруженной графики.

Для iOS Safari создается отдельная apple touch icon( иконка в формате .png размером 180×180 пикселей). Она используется, когда пользователь сохраняет страницу сайта на главный экран iPhone или iPad. Такая ссылка называется Web Clip и визуально выглядит как иконка приложения.

При создании apple touch icon важно помнить, что iOS автоматически скругляет углы иконки. Поэтому не стоит размещать важные элементы вплотную к краям. Лучше оставить внутренние отступы примерно по 4 пикселя или больше, чтобы логотип или знак не обрезался.

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

С помощью каких инструментов можно создать иконку

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

Adobe Photoshop или Figma

Если у вас есть навыки работы с графическими редакторами, создать favicon можно самостоятельно. В Figma удобно подготовить несколько размеров иконки, проверить отступы, экспортировать варианты в .png или .svg и сразу увидеть, как знак выглядит в маленьком размере.

В Adobe Photoshop также можно подготовить изображение нужного размера, настроить прозрачный или непрозрачный фон и экспортировать файл. Для работы с форматом .ico можно использовать специальные плагины, например Favicon.ico.

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

Realfavicongenerator.net

Realfavicongenerator.net - один из удобных сервисов для генерации favicon разных размеров. Вы загружаете исходное изображение, желательно квадратное и размером не менее 260×260 пикселей, а сервис автоматически подготавливает набор иконок для iOS, Android, Windows, macOS Safari и других платформ.

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

Favicon.cc

Favicon.cc - сервис для создания favicon в формате .ico. В нем можно загрузить готовое изображение или нарисовать иконку вручную с помощью встроенного редактора.

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

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

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

Лучшее решение это создать собственную уникальную иконку на основе фирменного стиля бренда или заказать ее у дизайнера.

Как преобразовать изображение в формат фавикон

Для преобразования изображения в favicon удобно использовать онлайн-редакторы, например Favicon.io, ConvertICO, PR-CY или аналогичные сервисы. Они позволяют конвертировать брендированное изображение в формат .ico, а также подготовить дополнительные размеры для разных браузеров.

Сначала нужно выбрать исходник. В идеале это должна быть квадратная картинка 512×512 пикселей. Такой размер дает хороший запас качества и позволяет получить аккуратные уменьшенные версии иконки.

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

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

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

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

Как установить: добавление фавикона на сайт, код и настройки

Сначала задайте файлу правильное имя и расширение. Классический вариант — favicon.ico. Но для современных сайтов также стоит использовать .png и .svg.

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

Для сайта лучше подготовить кроссплатформенный набор иконок: для десктопных браузеров, мобильных устройств, Android, iOS и Safari. Браузеры и поисковые роботы смогут выбрать наиболее подходящий вариант из доступных. Это лучше, чем загружать один файл и полагаться на автоматическое масштабирование.

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

yoursite.com/favicon.ico

Если используется другой формат, нужно проверить путь к соответствующему файлу, например .png или .svg. При корректной настройке браузер должен отобразить иконку.

Затем адрес favicon прописывается в HTML-коде страницы внутри тега head. Современные браузеры могут автоматически искать favicon в корневом каталоге, но явное указание в коде снижает риск ошибок и позволяет задавать разные иконки для разных разделов сайта.

Примеры подключения:

Десктоп (ico)  <link rel="icon" type="image/ico" href="favicon.ico">

Декстоп (png)  <link rel="icon" type="image/png" href="favicon.png">

Apple  <link rel="apple-touch-icon" href="apple-touch-favicon.png">

Safari  <link rel=”mask-icon” href=”icon.svg”>

Андроид  <link rel="shortcut icon" href="favicon.png">

Для устройств Apple углы иконки могут автоматически скругляться. Раньше для управления этим поведением использовали apple-touch-icon-precomposed, но на современных проектах чаще достаточно корректно подготовить саму иконку с безопасными отступами от краев.

Проверка работы фавикона на разных устройствах

После установки favicon нужно проверить, корректно ли он открывается и индексируется. Для начала убедитесь, что файл доступен для поисковых роботов и пользователей.

Ссылка на favicon не должна быть закрыта от индексации в файле robots.txt. Также файл должен отдавать корректный ответ сервера HTTP 200. Если сервер возвращает ошибку 404, 403, 500 или выполняет неправильный редирект, поисковые системы и браузеры могут не использовать иконку.

Проверить доступность favicon можно через браузер, инструменты разработчика, сервисы проверки ответа сервера или вебмастерские панели поисковых систем.

Также можно проверить, виден ли фавикон в поисковых сервисах. Для этого используются специальные адреса:

• для Яндекса:

http://favicon.yandex.net/favicon/mysite.ru

• для Google:

http://www.google.com/s2/favicons?domain=mysite.ru

Вместо mysite.ru нужно подставить домен вашего сайта.

Если у сайта нет фавикона или он настроен некорректно, Яндекс.Вебмастер может показать предупреждение об ошибке. Также в логах сервера может фиксироваться ошибка 404, если браузер или робот пытается найти favicon.ico, но файл отсутствует.

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

Запомните

• Формат .ico постепенно устаревает, но все еще может использоваться для совместимости со старыми браузерами. Для современных сайтов лучше дополнительно применять .svg и .png. Проверить поддержку форматов можно через caniuse.com.
• Раньше было достаточно создать один favicon размером 16×16 пикселей. Сейчас лучше подготовить набор иконок разных размеров для браузеров, поисковых систем, мобильных устройств и домашних экранов. Если загрузить только один размер, браузеры могут масштабировать его автоматически, но результат не всегда будет качественным.
• Создавайте минимум две версии фавикона: с прозрачным и непрозрачным фоном. Иконка отображается в разных интерфейсах, и заранее невозможно точно предсказать, на каком фоне ее увидит пользователь.
• Для создания favicon можно использовать Adobe Photoshop, Figma, realfavicongenerator.net, favicon.cc, Favicon.io и другие инструменты. Удобнее всего генерировать набор иконок сразу для всех основных браузеров и мобильных платформ.
• Готовые файлы нужно разместить в корневом каталоге сайта или прописать ссылки на них в теге head. Если для отдельных разделов сайта нужны разные иконки, их можно задать на уровне конкретных страниц.
• Чтобы пользователи могли сохранять сайт как приложение на главный экран мобильного устройства, создайте веб-манифест и подключите его к HTML-коду сайта.
• После установки обязательно проверьте корректность индексации. Файл favicon должен быть доступен для роботов, не закрыт в robots.txt и отдавать ответ сервера HTTP 200.

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