/tool/favicon-generator/ работает иконки режет браузер, чужой сайт открывает наш сервер
Дайте картинку, SVG, букву или эмодзи — инструмент нарежет полный набор иконок, соберёт favicon.ico из пяти кадров, favicon.svg со светлым и тёмным вариантом, site.webmanifest и maskable-иконку под маску Android, а потом сложит всё в один архив и напишет код для head. Рядом показано, как иконка выглядит во вкладке, в закладках, в выдаче Google и на домашнем экране. Всё это делает браузер: файл никуда не загружается. Наружу ходит только проверка чужого сайта в последней секции — и только по кнопке.
Картинка лучше квадратная и от 512 px: из большой можно сделать маленькую, наоборот — нет. Логотипа нет — возьмите букву или эмодзи, это отдельные режимы.
Кадры нарисованы в натуральную величину теми же цветами, какими рисуют настоящие обозреватели и телефоны. Плитка 16 × 16 в сетке выше показывает файл, а здесь видно, что с ним делает окружение.
Выберите картинку, букву или эмодзи — кадры нарисуются здесь.
Вкладка, светлая тема
Вкладка, тёмная тема
Панель закладок
Строка выдачи Google
Домашний экран iOS
Скругление 22,37 % от стороны — та самая форма, которой iOS режет apple-touch-icon. Своё скругление задавать не нужно: система наложит собственное поверх.
Домашний экран Android
Здесь показана круглая маска — самая тесная из ходовых. Что останется под остальными, видно ниже.
Маскируемая иконка и безопасная зона
Пунктиром обведены центральные 66 % — то, что не обрежет ни одна маска. Всё, что вышло за её пределы, на части прошивок пропадёт.
Строки собираются из того, что реально нарезано: выключили тёмный вариант — строки про него не будет. Файлы кладутся в корень сайта; положите в другую папку — поправьте пути.
Манифест уже лежит в архиве вместе с иконками — отдельно его качать не нужно.
Без строки rel="manifest" в head иконки 192 и 512 не подключены ничем и просто лежат в корне мёртвым грузом.
Разбирает head страницы: какие иконки объявлены ссылками, отвечает ли каждая, какого размера отдаётся на самом деле, читается ли манифест и стоит ли theme-color. Полезно перед тем, как что-то менять: половина сайтов держит один favicon.ico из нулевых.
Наш сервер пройдёт по перенаправлениям, прочитает head конечной страницы, сходит по каждой объявленной ссылке и прочитает манифест. Настоящую сторону кадров дозамеряет обозреватель: чужую картинку он грузит напрямую, и natural-размеры у неё честные.
Ничего не проверено
Введите адрес и нажмите «Проверить».
Объявлено в head
Корень, манифест, тема
Чего не хватает
Разбирается ровно тот адрес, который вы дали, — обычно главная; на других страницах иконки бывают объявлены иначе.
Файл, который лежит в корне, но не объявлен ссылкой, в списке не появится: исключение — /favicon.ico
и /apple-touch-icon.png, их спрашивают и без head, поэтому они проверяются всегда.
Выберите, из чего делать: картинка или SVG, буква, эмодзи. Для картинки лучше квадрат от 512 px — из большой можно сделать маленькую, наоборот не выйдет.
Если картинка снята или отсканирована, обрежьте лишнее выделением, поверните и уберите белый фон — всё это в блоке «Обрезка, поворот, чистка фона». После этого рисунок займёт кадр целиком, а не будет тонуть в полях.
Посмотрите на кадр 16 × 16 и на предпросмотр вкладки. Если там уже ничего не разобрать, упростите рисунок: на этом размере живёт одна буква или один силуэт, а не логотип целиком.
Задайте фон. Прозрачный годится, если иконка должна лечь и на светлую, и на тёмную панель; цветной — если рисунок сам светлый. Отдельным полем задаётся фон под apple-touch-icon: iOS прозрачность не поддерживает.
Впишите название сайта в блок манифеста и проверьте предпросмотр Android: под круглой маской у иконки без поля срезает углы. Маскируемый вариант это и лечит.
Нажмите «Скачать всё архивом», распакуйте его в корень сайта и вставьте код из блока «Код для head» — вкладку выберите под свою систему.
Через сутки после выкладки проверьте себя же в последней секции: она прочитает head вашего сайта и скажет, что там объявлено, что из объявленного отвечает и какого размера отдаётся, — а не что вы собирались положить.
Сторона рисунка = размер иконки × (1 − 2 × поле)
Файл .ico собирается вручную: заголовок, таблица из пяти записей и пять PNG-кадров — 16, 24, 32, 48 и 64. Такой .ico понимают все браузеры, где PNG внутри ico поддерживается, а прозрачность в нём сохраняется. Архив собирается тем же способом: методом «без сжатия», потому что PNG внутри уже сжаты, и второй проход дал бы десятые доли процента.
Исходные данные — те же, что стоят в полях по умолчанию: их можно пересчитать в уме и убедиться, что инструмент не врёт.
Поле съедает по 10 % с каждой стороны: 32 × 0,1 = 3,2 px слева и столько же справа.
Под сам рисунок остаётся 32 − 3,2 − 3,2 = 25,6 px.
Это и есть формула: 32 × (1 − 2 × 0,1) = 32 × 0,8 = 25,6.
У маскируемой иконки поле всегда 20 %: 512 × 0,6 = 307 px под рисунок и 102 px запаса с каждой стороны — ровно столько, сколько может срезать маска.
Рисунок ляжет в квадрат 25,6 × 25,6 px по центру кадра 32 × 32. Исходник ужмётся ровно в двадцать раз: 512 ÷ 25,6 = 20.
PNG всех размеров (16, 32, 48, 64, 180, 192, 512), maskable-иконка 512, favicon.ico из пяти кадров, favicon.svg, при включённой тёмной теме favicon-dark.svg, site.webmanifest и readme.txt с кодом для head и напоминанием, куда что класть. Архив собирается прямо в браузере методом «без сжатия»: PNG внутри уже сжаты.
Потому что часть браузеров по привычке запрашивает /favicon.ico с корня сайта, даже если в head про него ничего не написано. Один файл в корне закрывает этот запрос и убирает из логов лишнюю ошибку 404. В него кладутся кадры 16, 24, 32, 48 и 64 — Windows берёт 24 и 48 для панели задач и списка файлов.
Это иконка одним файлом на любой размер: браузер сам отрисует её и на 16 px, и на дисплее с четырёхкратной плотностью. К нему же цепляется тёмный вариант через media="(prefers-color-scheme: dark)". Если вы дали SVG на входе, он и уйдёт в набор вектором. Если дали растр или эмодзи, внутрь SVG вкладывается PNG: файл остаётся один, но вектором от этого не становится — так честнее, чем обещать масштабирование, которого нет.
Android не показывает иконку как есть: он режет её своей маской — кругом, сквирклом или скруглённым квадратом, у каждой прошивки своя. Обычная иконка при этом теряет углы. Маскируемая рисуется с полем 20 % и сплошным фоном, поэтому под любой маской рисунок остаётся целым. В манифест она кладётся отдельной записью с "purpose": "maskable".
180 × 180 — размер иконки, которую забирает Safari при добавлении сайта на домашний экран iOS, по ссылке rel="apple-touch-icon". Прозрачность там не поддерживается: iOS подставляет под неё чёрный. Поэтому фон задаётся отдельным полем, даже если основной прозрачный.
Она впишется целиком: масштаб подберётся по длинной стороне, а по короткой останется фон. Если фон прозрачный, по бокам будут прозрачные поля. Можно и обрезать: проведите по картинке в блоке обрезки — выделится квадрат.
Из PNG выбрасываются необязательные куски, которые обозреватель дописывает от себя, а кадры до 64 px пробуются ещё и с палитрой: если в кадре не больше 256 цветов, он пересобирается восьмибитным, а при совсем малом числе цветов — четырёх-, двух- или однобитным. Из двух вариантов берётся меньший. На простой иконке это половина веса.
Картинка — правда. Она читается локально, режется в canvas, .ico, .svg и .zip собираются прямо в памяти вкладки. Наружу уходит ровно одно и только по кнопке: адрес чужого сайта в последней секции. Его открывает наш сервер — чужую разметку из браузера не прочитать. Настоящую сторону кадров дозамеряет уже сам браузер: картинку с чужого домена он грузит без спроса, а разметку — нет.
Сервер идёт по перенаправлениям до конечного адреса, читает head и достаёт оттуда все ссылки rel="icon", "shortcut icon", "apple-touch-icon", "mask-icon" и "manifest", а заодно meta name="theme-color". По каждой ссылке он ходит запросом и приносит код ответа и вес. Манифест читается целиком: из него видно, есть ли иконки 192 и 512 и есть ли запись с purpose "maskable". Отдельно спрашивается /favicon.ico в корне — его обозреватель просит и без head. Настоящую сторону кадров дозамеряет уже ваш обозреватель, загрузив картинки напрямую с чужого сайта.
Сначала посмотрите на код ответа в строке. Обычный случай: ссылка объявлена на адрес, которого больше нет, — у вас иконка лежит в кеше обозревателя и рисуется по памяти, а новый посетитель получит 404. Второй случай: иконка объявлена не на той странице, адрес которой вы дали. Третий: файл лежит в корне, но ссылки на него нет; из таких проверяются только /favicon.ico и /apple-touch-icon.png, потому что их спрашивают без всякого head.