Генератор фавикона
Загрузите картинку — инструмент нарежет её во все размеры, которые действительно нужны сайту, соберёт favicon.ico и выдаст готовый код для head.
Перетащите картинку сюда
PNG, JPG, WebP или SVG. Лучше квадратную и контрастную — иконка будет 16 пикселей.
Всё считается в браузере. Картинка не загружается на сервер: она читается локально, перерисовывается на canvas и сразу отдаётся вам. Это же означает, что можно спокойно прогонять логотипы, которые ещё не опубликованы.
Какие размеры на самом деле нужны
Генераторы любят выдавать двадцать файлов. На практике хватает пяти, остальное — наследие старых устройств.
Формат .ico нужен по одной причине: старые браузеры и часть сервисов ищут файл /favicon.ico в корне сайта, даже если в коде указано другое. Положите его туда — это снимает вопрос раз и навсегда.
Про сам термин и его роль есть короткая справка в глоссарии — фавикон.
Три ошибки, из-за которых иконка не появляется
?v=2.Что лежит в наборе и как браузер выбирает иконку
Инструмент вписывает картинку в квадрат, нарезает пять размеров и собирает файл favicon.ico, внутри которого лежат сразу три размера: браузер сам выберет подходящий. Формат ICO — контейнер, в нём с 2007 года могут храниться обычные PNG, поэтому файл весит немного. Отдельные PNG нужны для домашних экранов телефонов и веб-манифеста, а фрагмент кода для head связывает всё вместе.
Браузер выбирает иконку по объявленным размерам и по своим правилам: Chrome и Firefox берут ближайший подходящий размер из списка, Safari на iOS ищет apple-touch-icon, а старые программы и часть сервисов просто запрашивают /favicon.ico из корня, не читая код страницы. Поэтому файл в корне остаётся обязательным: без него в логах копятся ошибки 404 на каждый визит.
Google показывает иконку сайта в выдаче: на телефонах с 2019 года, на компьютере с 2023-го. Для этого иконка должна быть квадратной, размером кратным 48 пикселям и доступной роботу. Превью в шестнадцать пикселей на странице показывает то, что человек увидит во вкладке, и это самая надёжная проверка логотипа.
| Файл | Размер | Кто использует |
|---|---|---|
| favicon.ico | 16, 32, 48 | вкладка, закладки, старые программы |
| apple-touch-icon.png | 180 × 180 | домашний экран iPhone и iPad |
| icon-192.png, icon-512.png | 192, 512 | Android и веб-манифест |
| favicon.svg | любой | современные браузеры, тёмная тема |
От папки «Избранное» до строки в выдаче
Иконку сайта придумали в Microsoft для Internet Explorer 5 в марте 1999 года: при добавлении страницы в «Избранное» браузер запрашивал файл favicon.ico из корня сайта и показывал его рядом с названием. Отсюда и имя, favorites icon, и формат ICO, родной для Windows. Побочный эффект заметили сразу: по запросам к файлу вебмастера считали, сколько людей добавили сайт в закладки.
Стандарт закрепил тег link rel="icon", и иконку разрешили класть куда угодно и в любом формате. Вкладки в Firefox 2004 года сделали её главным способом различать открытые страницы. iPhone 2007 года добавил apple-touch-icon для домашнего экрана, Android и веб-манифест 2013 года — размеры 192 и 512. Векторные иконки браузеры научились показывать в 2015–2020 годах, и вместе с ними пришли иконки, которые меняются под тёмную тему.
Расширенные сниппеты с иконками в выдаче Google с 2019 года превратили фавикон из мелочи в элемент кликабельности: узнаваемый значок выделяет строку среди соседей. Так иконка, придуманная для папки закладок, стала частью поиска.
Проверка на 16 пикселях и файл в корне
Проверяйте логотип в превью на шестнадцать пикселей до того, как нарезать: если там пятно, берите один элемент знака или первую букву на цветном квадрате. Контраст важнее деталей, тонкие линии и градиенты в этом размере исчезают. Квадратный исходник от 512 пикселей избавит от размытия, привести любую картинку к квадрату поможет изменение размера фото.
Кладите favicon.ico в корень сайта независимо от того, что указано в коде, и следите за ответом сервера: проверка ответа сервера должна показать код 200 и тип image. После замены иконки добавьте к пути в коде версию вроде ?v=2 и проверьте в режиме инкогнито: браузеры держат старую иконку неделями.
Не используйте WebP для иконок: часть браузеров и сервисов его в этой роли не понимает, PNG и ICO работают везде. Прозрачный PNG под иконку лучше делать из исходника с прозрачностью, JPG с белым фоном её не вернёт; перевести форматы можно в конвертере PNG и JPG, а вес большой картинки перед нарезкой уменьшит сжатие фото.
| Размеров в наборе | 5 |
| Внутри favicon.ico | 16, 32, 48 |
| Домашний экран iOS | 180 × 180 |
| Выдача Google | кратно 48 |
| Обработка | в браузере |
| Internet Explorer 5 | 1999 |
| apple-touch-icon | 2007 |
| Иконки в выдаче | с 2019 |
Как пользоваться
Отдельно покажет, как иконка выглядит во вкладке браузера в реальных шестнадцати пикселях: именно там разваливается большинство логотипов. Файл обрабатывается в браузере и никуда не отправляется.
- Перетащите файл в поле или нажмите «Выбрать файл». Подойдёт PNG, JPG, WebP или SVG; лучше квадратный и контрастный.
- Это главная проверка: если в шестнадцати пикселях ничего не разобрать, возьмите один элемент логотипа или первую букву.
- Каждую иконку можно скачать отдельно, а кнопка ниже собирает классический favicon.ico из трёх размеров.
- Готовый фрагмент лежит внизу — скопируйте и положите файлы в корень сайта.
Частые вопросы
Как сделать фавикон из картинки?
Загрузите изображение в форму на этой странице — инструмент сам впишет его в квадрат с сохранением пропорций и нарежет во все нужные размеры. Прозрачность 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 — введённые данные не уходят на сервер и нигде не сохраняются.
Где этому учат
Skillbox
Академия Synergy
Нетология
GeekBrains
DigitalSkillsAcademy
VideoFormeПохожие инструменты
Пиксели вручную или готовый пресет: обложка ВК, превью YouTube, аватар, фото 3×4, печать 10×15. Пакетно, с обрезкой или полями.
ОткрытьОтвет сервера (HTTP-коды)Список URL → коды ответа 200/301/404, цепочки редиректов, финальный адрес и время ответа. Для аудита и чистки битых ссылок. До 30 адресов за раз.
ОткрытьPNG в JPG и обратноКонвертер картинок между PNG и JPG пачкой. Показывает вес до и после, предупреждает про прозрачность и даёт выбрать цвет подложки.
ОткрытьСжать фото до размераЗадайте вес — 100 КБ, 500 КБ, 1 МБ — и качество подберётся само. Пакетно, с автоуменьшением, если лимит жёсткий.
ОткрытьГенератор cron-выраженийСобирает строку crontab по расписанию и расшифровывает готовую по-русски. Показывает ближайшие запуски и предупреждает о ловушках.
ОткрытьКалькулятор средних и разбросаСреднее, медиана, мода, квартили и стандартное отклонение по совокупности и по выборке. Отдельно показывает выбросы за границами полутора межквартильных размахов.
ОткрытьЕщё утилиты
Фавикон и свой IP, конвертер цветов с проверкой контраста, ссылка WhatsApp, расчёты битрейта и PPI, компас и линейка — в разделе 16 утилит.