ГлавнаяИнструментыГенератор фавикона

Генератор фавикона

Загрузите картинку — инструмент нарежет её во все размеры, которые действительно нужны сайту, соберёт favicon.ico и выдаст готовый код для head. Отдельно покажет, как иконка выглядит во вкладке браузера в реальных шестнадцати пикселях: именно там разваливается большинство логотипов. Файл обрабатывается в браузере и никуда не отправляется.

Перетащите картинку сюда

PNG, JPG, WebP или SVG. Лучше квадратную и контрастную — иконка будет 16 пикселей.

Всё считается в браузере. Картинка не загружается на сервер: она читается локально, перерисовывается на canvas и сразу отдаётся вам. Это же означает, что можно спокойно прогонять логотипы, которые ещё не опубликованы.

Какие размеры на самом деле нужны

Генераторы любят выдавать двадцать файлов. На практике хватает пяти, остальное — наследие старых устройств.

16×16 и 32×32. Вкладка браузера и закладки. Главный размер: именно его человек видит каждый день, и именно в нём разваливается детализированный логотип.
48×48. Ярлык на рабочем столе и часть интерфейсов Windows.
180×180. Иконка на домашнем экране iPhone и iPad (apple-touch-icon). Без неё iOS обрежет скриншот страницы, и получится каша.
192×192 и 512×512. Android и веб-манифест, если сайт ставится на домашний экран.

Формат .ico нужен по одной причине: старые браузеры и часть сервисов ищут файл /favicon.ico в корне сайта, даже если в коде указано другое. Положите его туда — это снимает вопрос раз и навсегда.

Про сам термин и его роль есть короткая справка в глоссарии — фавикон.

Три ошибки, из-за которых иконка не появляется

Браузер держит старую иконку. Фавиконки кэшируются агрессивнее всего остального. Проверять нужно в режиме инкогнито или добавив к адресу иконки ?v=2.
Файл лежит не там. Путь в коде относительный, а страница вложенная — иконка ищется в чужой папке. Указывайте путь от корня, со слеша.
Логотип не читается в 16 пикселях. Самая частая и самая незаметная: в макете всё хорошо, во вкладке — серое пятно. Смотрите на превью выше, оно показывает реальный размер.

Как пользоваться

  1. Перетащите файл в поле или нажмите «Выбрать файл». Подойдёт PNG, JPG, WebP или SVG; лучше квадратный и контрастный.
  2. Это главная проверка: если в шестнадцати пикселях ничего не разобрать, возьмите один элемент логотипа или первую букву.
  3. Каждую иконку можно скачать отдельно, а кнопка ниже собирает классический favicon.ico из трёх размеров.
  4. Готовый фрагмент лежит внизу — скопируйте и положите файлы в корень сайта.

Частые вопросы

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

Загрузите изображение в поле выше — инструмент сам впишет его в квадрат с сохранением пропорций и нарежет во все нужные размеры. Прозрачность PNG сохраняется. Останется скачать файлы и положить их в корень сайта.

Какие размеры фавикона нужны сайту?

Практический минимум: 16×16 и 32×32 для вкладки и закладок, 180×180 для домашнего экрана iOS, 192×192 и 512×512 для Android и веб-манифеста. Плюс favicon.ico в корне — его до сих пор запрашивают старые браузеры и часть сервисов.

Зачем нужен формат ICO, если есть PNG?

Браузеры и внешние сервисы по традиции обращаются к файлу /favicon.ico в корне домена, даже если в коде указаны PNG-иконки. Файл в корне закрывает эти запросы и убирает лишние 404 в логах.

Почему фавикон не меняется после замены файла?

Иконки кэшируются агрессивнее прочих файлов: браузер может показывать старую версию неделями. Проверяйте в режиме инкогнито или добавьте к пути версию, например /favicon.ico?v=2.

Какую картинку брать под иконку?

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

Влияет ли фавикон на SEO?

На ранжирование напрямую нет. Косвенно влияет на кликабельность: Google показывает иконку сайта в мобильной выдаче рядом со сниппетом, и узнаваемый значок выделяет результат среди соседей.

Файл загружается на сервер?

Нет. Всё работает прямо в браузере на JavaScript — введённые данные не уходят на сервер и нигде не сохраняются.

Ещё инструменты для SEO и маркетинга

Кластеризатор запросов, генераторы sitemap и robots.txt, минус-слова, разметка Schema.org и калькуляторы — в разделе инструментов.