Что такое Создание иконок?

Конструктор иконок позволяет создавать простые профессиональные иконки для приложений, сайтов и фавиконов. Комбинируйте фигуры, буквы и цвета на сетке, при желании заливайте фон двухцветным градиентом и экспортируйте в нескольких размерах (от 16×16 до 512×512) в PNG, SVG, многоразмерном .ico или сразу всем комплектом favicon в ZIP.

В качестве основы выбирается круг, квадрат или закруглённый квадрат, задаются цвет фона и переднего плана, поверх ставится одна буква или один из встроенных символов (галочка, звезда, стрелка, сердце, плюс). Тонкая подстройка размера шрифта и смещения помогает поставить знак точно по центру, а экспорт сразу выдаёт шесть стандартных размеров — от 16×16 для фавикона до 512×512 для манифеста PWA.

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

1. Шаг 1 — Выберите базовую фигуру (круг, квадрат, скруглённый квадрат) и задайте цвет фона.
2. Шаг 2 — Добавьте букву, символ или простую фигуру поверх основы. Настройте цвет, размер и положение переднего плана.
3. Шаг 3 — Просмотрите иконку в нескольких размерах и экспортируйте как PNG (16, 32, 48, 128, 256, 512 пикс.), SVG, .ico или скачайте полный ZIP-комплект favicon вместе с готовым к вставке HTML-фрагментом.

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

• Сгенерировать фавикон для пет-проекта, не открывая Figma и не покупая набор иконок.
• Сделать временную иконку Android- или iOS-приложения для прототипа до готового арт-материала.
• Сделать монограмму (инициал на цветном квадрате) для личного сайта или аватарки в GitHub.

Результат

Разработчик создаёт фавикон для приложения списка дел: синий скруглённый квадрат (#3B82F6) с белой галочкой, экспортированный как PNG 32×32 для вкладки браузера и PNG 512×512 для манифеста PWA.

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

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

Как минимум PNG 32×32 для вкладок десктопных браузеров и 180×180 (или 192×192) для домашнего экрана iOS и ярлыков Android. Если это PWA, добавьте 512×512 для манифеста. Кнопка «Экспортировать все» сразу формирует полный набор.

Экспортировать SVG или PNG?

SVG идеально масштабируется и подходит для иконок внутри приложения, используемых в разных размерах, например логотипа в сайдбаре. PNG обязателен для фавиконов, магазинов приложений и любой площадки, не принимающей вектор. В меню экспорта доступны оба варианта.

Можно ли поставить своё изображение или символ вместо встроенных?

Да. Переключите наложение в режим «Изображение» и загрузите PNG, JPG, SVG или WebP — оно обрежется по выбранной форме, а перед экспортом его можно масштабировать, перемещать и поворачивать. Для быстрого значка режим «Буква» принимает любой символ, включая вставленный эмодзи. Для полностью своего логотипа загрузите прозрачный SVG и выберите прозрачный фон.

Почему при экспорте в малом размере буква кажется смещённой?

Оптический центр шрифта редко совпадает с геометрическим. Буквы с выносными элементами (g, p, y) или высокие заглавные смотрятся уравновешеннее, если сместить их на пару пикселей от математического центра. Перед экспортом подкрутите ползунки Offset X и Offset Y.

Совпадает ли закруглённый квадрат с системной формой iOS или Android?

Это обобщённый закруглённый квадрат, близкий к стилю iOS. И Android (круг, squircle, капля), и iOS накладывают на иконку свою адаптивную маску, так что лучше делать дизайн «навылет» и доверить системе обрезку под её текущую форму.

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