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

Что такое favicon

Классический favicon (иконка для сайта) – это ICO-файл с размером 16 × 16 с поддержкой 16 или 24-битных цветов и прозрачности. Намного позже он появился в формате 32 × 32, но старые браузеры все еще уменьшают его до 16 × 16.

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

Favicon Checker

Проверьте, есть ли на вашем сайте фавикон и как он отображается в разных браузерах

Must be a valid URL with http:// or https:// Check

Почему favicon имеет значение

Основная цель использования фавикона – это улучшение удобства пользования сайтом. Этот файл присутствует практически во всех современных популярных браузерах и вкладках браузера. Изначально фавикон был создан для быстрого визуального поиска необходимого сайта среди тысяч закладок в Интернете. Сейчас же он является удобным символом идентификации сайта при большом количестве открытых вкладок. А в некоторых поисковых системах (например Яндекс, а с 2019 года и Google), фавикон появляется и в результатах поисковой выдачи напротив каждого сайта.

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

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

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

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

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

Вы можете самостоятельно создать фавикон в фоторедакторе или же использовать онлайн сервисы.

• Favicon Generator;
• Favicon Generator ORG;
• Gen Favicon;
• Degraeve Favicon.

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

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

• Fresh Favicons;
• The Favicon Gallery;

Проверьте сайт на ошибки SEO

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

Аудит сайта

Создание иконки в Photoshop

Основная проблема в том, что Photoshop не поддерживает файлы формата «.ico». Поэтому необходимо загрузить и установить его плагин из Telegraphics.

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

После этого выберите папку IMAGE, перейдите к IMAGE SIZE и измените его на 16 × 16 пикселей. Не забудьте удостовериться, что вы не размываете его, нажав кнопку RESAMPLE IMAGE и BICUBIC SHARPER. Если вы удовлетворены результатами, откройте папку FILE и нажмите SAVE AS.

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

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

1. Загрузите фавикон на ваш сервер. Затем пропишите его адрес для FTP-сервера. Нажмите Enter, войдите в систему и просто загрузите файл в корневую папку.
2. Измените HTML-страницу сайта. Найдите и загрузите файл «header.php» или «index.html» с сервера. Если ваш сайт сделан на HTML, вы должны вставить код в область head файла index.html:

Если вы работаете с WordPress, вставьте код в область head файла header.php: