Создавайте фавиконы и иконки веб-приложений мгновенно
Один источник и все файлы, которые нужны современному сайту: многоразмерный favicon.ico, векторный favicon.svg, иконки Apple touch, иконки лаунчера и маскируемые иконки Android, веб-манифест и фрагмент head, который всё это связывает.
Какие файлы создать
Вставьте это в свой <head>
Обновляется вместе с отмеченными файлами. Положите набор в корень сайта и вставьте этот блок.
<link rel="icon" href="/favicon.ico" sizes="32x32"> <link rel="icon" href="/favicon.svg" type="image/svg+xml"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest"> <meta name="theme-color" content="#3b82f6">
Как это работает
Выберите источник
Эмодзи, от одной до трёх букв или собственный логотип. Загрузка файла только откладывает его: ничего не создаётся, пока вы не попросите.
Оформите подложку
Форма, сплошной цвет или градиент, рамка и отступ. Предпросмотр перерисовывается на каждое изменение.
Разместите вручную
Тяните мышью, крутите колесо для приближения к курсору, поворачивайте. Ctrl+Z отменяет любой шаг.
Отдайте набор
Скачайте ZIP, положите его в корень сайта и вставьте фрагмент для head.
Настоящий многокадровый ICO
Кадры 16, 32 и 48 пикселей записаны как 32-битный BMP с полноценной AND-маской, поэтому файл принимают и старые оболочки Windows, и строгие парсеры иконок.
Настоящий сквиркл
Скруглённая подложка — это суперэллипс, та же семья кривых, что iOS использует для иконок приложений, а не скруглённый прямоугольник, притворяющийся им.
Векторный favicon.svg
Иконки из эмодзи и букв экспортируются настоящей векторной разметкой, поэтому остаются чёткими на любом экране и в тёмной теме.
Правильная touch-иконка для iOS
Иконка Apple сводится на выбранный вами цвет, потому что iOS рисует прозрачность на домашнем экране сплошным чёрным.
Связка с остальными инструментами
Отправьте готовую иконку сразу на сжатие, обрезку, конвертацию или удаление фона, не скачивая и не загружая её заново.
Ничего не покидает вкладку
Canvas и упаковщик ZIP работают в вашем браузере. Без загрузок, без API, без аккаунта, и всё продолжает работать офлайн.
Один рендер в 1024 пикселя и корректное уменьшение
Рисовать эмодзи прямо в кадре 16 пикселей — вот почему большинство сгенерированных фавиконов выглядят кашей: цветные шрифты эмодзи откатываются на самый мелкий растровый вариант. FaviconBolt рисует единственный мастер в 1024 пикселя и выводит из него все размеры, что на 16 пикселях оказывается на 87% ближе к идеальному уменьшению, чем рисование сразу в этом размере. Необязательный проход резкости по предумноженной альфе возвращает контраст контура, который съедает усреднение.
Полностью локальная генерация
Ваш логотип никогда не покидает компьютер. Отрисовка, двоичный ICO и ZIP собираются прямо на странице, а иллюстрации на этой странице — встроенный SVG, так что и с CDN ничего не подгружается.
Все файлы, которые браузер действительно запросит
Распакуйте ZIP в корень сайта и вставьте сгенерированный блок head. В манифесте стоит настоящее имя вашего сайта, его start URL и область, а не заглушка, поэтому окно установки покажет то, что нужно.
Кадры ICO — это BMP с AND-маской, а не вложенные потоки PNG, touch-иконка Apple отдаётся непрозрачной, а маскируемая иконка Android идёт под обрез, чтобы системная маска не обрезала рисунок дважды.
Частые вопросы
QЧто находится внутри файла favicon.ico?+
Три кадра иконки — 16x16, 32x32 и 48x48 — упакованы в один двоичный файл. Они хранятся как 32-битный BMP с однобитной AND-маской: этот формат понимает любой читатель иконок. Кадры со сжатием PNG поддерживаются только начиная с Windows Vista, и некоторые парсеры их до сих пор отвергают.
QПочему у touch-иконки Apple сплошной фон?+
iOS игнорирует альфа-канал у иконок домашнего экрана и накладывает всё прозрачное на чёрный. Свести touch-иконку на выбранный вами цвет — единственный способ управлять её видом после установки.
QДля чего нужна маскируемая иконка?+
Android накладывает собственную маску: в одних лаунчерах это круг, в других — сквиркл. Маскируемая иконка рисуется под обрез, а сам рисунок держится внутри безопасной зоны, чтобы система могла обрезать её, не задев логотип.
QМожно ли получить векторный favicon.svg?+
Да, в режимах эмодзи и букв это настоящая векторная разметка. Если вы загрузите SVG-логотип, он тоже останется векторным. Для растровой загрузки мы встраиваем в SVG рендер в 512 пикселей и прямо об этом говорим, а не делаем вид, что обвели JPEG.
QМожно ли разместить иконку вручную?+
Тяните рабочую область, чтобы двигать рисунок, крутите колесо для приближения к курсору и пользуйтесь ползунком поворота. Стрелки смещают, плюс и минус меняют масштаб, 0 сбрасывает, а Ctrl+Z идёт назад по истории. Удержание Alt показывает нетронутый оригинал.
QЧто-нибудь загружается на сервер?+
Нет. Файлы декодирует, рисует и упаковывает ваш собственный браузер. Обращений к серверу нет ни на одном шаге — именно поэтому инструмент продолжает работать при отключённой сети.