Генератор фавиконок
Одно изображение на входе — полный пакет фавикон на выходе: все размеры PNG, настоящий .ico и HTML для подключения.
🔒 Ваши файлы никогда не покидают ваше устройство
Создайте генератором фавикон все иконки, нужные вашему сайту, из одного изображения. Современные сайты используют не один файл, а целый набор: 16 и 32 px для вкладок браузера, 48 px для устаревших случаев, 180 px для домашнего экрана iPhone и 192 плюс 512 px для установки на Android и PWA. Этот инструмент создаёт их все за один проход, плюс настоящий многоразрешённый файл .ico и HTML-фрагмент, который связывает весь набор вместе.
Всё генерируется локально в вашем браузере. Ваш логотип никогда не загружается, что важно, когда сайт, который вы делаете, ещё не публичный.
Начните с квадратного изображения, желательно 512 px или крупнее, и каждый размер будет чисто уменьшен из него. Простые, выразительные знаки переживают уменьшение до 16 px; мелкие детали и тонкий текст превращаются в кашу на размере вкладки, поэтому фавиконки на основе упрощённого логотипа всегда выглядят чётче.
Как создать фавиконку
- Перетащите квадратное изображение, 512x512 или крупнее для лучшего результата.
- Посмотрите, как иконка выглядит на маленьких размерах вкладок.
- Нажмите «Создать», чтобы построить все размеры PNG и файл .ico.
- Скачайте пакет фавиконок.
- Скопируйте предложенный HTML-фрагмент в секцию head вашего сайта и загрузите файлы.
Что в пакете и где используется каждый файл
Вы получаете PNG на 16, 32, 48, 180, 192 и 512 пикселей, плюс favicon.ico. Файлы 16 и 32 px покрывают вкладки браузера и закладки; 180 px — это apple-touch-icon, показываемый, когда кто-то добавляет ваш сайт на домашний экран iPhone; 192 и 512 px обслуживают Android и манифест PWA. Файл .ico объединяет несколько разрешений в одном файле и остаётся форматом, который некоторые браузеры и старые системы запрашивают по умолчанию по адресу /favicon.ico.
Сгенерированный HTML-фрагмент объявляет каждую иконку с правильными атрибутами rel и sizes. Вставьте его в элемент head, положите файлы по путям, на которые он ссылается, — и каждая платформа автоматически выберет нужный размер.
Почему одного файла фавиконки больше недостаточно
Старый мир — это один favicon.ico в корне вашего сайта. Сегодня вкладке браузера нужна иконка 16 или 32 px, ярлыку на домашнем экране iPhone нужен apple-touch-icon на 180 px, а устанавливаемому веб-приложению (PWA) на Android нужны PNG на 192 и 512 px, объявленные в его манифесте. Отдайте только один размер — и часть из них откатится на пустую или размытую заглушку.
Вот почему этот инструмент выдаёт полный набор, а не единственный файл. Каждая платформа тянется за нужным ей размером, поэтому ваш знак выглядит резким на вкладке, чётким на домашнем экране и правильным, когда кто-то устанавливает сайт как приложение, — вместо одного изображения, растянутого на задачи, под которые оно никогда не размерялось.
Как весь набор строится на вашем устройстве
Отталкиваясь от вашего исходного изображения, инструмент рисует его на элементе canvas в каждой требуемой размерности и экспортирует PNG для каждого размера с помощью Canvas API. Для .ico он упаковывает несколько из этих разрешений в единый настоящий контейнер ICO — реальный многокадровый формат, а не PNG с подменённым расширением.
Это различие с .ico важно, потому что некоторые браузеры и старые системы запрашивают /favicon.ico по соглашению и проверяют фактический формат файла; поддельный отклоняется. Всё изменение размера и кодирование ICO выполняется локально в вашем браузере, поэтому полный пакет собирается без единой загрузки на сервер.
Ваш брендинг никогда не загружается
Фавиконки часто генерируют рано, пока сайт ещё в разработке, а его логотип может быть конфиденциальным или невыпущенным. Загрузка этого знака в онлайн-сервис фавиконок означает передачу вашего брендинга третьей стороне до запуска.
Здесь изображение читается в страницу, и каждый файл производится в памяти вашего браузера, поэтому логотип остаётся на вашей машине. Скачайте пакет, положите его в свой проект — и ни одной копии никогда не существовало нигде, кроме вашего собственного компьютера.
Как спроектировать знак, переживающий 16 пикселей
Фавиконка часто показывается на 16 px — едва больше одного символа. Детализированные логотипы, тонкие штрихи и полные словесные знаки превращаются в кашу на этом размере, поэтому большинство брендов используют для фавиконки упрощённый символ, монограмму или одну выразительную букву, а не весь логотип.
Начните с квадратного изображения не меньше 512 px, чтобы каждый размер уменьшался из чистого исходника, отдавайте предпочтение высокому контрасту и массивным формам и оценивайте результат на 16 px по предпросмотру малого размера перед публикацией. Прозрачный фон обычно смотрится лучше всего на вкладке браузера, позволяя знаку чисто лечь на светлые или тёмные темы.
Как правильно подключить это к сайту
Сгенерировать файлы — лишь половина дела: их нужно объявить. Инструмент даёт вам HTML-фрагмент с нужными тегами link: атрибуты rel и sizes для PNG, ссылку apple-touch-icon для iOS и ссылку на favicon.ico. Вставьте его в head ваших страниц и разместите файлы по путям, на которые он ссылается.
Держите favicon.ico в корне сайта, поскольку браузеры запрашивают именно этот путь по соглашению даже без тега link. Частая причина, по которой новая фавиконка «не появляется», — это попросту агрессивное кэширование браузера: сделайте жёсткое обновление или проверьте в приватном окне, прежде чем считать, что что-то не так, ведь иконки вкладок кэшируются на редкость упорно.
Кому нужен генератор фавиконок
Всем, кто запускает или переоформляет сайт, — разработчикам, дизайнерам, владельцам малого бизнеса, тем, кто выпускает пет-проект или лендинг. Как только вы захотите свою иконку на вкладке браузера вместо стандартного глобуса, вам нужны хотя бы размеры для вкладок; как только вы захотите, чтобы она выглядела правильно при сохранении на телефон, вам нужны и крупные.
Полезно это и при аудите существующего сайта, который когда-либо выпустил только одинокую иконку 16 px или у которого нет apple-touch-icon и который теперь выглядит сломанным на мобильных домашних экранах. Пересоздайте полный набор из текущего логотипа, обновите фрагмент в head — и каждая платформа снова покрыта.
Часто задаваемые вопросы
Этот генератор фавиконок бесплатный?
Да, бесплатный и без регистрации. Создавайте наборы фавиконок для скольких угодно проектов.
Загружается ли мой логотип куда-либо?
Нет. Всё уменьшение и кодирование .ico происходит в вашем браузере, поэтому невыпущенный брендинг остаётся на вашей машине.
Я действительно получаю настоящий файл .ico?
Да, настоящий многоразрешённый .ico, а не PNG с переименованным расширением. Это различие важно, потому что некоторые программы проверяют формат файла и отклоняют поддельные .ico.
С какого изображения начать?
С квадратного PNG не меньше 512x512 с простым, контрастным дизайном. Прозрачный фон поддерживается и обычно выглядит лучше всего на вкладках браузера.
Почему мой логотип плохо выглядит на 16 пикселях?
Шестнадцать пикселей — это крошечно; словесные знаки и детализированные логотипы просто не переживают этого. Большинство брендов используют для фавиконки упрощённый символ или одну букву. Оценивайте по предпросмотру малого размера, прежде чем публиковать.
Покрывают ли эти размеры домашние экраны iPhone и PWA на Android?
Да. Иконка 180 px — ровно то, что iOS использует для «На экран Домой», а PNG 192 и 512 px — два размера, которые ждут Android и веб-манифесты приложений.