Полноценный набор favicon — это больше одного файла: браузерам нужен многоразмерный .ico, iOS нужен apple-touch-icon 180 px, Android нужны PNG 192 и 512 px плюс web-манифест. Этот инструмент отрисовывает их все из одного изображения и упаковывает в один ZIP вместе с точными HTML-тегами для вставки в ваш <head>.
Превью показывает вашу иконку в реальных 16, 32 и 48 px, чтобы вы убедились, что она остаётся узнаваемой в крошечных размерах, прежде чем публиковать.
Как пользоваться
- Добавьте логотипЛучше всего подходят квадратные изображения; остальные обрезаются по центру.
- Проверьте малые размерыПревью 16 px — это то, что большинство пользователей реально увидят во вкладке.
- Скачайте ZIPfavicon.ico, шесть PNG, site.webmanifest и html-snippet.txt, готовый к вставке.
Одно изображение на входе — полный набор фавиконок на выходе
Добавьте один логотип или иконку, и этот генератор строит полный набор, нужный современному сайту: многоразмерный favicon.ico, объединяющий версии 16, 32 и 48 пикселей, отдельные PNG на 16, 32, 48, 180 для Apple touch icon, а также 192 и 512 для установки на Android и PWA, плюс site.webmanifest. Всё скачивается одним ZIP, так что можно положить прямо в корень проекта.
Вы также получаете готовый к вставке фрагмент HTML для head с уже прописанными правильными тегами link и meta. Скопируйте его в свой шаблон, загрузите файлы — и фавиконка появляется во вкладках браузера, закладках и ярлыках на домашнем экране без ручного написания разметки.
Резкие иконки любого размера
Фавиконки безжалостно малы, поэтому генератор отрисовывает превью в натуральную величину на 16, 32 и 48 пикселей — ровно так, как их покажет вкладка браузера. Это позволяет поймать логотип, превращающийся в кашу на 16px, до того как вы его выкатите. Если исходное изображение не квадратное, инструмент центрирует и обрезает его, чтобы иконка оставалась сбалансированной, а не сплющенной.
Весь процесс работает в браузере из вашего исходного изображения, а значит, вы можете сгенерировать PNG-фавиконки и ICO из логотипа высокого разрешения без загрузки на сервер или аккаунта.
Для чего это используют
Запуск нового сайта — Сгенерируйте favicon.ico и все размеры PNG за один проход, чтобы вкладки и закладки выглядели законченно с первого дня.
Добавление иконки установки PWA — Экспортируйте PNG на 192 и 512 плюс site.webmanifest, чтобы ваше приложение устанавливалось с правильной иконкой на домашнем экране.
Apple touch icon — Создайте apple-touch-icon 180x180, чтобы закладки и домашние экраны iOS показывали чёткую плитку.
Ребрендинг существующего сайта — Прогоните один новый логотип через генератор и замените весь набор иконок разом.
Передача клиенту — Передайте единый ZIP с ico, PNG, манифестом и фрагментом head, чтобы разработчик просто вставил его.
Проверка читаемости в малом размере — Используйте превью 16px в натуральную величину, чтобы убедиться, что детальный логотип всё ещё читается как иконка.
Неквадратный логотип — Подайте широкий словесный знак и дайте центрированной обрезке превратить его в сбалансированную квадратную фавиконку.
Статический сайт или фреймворк-проект — Скопируйте сгенерированные теги head в свой шаблон Next, Astro или чистый HTML и выкатывайте.
Сгенерируйте полный набор фавиконов из одного изображения — в браузере, за один проход
Фавикон звучит как одинокая мелочь 16×16 пикселей на потом, и годами такой и был. Современные браузеры и платформы тихо превратили его в маленькое производство. Чтобы сделать всё как надо сегодня, вам нужны favicon.ico, россыпь PNG от 16px до 512px, иконка Apple touch для домашних экранов iOS, site.webmanifest, чтобы сайт можно было установить как приложение, и правильный блок тегов <link> и <meta> в вашем HTML <head>. Пропустите размер — и иконка вкладки выглядит размытой на retina-экране; пропустите манифест — и иконка «добавить на домашний экран» откатывается к скриншоту; ошибитесь в блоке тегов — и некоторые платформы проигнорируют всё целиком.
Это много кропотливого вывода для задачи, которую вы делаете раз за проект и потом забываете детали. IMG.DIY берёт одно исходное изображение и производит полный набор — .ico, каждый размер PNG, веб-манифест и готовый к вставке HTML-фрагмент, — меняя размеры целиком в вашем браузере через Canvas. Ваш логотип читается локально и отрисовывается в каждый целевой размер на устройстве; ничего не загружается. Для фирменного знака или логотипа невыпущенного продукта, который вы предпочли бы не выкладывать на сторонний сервер до запуска, эта локальная гарантия стоит того — и ничего не стоит.
Поскольку весь конвейер работает на стороне клиента, он также работает офлайн, как только PWA закешировано, так что можно перегенерировать иконки на защищённой рабочей машине или без соединения. Бесплатно, без аккаунта, без водяного знака, впечатанного в ваши иконки.
Чем это отличается
- Весь набор, не только .ico. ICO, PNG от 16 до 512, иконка Apple touch и
site.webmanifestв одном скачивании. - Готовый HTML для вставки. Точный блок
<link>/<meta>, который кладётся в ваш<head>, так что иконки действительно регистрируются во всех браузерах. - Ничего не загружается. Ваш логотип меняет размер локально — полезно, когда знак конфиденциален или до запуска.
- Один проход, без мастера. Подайте одно изображение, получите всё; никакого многошагового процесса с выбором платформ, которые потом надо изучать.
- Офлайн и чисто. Закешированное PWA, без регистрации, без водяного знака на любой сгенерированной иконке.
IMG.DIY против других генераторов фавиконов
| Аспект | favicon.io | realfavicongenerator.net | Вручную (дизайн-приложение + код) | IMG.DIY |
|---|---|---|---|---|
| Файлы загружаются | Да, на их сервер | Да, на их сервер | Нет, локально | Нет, остаётся в браузере |
| Полный набор (.ico + PNG + манифест) | Да | Да, очень тщательно | Собираете сами | Да |
| Предоставлен HTML-фрагмент | Да | Да, подробный | Пишете сами | Да |
| Шагов до результата | Немного | Больше (много опций) | Много | Один проход |
| Работает офлайн | Нет | Нет | Да | Да, после первого визита |
| Цена | Бесплатно | Бесплатный тариф; платные опции | Стоимость приложения + ваше время | Бесплатно |
| Требуется аккаунт | Нет | Нет | Нет | Нет |
Честно о конкурентах: realfavicongenerator отличен и по-настоящему более тщателен — он показывает вашу иконку на реальных платформах, обрабатывает крайние случаи вроде масок закреплённых вкладок Safari и тем и позволяет тонко настроить вид на каждой платформе. Если вам нужен такой уровень контроля и вы не против загрузить изображение, это отличный выбор. favicon.io быстр, прост и тоже производит крепкий набор. Отличие IMG.DIY — сочетание полного вывода с отсутствием загрузки и одним проходом: вы получаете те же практические результаты — ico, PNG, манифест и HTML для подключения — без того, чтобы логотип покидал браузер, и без прохождения мастера настройки. Для «у меня есть логотип, дай мне всё, что нужно вставить, и не отправляй мой файл никуда» это то самое.
Почему IMG.DIY
Полный набор
ICO + PNG 16/32/48/180/192/512 + манифест.
HTML для вставки
Точные теги link включены в виде текстового файла.
Превью в реальном размере
Смотрите иконку в настоящих 16/32/48 px.
Приватно
Ваш логотип не покидает браузер.