Генератор фавиконовВсе размеры и готовый блок для head.
Загрузите логотип и получите настоящий многоразмерный favicon.ico, PNG-размеры, которые запрашивают браузеры, apple touch icon, маскируемую иконку для Android и заполненный site.webmanifest. Всё создаётся в этой вкладке, ваше изображение никуда не загружается.
Перетащите сюда ваш логотип
Или нажмите, чтобы выбрать файл. Лучше всего подходит квадратное изображение от 512 px.
PNG, JPG, WebP, SVG, ICO или GIF
Ваше изображение читается, масштабируется и упаковывается прямо в этой вкладке. Оно никогда не загружается, и сервер не участвует ни на одном этапе.
Какие размеры фавикона действительно нужны в 2026 году?
Гораздо меньше, чем наборы из двадцати файлов, которые до сих пор выдают большинство генераторов. Пять вариантов покрывают все важные браузеры и операционные системы, а всё остальное только утяжеляет ваш <head> без всякой пользы.
favicon.ico, 16, 32 и 48
Это по-прежнему файл, который браузер ищет в корне вашего домена ещё до того, как прочитает хоть строку HTML. Один контейнер хранит все три размера, поэтому этот конвертер фавиконов создаёт настоящий .ico, а не переименовывает PNG. 16 px нужен для вкладки, 32 px для retina-вкладки и панели закладок, 48 px для ярлыков Windows.
favicon.svg, если у вас есть вектор
Векторный фавикон чёткий в любом размере и даже может реагировать на системную тёмную тему через media query внутри файла. Браузеры, которые его понимают, предпочитают его файлу .ico. Если вы загрузите сюда SVG, он останется вектором: его не растеризуют и не вернут вам подделкой.
apple-touch-icon.png, 180×180
Иконка, которую iOS использует, когда кто-то добавляет ваш сайт на главный экран. Достаточно одного файла: начиная с iOS 8, система сама уменьшает одну иконку 180 px, так что старая куча файлов от apple-touch-icon-57x57 до 152x152 стала лишним грузом. Этот генератор apple touch icon создаёт один файл и делает его непрозрачным.
android-chrome 192 и 512, плюс maskable
Подключаются через site.webmanifest, а не через тег link. 192 px используется на главном экране, 512 px на заставке и в окне установки. Маскируемый вариант Android обрезает под форму, которую использует лаунчер, поэтому изображению нужен настоящий отступ.
mstile-150x150.png, хранить недорого
Закреплённые сайты в Windows всё ещё его читают. Он стоит одного маленького PNG и двух мета-тегов, поэтому включён в набор, но ничего не сломается, если вы его удалите. Это честный ответ, и поэтому он стоит последним в списке, а не подаётся как обязательный.
Почему файл .ico содержит несколько изображений?
Потому что .ico является форматом-контейнером, а не форматом изображения. Понимание этого отличает фавикон, который отображается везде, от того, который тихо ломается в Windows и в RSS-ридерах.
Сначала каталог, потом изображения
Файл начинается с шестибайтового заголовка, где указано, сколько изображений следует дальше, затем идёт по одной шестнадцатибайтовой записи на изображение с шириной, высотой, длиной в байтах и смещением в файле, и только потом сами данные изображений. Всё записано в порядке little-endian. Именно из-за этой структуры PNG, переименованный в .ico, не является .ico.
Потребитель сам выбирает нужный размер
Браузер, рисующий вкладку 16 px, читает каталог, находит запись 16 px и декодирует только её. Дайте ему одно изображение 512 px, и он уменьшит его при отрисовке грубым сэмплером с размытым результатом. Дайте ему специально подготовленную версию 16 px, и он использует её.
Внутри может быть PNG
Исходный формат хранил BMP с перевёрнутым порядком пикселей и отдельной однобитной маской прозрачности. Все браузеры и все версии Windows начиная с Vista также принимают PNG внутри контейнера, и именно его записывает этот конвертер ico: файлы меньше, настоящий альфа-канал, никакого устаревшего кодировщика.
Качество видно на 16 px
Если уменьшить логотип 1024 px сразу до 16 px, в выборку попадёт слишком мало исходных пикселей, и получится серое пятно. Этот инструмент уменьшает изображение вдвое на промежуточных холстах, с 1024 до 512, потом до 256 и так далее, чтобы учитывался каждый пиксель. Только благодаря этому маленький фавикон остаётся читаемым.
Нужен ли ещё apple-touch-icon?
Да, и это единственный файл, для которого правила отличаются от всех остальных иконок набора. Нужно знать две вещи, и обе уже учтены выше.
iOS выбрасывает вашу прозрачность
Safari накладывает иконку главного экрана на чёрный фон, а не на обои, поэтому логотип, который вы аккуратно экспортировали с прозрачным фоном, превращается в фигуру на чёрной плитке. Поэтому этот инструмент всегда создаёт apple-touch-icon с непрозрачным фоном, по умолчанию белым, даже если для всего остального вы выбрали прозрачный. Кроме того, начиная с iOS 7 система больше не добавляет свой глянец, так что люди видят ровно то, что вы загрузили.
Android обрезает, а не добавляет поля
Лаунчер Android берёт маскируемую иконку и обрезает её под свою форму: круг, сквиркл или скруглённый квадрат, в зависимости от телефона. Гарантированно сохраняются только центральные 80%, поэтому логотип, заполняющий холст от края до края, теряет края. Маскируемый файл здесь сохраняет отступ 20% при любом положении ползунка отступа, а круглое превью показывает, что именно оставит лаунчер.
Как добавить фавикон на сайт?
Два шага, и большинство ошибок случается на втором. Копируйте блок, который создаёт инструмент, а не пишите его по памяти.
Положите файлы в корень
Разместите favicon.ico и остальные файлы рядом с index.html, чтобы они открывались по адресу yoursite.com/favicon.ico. Браузеры сами запрашивают именно этот путь, без всяких указаний, поэтому размещение в корне важнее, чем тег link.
Вставьте блок в head каждой страницы
Не только главной. Посетитель, который попал на внутреннюю страницу и добавил её в закладки, должен получить правильную иконку. Если ваш сайт построен на шаблоне или фреймворке, блоку место в общем layout.
Объявите .ico без размера
Используйте rel="icon" href="/favicon.ico" sizes="any". Размеры уже находятся внутри контейнера, а жёстко прописанный в разметке размер мешает браузеру взять остальные. Строка с SVG идёт первой, чтобы браузеры, понимающие вектор, выбрали её.
Затем жёсткое обновление, дважды
Фавиконы агрессивно кэшируются и отдельно от страницы, поэтому старая иконка может днями переживать обычную перезагрузку. Прежде чем решить, что что-то сломалось, откройте файл напрямую по адресу yoursite.com/favicon.ico и убедитесь, что действительно отдаётся новый.
Хотите узнать, куда на самом деле ведёт существующий QR-код или короткая ссылка? Расшифруйте его с помощью QR-декодера
Нужна короткая ссылка для нового сайта? Создайте её в бесплатном сокращателе ссылок
Иконка: лишь малая часть первого впечатления.
Фавикон люди видят, когда уже находятся на вашем сайте. Ссылка, которая их туда привела, делает работу посложнее, и именно её обычно никто не измеряет. Если вам это пригодится, LinkScale как раз то, что мы создаём.
Видно, откуда пришёл визит
Клики, страны, устройства и что было дальше, по каждой ссылке, которую вы раздаёте, а не цифра в чужом дашборде.
Меняйте адрес назначения позже
Перенаправьте напечатанную или опубликованную ссылку в другое место уже после публикации, не прося никого обновить сохранённое.
Одна страница для всего
Страница link in bio, на которой есть магазин, форма записи и соцсети, чтобы единственная разрешённая ссылка работала на полную.
Вопросы о генераторе фавиконов
Остались вопросы?
ОнлайнЖивые люди, обычно отвечаем за несколько минут.
Он бесплатный: без аккаунта, без водяных знаков и без ограничений на количество созданных файлов. Ваше изображение никогда не загружается: оно читается встроенным в браузер FileReader, рисуется на canvas и упаковывается в Blob, всё внутри страницы. За этим инструментом нет никакого эндпоинта, так что отправлять его просто некуда. Это легко проверить: откройте вкладку «Сеть» в браузере во время работы или отключитесь от интернета после загрузки страницы.
Больше возможностей с LinkScale
Фавикон готов. Вторая половина: ссылка, которая приводит людей.
LinkScale: платформа для ссылок для тех, кто хочет знать, что происходит после клика, и менять адрес назначения, ничего не перепечатывая.
Free 14-day trial on every plan