Toolrack

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

Работает офлайнНичего не загружаетсяБесплатно, без регистрации
Перетащите квадратное изображениеили кликните — PNG, JPG, WebP; лучше от 512×512

Масштабирование и сборка ICO идут в этой вкладке. Картинка никогда не загружается.

Одна квадратная картинка на входе — все фавиконки сайта на выходе: настоящий многоразмерный .ico для браузеров и поисковой выдачи плюс PNG-размеры для телефонов и PWA-манифестов. Всё в браузере.

Уменьшение на каждый размер, а не один раз

Дешёвый способ сделать набор — уменьшить один раз и пересохранить; итог — мутная иконка в 16 px, потому что деталь, живущая в 512, в 16 превращается в кашу. Этот инструмент рендерит каждый целевой размер из оригинала независимо — в этом и состоит вся видимая разница между наборами, чёткими в панели вкладок, и похожими на пыль.

Сам контейнер .ico пишется в странице байт за байтом — каталог размеров со встроенными PNG, современная форма, которую читает каждый браузер с 2011 года, — так что скачиваете вы ровно один файл, готовый для корня сайта.

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

Почему favicon.ico всё ещё важен?

Потому что его спрашивают по имени вещи вне вашего контроля: старые браузеры, RSS-читалки, корпоративные прокси и — главное — поисковики, которые берут /favicon.ico для иконки рядом с результатом. Здешний .ico несёт версии 16, 32 и 48 px в одном файле, каждая уменьшена отдельно, чтобы 16 px осталась чёткой.

Какие PNG-размеры реально нужны?

Реальность закрывают три: 180 px как apple-touch-icon для iOS, и 192 + 512 px для веб-манифеста, который читают Android и окна установки. HTML-фрагмент под превью подключает все.

Каким должен быть исходник?

Квадрат с одной смелой формой и минимумом текста — в 16 px слова превращаются в шум. Начинайте от 512×512: уменьшение сохраняет качество, увеличение выдумывает пиксели. Прозрачный фон переживает все размеры.

Нужен ли ещё и SVG-фавикон?

Приятно, но не обязательно: современные браузеры принимают SVG-иконку, адаптирующуюся к тёмным вкладкам, однако все они же используют и сделанные здесь файлы. Сначала выкладывайте эти; SVG добавьте, когда у логотипа есть чистый вектор.

Похожие инструменты