← Назад
Настройки сайта

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Создание favicon в сервисе favicon.cc

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

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

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

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

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

Рисуем фавикон

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

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

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

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

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

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

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

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

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

1. Почему мой фавикон не видно в поиске?

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

2. Можно ли ускорить процесс появления фавикона?

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

Итоги

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

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

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

Ищете конструктор чтобы собрать сайт или интернет-магазин?
Попробуйте mottor бесплатно