– Читать 9 минут

Что такое favicon и как его создать?

ЧЕК-ЛИСТ: ТЕХНИЧЕСКАЯ ЧАСТЬ — ИСПРАВЛЕНИЕ

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

Содержание

Что такое favicon для сайта
Зачем нужен favicon
- Технические требования к фавиконам
Как создать favicon онлайн
Как добавить фавикон на сайт
Распространенные ошибки
FAQ

Заключение

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

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

Пример фавикона на сайте

А также в истории просмотров:

Фавиконы сайтов в истории браузера

В некоторых версиях браузера фавикон также появляется в адресной строке перед URL сайта. В выдаче Яндекса также отображаются фавиконы:

Фавиконы сайтов в Яндексе

Кроме логотипа, в фавикон для сайта иногда вставляют значок, символизирующий тематику ресурса, связанный с названием сайта, первую букву названия компании и т.п. Размер фавикона обычно составляет 32х32 или 16х16 пикселей.

Зачем нужен favicon

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

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

Пример сайта без фавикона

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

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

Узнаваемость. Favicon — это удобный поиск. Когда пользователь ищет нужную ему вкладку в браузере, страницу из закладок браузера или истории, первое, что бросается в глаза, — это иконка. Никто не обращает внимания на текст. Представим, что вы что-то ищите, когда в браузере открыто 20 вкладок: кроме иконки не будет видно практически ничего.

Фавиконы сайтов во вкладках браузера

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

Сайт без фавикона в выдаче Яндекса

Кстати, найти на сайте страницы, на которых отсутствует фавикон, можно с помощью инструмента «Аудит сайта» Serpstat.

SEO-аудит сайта с помощью Serpstat: обзор инструмента

Проверка фавикона в аудите Serpstat

Хотите узнать, как найти и обезвредить ошибки на сайте с помощью Serpstat?

Заказывайте бесплатную персональную демонстрацию сервиса, и наши специалисты вам все расскажут! ;)

Оставить заявку!

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

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

Формат фавикона различается в зависимости от того, для чего он предназначен:

для устаревших браузеров: favicon.ico такого размера:16х16, 32x32;
для современных браузеров: один фавикон SVG формата для светлой и темной версии. Большинство браузеров поддерживают SVG формат, который более эффективен для больших изображений;
для устройств Apple: фавикон размера 180×180 в формате PNG;
для устройств Android: фавикон 192x192 в формате PNG, используемый на главной странице сайта и 512x512 — для загрузки прогрессивных WEB-приложений.

Узнать, какие именно браузеры поддерживают современные форматы фавиконов можно с помощью сервиса Caniuse:

Сервис Can I Use для проверки поддержки различных фавиконов браузерами

Как создать фавикон онлайн

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

Все подобные сервисы предельно просты в использовании. Мы собрали несколько инструментов, с помощью которых вы быстро и бесплатно сделаете фавикон.

Pr-Cy.ru

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

Be1.ru

Есть возможность задать разрешение картинки (16х16 или 32х32 пикселя). Просто выберите картинку и нажмите «Конвертировать».

Favicon.by

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

Logaster.ru

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

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

Генератор фавикона Pr-Cy.ru

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

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

Однако для надежности при любом разрешении картинки рекомендуется вручную прописать вывод фавикона в HTML-коде страницы. Для этого:

Добавьте файл favicon.ico в корневую папку — каталог сайта.

Пропишите в коде HTML favicon в формате ico. Он выводится строкой shortcut icon:

<link href="http://ваш-сайт.ru/favicon.ico" type="image/x-icon"> 
<link rel="shortcut icon" href="http://ваш-сайт.ru/favicon.ico" type="image/x-icon">

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

<link rel="shortcut icon" href="http://www.yoursite.com/favicon.ico?v=2" />

Здесь значение v = 2 обозначает версию иконки. Увеличивайте его на единицу каждый раз, когда меняете картинку (v = 3, v = 4 и т.д.). Тогда браузер будет сразу отображать последнюю версию. После того, как вы определились с окончательным вариантом иконки, этот параметр можно смело удалять из кода.

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

Проверить, корректно ли работает фавикон в разных браузерах, можно используя онлайн-проверку для Яндекса и Google, доступную по указанным ниже ссылкам. Предварительно поменяйте «site.com» на название своего ресурса:

Яндекс – https://favicon.yandex.net/favicon/site.com;
Google – https://www.google.com/s2/favicons?domain=site.com

Проблемы в отображении фавикона могут быть связаны с такими причинами:

1. Отсутствует изображение фавикона в правильном формате в корневой папке сайта.
2. Неправильно прописан код фавикона на страницах ресурса.
3. Фавикон размыт или неуникален.
4. Файл с иконкой закрыт для сканирования поисковиками.
5. Сайт находится ниже 15 позиции в Яндекске — в этом случае фавикон не отображается.
6. Фавикон был загружен недавно — иногда на его отображение в выдаче может потребоваться несколько недель.

FAQ

В каком формате сохранять favicon?

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

Какого размера делать фавикон?

Стандартный размер фавикона 16x16 и 32x32. Для современных браузеров и мобильных устройств используются более крупные изображения:180x180, 192x192, 512X512.

Заключение

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

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

Эта статья — часть модуля «Список задач» в Serpstat

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

Начать работу со «Списком задач»

Сэкономьте время на изучении Serpstat

Хотите получить персональную демонстрацию сервиса, тестовый период или эффективные кейсы использования Serpstat?

Оставьте заявку и мы свяжемся с вами ;)

Оцените статью по 5-бальной шкале

4.78 из 5 на основе 16 оценок

Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.