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

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

Что такое фавикон и зачем он нужен?

Фавикон – это иконка или значок сайта, который выводится в адресной строке браузера, в заголовке браузера рядом с Title, в закладках, в результатах поиска и ряде других мест. Впервые фавикон стал поддерживаться браузером Internet Explorer в 1999 году. В переводе favicon означает favotite icon, т.е. иконка для избранного.

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

На скриншоте ниже фавиконы указаны стрелочками:

фавиконы сайтов в результатах поиска

Стандартный размер фавикона – 16х16 пикселей для обычного дисплея и 32х32 пикселя для устройств с ретина-дисплеем. Ряд браузеров и устройств способны использовать в качестве иконок сайта изображения большего размера, вплоть до 144х144 пикселей. Есть брать стандартный размер фавикона 16х16 пикселей, то понятно, что какое-то сложное изображение на иконке сделать нельзя. Чтобы придумать привлекательный favicon для сайта, придется хорошо подумать.

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

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

Каким должен быть фавикон?

При создании значка для сайта необходимо соблюдать следующие рекомендации:

  1. Фавикон должен быть в стиле сайта.
  2. Передавать тематику сайта. Например, если вы торгуете шинами, на фавиконе можно изобразить колесо. Если продаете книги, то сделать иконку, похожую на книгу. Для поисковой системы в качестве фавиконки подойдет лупа.
  3. Фавикон должен привлекать внимание.
  4. Оптимально сделать простой для восприятия значок. Учитывая стандартный размер иконки, изобразить какой-то сложный предмет не получиться.
  5. Значок должен запоминаться.

Как сделать фавикон для сайта? Обзор онлайн-сервисов

Создать файл .ico можно при помощи специальных сервисов, которые мы разберем ниже. Если вы хотите поручить работу профессионалам, то найти недорогих дизайнеров для создания favotite icon можно на биржах фриланса, а также в магазине фриланс-услуг Kwork.ru. На последнем сайте можно заказать логотип для сайта с фавиконом в комплекте всего за 500 рублей.

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

сервис для создания фавиконок Favicon.cc

1. Favicon.cc

На сайте размещен редактор, в котором вы можете нарисовать фавиконку онлайн и посмотреть, как она будет выглядеть. Поле для рисования находится по центру экрана. Справа от него – палитра цветов. Под редактором находится поле с превью, которое позволяет посмотреть, как выглядит нарисованная фавиконка. Нажав на ссылку «Download favicon», вы скачаете готовую иконку в формате .ico (ссылка выделена красной стрелкой).

генератор фавиконок на Cy-pr.com

2. Создание Favicon на сайте Cy-pr.com

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

Например, вы нашли подходящее изображение какого-то предмета. Вы можете загрузить его на сайт и на его основе создать favicon.ico. Все просто – выбирайте файл и нажимаете на кнопку «Конвертировать». Ниже появляется иконка. Нажимаете на нее правой кнопкой мышки и сохраняете на своем компьютере файл.

редактор фавиконок на сайте Xiconeditor.com

3. Xiconeditor.com

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

Favicon.ru

4. Favicon.ru

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

Findicons.com

5. Findicons.com

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

Как установить фавикон на сайт?

Проще всего добавить файл в формате favicon.ico в корневую папку сайта. Например, фавикон данного блога находится по адресу http://adblogger.ru/favicon.ico

Там его найдет большинство браузеров и поисковых систем. Добавлять какие-либо команды в код страниц при этом не потребуется. Волшебство произойдет автоматически :)

FAQ по добавлению и замене фавиконок

1. Как поменять фавикон?

Замените файл favicon.ico в корневой папке сайта на новый вариант. Фавикон на сайте изменится автоматически на новый. В поисковых системах изменения произойдут после индексации новой иконки.

2. Как проверить фавикон сайта в Яндексе?

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

3. Как проверить наличие фавиконки в Google?

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

4. Можно ли размещать фавиконку не в корневой папке сайта?

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

5. Можно ли установить разные фавиконки для разных страниц сайта?

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

Полезные статьи по теме:





Rss Commenti

Нет ответов

Оставить комментарий







Реклама:


Создание и продвижение сайта – агентство Brave
© 2007 – 2017