Что такое Генератор фавиконов всех размеров?

Загрузите изображение — или введите 1-3 буквы либо эмодзи — и получите все стандартные размеры, от ICO 16×16 до иконки App Store 1024×1024, плюс масштабируемый favicon.svg. Включает Apple Touch, Android Chrome, плитку MS и закреплённую вкладку Safari. Скачивайте по одному или всё сразу в ZIP.

Начните со своего логотипа или быстро соберите иконку из пары букв или эмодзи со своими цветами и шрифтом. Генератор создаёт 17 отдельных PNG-файлов, покрывающих классические размеры favicon (16, 32, 48, 64, 96, 128, 256), иконки Apple Touch (152, 167, 180), иконку App Store 1024, Android Chrome (192, 384), MS Tile (144, 150, 310) и PWA 512. Сетку можно отфильтровать по платформе, выбрать форму вывода — квадрат, скруглённая или круг — и проверить favicon на светлой и тёмной вкладках перед скачиванием. В каждом ZIP также лежит favicon.ico с несколькими разрешениями, масштабируемый favicon.svg, готовый HTML-сниппет и manifest.json с maskable purpose на размерах для Android; добавьте название и короткое имя, чтобы его можно было установить как PWA.

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

1. Загрузите квадратное изображение высокого разрешения (не менее 512×512px) в качестве источника — или переключитесь в текстовый режим и введите 1-3 буквы либо эмодзи, чтобы создать иконку мгновенно.
2. Просмотрите все размеры в сетке. Включайте или выключайте нужные в зависимости от платформ.
3. Скачайте отдельный размер, заберите favicon.ico с несколькими разрешениями или нажмите «Скачать все», чтобы получить ZIP со всеми выбранными размерами, ICO-комплектом, HTML-сниппетом и манифестом.

Когда использовать

• Запуск нового сайта, когда нужны фавиконы для всех браузеров и ОС.
• Ребрендинг: пересоздать все иконки PWA и домашнего экрана из нового логотипа.
• Добавление поддержки добавить на главный экран, чтобы Android корректно отрисовал maskable-иконку.

Результат

Веб-агентство загружает новый логотип клиента для ребрендинга. Получает 12 размеров для десктопных браузеров, iOS Safari, Android Chrome, плиток Windows и иконок манифеста PWA — всё готово к использованию.

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

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

Минимум 512×512 пикселей, квадратное, с логотипом по центру и небольшим отступом по краям. Меньший размер даст размытую PWA-иконку 512. Векторный источник (SVG, растеризованный в PNG 1024) подойдёт ещё лучше.

Почему существуют и PNG, и ICO?

Современные браузеры подключают PNG в нескольких размерах через link rel='icon' и всё чаще предпочитают единый масштабируемый SVG-фавикон. Файл .ico по-прежнему нужен старым Windows-браузерам, ряду хостингов и некоторым сценариям закреплённых сайтов. Генератор выдаёт все три формата: PNG для всех актуальных размеров, масштабируемый favicon.svg и favicon.ico, объединяющий кадры 16, 32 и 48px.

Что такое maskable-иконка и зачем она Android?

Android обрезает иконки домашнего экрана под круг, сквиркл или квадрат с закруглёнными углами — зависит от лаунчера. У maskable-иконки есть безопасная зона в центре (~80% полотна), где ключевые части логотипа никогда не обрежутся. Добавьте ~10% отступа вокруг источника.

Куда положить сгенерированные файлы?

Все PNG — в public-корень сайта (или /static), HTML-сниппет — в head страницы, ссылку на manifest.json тоже в head. Apple Touch и favicon линкуются в HTML head; PWA-иконки подтягиваются из manifest.

Зачем нужны опции фона и отступа?

Прозрачные логотипы хорошо смотрятся во вкладках, но Android или iOS добавляют свой закруглённый прямоугольник сзади — и логотип будто плавает. Сплошной фон плюс 8-12% отступа здесь дают предсказуемую отрисовку плитки во всех лаунчерах.

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