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

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

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

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

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

0₽

0₽

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

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

+4

+4

месяца

месяца

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

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

+12.000₽

+12.000₽

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

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

+3

+3

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

0₽

0₽

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

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

0₽

0₽

месяца

месяца

/год

/год

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

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

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

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

Рекомендованный размер фавикона 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 бесплатно
шаблон сайта доставки еды
шаблон интернет-магазина
шаблон интернет-магазина
шаблон-квиз строительство
шаблон сайта по ремонтуо
450+ шаблонов
ждут вас
Бесплатный конструктор сайта
Все шаблоны
Шаблон онлайн курс
Шаблон курс инвестиций
Шаблон доставка еды
Шаблон онлайн школа
Шаблон для портфолио
Шаблон лендинг вебинара
Шаблон интернет-магазин мебели
Одностраничный сайт
Многостраничный сайт
Создать сайт онлайн бесплатно самому
Создать квиз
Создать сайт бесплатно конструктор
Создать бесплатно интернет магазин
Создать сайт конструктор
Конструктор сайта онлайн
Онлайн конструктор сайта бесплатно
Конструктор интернет магазинов
Конструктор страниц
Сайт конструктор бесплатно
Конструктор создания сайтов
бесплатный конструктор сайтов, лендингов и квизов
Документы:
Полезные ссылки:
Функциональность:
Функциональность:
О компании:
при поддержке Фонда Развития Интернет Инициатив
бесплатный конструктор сайтов, лендингов и квизов
Бесплатный звонок по России
Шаблоны:
Популярные запросы:
support@lpmotor.ru
О компании и сервисе
Тур по сервису
Блог
Инструкции
Договор-оферта
Партнёрская программа
Шаблоны
Видеоинструкции
Согласие
Тарифы и услуги
Обновления
Политика конфиденциальности
Сделано на mottor
Техподдержка
Платная поддержка
Инструкция по установке