← Назад

Настройки сайта

Что такое фавикон и как его создать

Сложность ∙ Легко

Фавикон — это маленькая картинка (иконка), которая показывается рядом с названием страницы во вкладке браузера и поисковой выдаче. В этой статье мы разберём, как можно создать такую иконку для сайта.

Фавикон во вкладке браузера

Аудит вашего сайта или консультация по редактору

0₽

подключенного тарифа для конструктор сайтов

+4

месяца

промокод на продвижение в сетях Яндекс

+12.000₽

тарифа чат-ботов, автоворонок и мобильных приложений

+3

Бесплатный домен в зоне .ru/.рф

0₽

Бесплатный шаблон сайта под вашу сферу бизнеса

0₽

месяца

/год

Забронировать предложение

Получите подарки от mottor при подключении тарифа

спецпредложение

В поисковых системах, например, в Яндексе фавиконы показываются рядом с описанием сайта вот тут:

Фавикон во вкладке браузера

Рекомендованный размер фавикона 16х16 пикселей, а формат файла: .ico

Выберите интересующий раздел:

Как создать фавикон →
Как сделать из готовой картинки фавикон →
Как нарисовать фавикон самому →
Когда иконка появится в поиске →

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

Как сделать из картинки фавикон →

Как нарисовать фавикон самому →

Когда иконка появится в поиске →

Создание фавикона: нарисовать самому или конвертировать готовую картинку?

Можно использовать специальный сервис по созданию фавиконов, мы рекомендуем www.favicon.cc

Как выглядит редактор фавиконов favicon.cc

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

Давайте посмотрим на примере картинки с цветком. Вот так он выглядит в хорошем качестве:

Заходим в www.favicon.cc и нажимаем на кнопку "Import image", чтобы загрузить картинку

Загружаем картинку и выбираем вариант с сохранением пропорций картинки, как показано на скриншоте ниже, затем нажимаем "Upload", чтобы загрузить

Картинка сильно потеряет в качестве и в редакторе фавиконов будет выглядеть вот так:

НО! Обратите внимание, как картинка будет выглядеть в самой вкладке браузера. Наш цветок вполне можно опознать :)

Отображение готового фавикона во вкладке браузера

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

Сохранить готовый фавикон можно по кнопке "Download Favicon"

Вы можете нарисовать фавикон самостоятельно по точкам

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

А если удерживать левую кнопку мыши, то можно рисовать, не отрываясь

Удалить ненужные квадраты можно, включив "transparent". Эта кнопка находится чуть ниже цветовой палитры

Закрасим пространство внутри и готово!

В итоге фавикон будет выглядеть вот так:

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

Вот так можно создавать фавиконы в этом редакторе. Попробуйте, это очень просто! :)

Останется только загрузить фавикон в настройках вашего сайта. В mottor, например, это делается в разделе Общие — "Иконка для сайта"

Где загружается фавикон в mottor

Кстати, как создать favicon и установить его в mottor можно посмотреть в этом коротком видео

Когда иконка появится в поиске?

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

Часто задаваемые вопросы

Иконка отображается в поиске после индексации ее поисковым роботом.
После того как вы добавили иконку и она показывается на вкладке браузера — нужно подождать пока поисковик проиндексирует ее и выставит в поисковую выдачу.
Сроки индексирования можно узнать у саппорта поискового сервиса.
Обычно это период от 1 до 20 недель.

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

Итоги

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

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

— в чате на сайте lpmotor.ru
— по телефону 8 800 200 51 47 (звонки по РФ бесплатные)
— в Телеграм: https://t.me/lpmotorchat