Генератор favicon

Что такое генератор favicon?#

Favicon — это крошечный значок, который показывается во вкладке браузера, в списке закладок, в превью «добавить на главный экран» телефона и в плитке Windows. Неудобство в том, что «favicon» — это не один файл: разные платформы ожидают разные размеры и разные имена. Десктоп-браузер хочет классический favicon.ico, iOS хочет 180×180 apple-touch-icon.png, устанавливаемый PWA хочет 192 и 512 в site.webmanifest, а современные браузеры подбирают и отдельные PNG. Генерация всего этого вручную плюс теги <head>, всё это подключающие, — ровно тот тип нудной работы, который не стоит делать дважды руками.

Эта страница создаёт полный набор из одного источника: либо из вашего изображения, либо из буквы на сплошном фоне (удобно для быстрой «первой буквы» брендовой метки). Выберите нужные размеры, и инструмент упакует всё в один .zip — мульти-изображение ICO, отдельные PNG, webmanifest и HTML-фрагмент с точными тегами <link> и <meta> на вставку. Вся растеризация происходит в вашем браузере.

Как пользоваться#

1. Выберите Источник:
   • Изображение — перетащите (или выберите) любое примерно квадратное изображение. Оно отрисуется в каждый выбранный размер.
   • Буква — введите один-два символа (по умолчанию A), выберите Цвет фона (по умолчанию небесно-голубой) и Цвет текста (по умолчанию белый). Буква центрируется на фоне во всех размерах.
2. Отметьте нужные Размеры из 16, 32, 48, 180, 192, 512. Все шесть включены по умолчанию. Размер 48 живёт только внутри favicon.ico (без отдельного PNG), поэтому он автоматически включается в пакет при выбранных 16 и 32.
3. Следите за холстом Предпросмотр — он рендерит наибольший выбранный размер на шахматном фоне прозрачности, чтобы были видны прозрачные области.
4. Нажмите Скачать .zip. Архив содержит (для выбора всех размеров по умолчанию):
   • favicon.ico — мульти-изображение ICO, упаковывающее 16, 32 и 48 как встроенные PNG (формат Vista+, который принимает каждый современный браузер).
   • favicon-16x16.png, favicon-32x32.png — отдельные PNG.
   • apple-touch-icon.png — иконка iOS 180×180.
   • android-chrome-192x192.png, android-chrome-512x512.png — иконки PWA-манифеста.
   • site.webmanifest — со ссылками на иконки 192/512 и цветами темы и фона.
   • html-snippet.html — теги <link rel="icon">, <link rel="apple-touch-icon">, <link rel="manifest"> и <meta name="theme-color">.
5. Распакуйте в корень сайта, вставьте фрагмент в <head>, и иконки будут раздаваться из /.

Ключевые возможности#

• Полный набор с conventional-именами в одном zip. Имена файлов (favicon.ico, apple-touch-icon.png, android-chrome-512x512.png, site.webmanifest) совпадают с тем, что браузеры и сборщики ищут в корне сайта по умолчанию.
• Собственный ICO-кодировщик. Правильный мульти-изображение Vista+ ICO (ICONDIR + таблица ICONDIRENTRY + встроенные PNG-payload), написанный с нуля, а не стаб 32×32 с одним изображением.
• Режим буквы для мгновенных брендовых меток. Два символа, два пипетки цвета, готово — полезно для внутренних инструментов и демо, которым нужен узнаваемый значок за тридцать секунд.
• Только нужные вам файлы. Снимите галочку с размера — и ни его PNG, ни его записи в манифесте не появится; HTML-фрагмент перегенерируется соответственно.
• Готовый к вставке head-фрагмент. Точные строки <link> и <meta>, охватывающие только присутствующие ассеты, поэтому вы не вставляете ссылки на файлы, которые не сгенерировали.
• 100 % локально. Исходное изображение или буква растеризуются в браузере; zip собирается в браузере. Без загрузки.

Разбор примера#

Вам нужен favicon для пет-проекта под названием «Glide». Выберите Источник: Буква, введите G, задайте цвет фона #0ea5e9 и цвет текста #ffffff, оставьте все шесть размеров отмеченными и нажмите Скачать .zip. Распаковка даст:

favicon.ico
favicon-16x16.png
favicon-32x32.png
apple-touch-icon.png
android-chrome-192x192.png
android-chrome-512x512.png
site.webmanifest
html-snippet.html

В html-snippet.html ровно:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0ea5e9">

Скиньте эти восемь файлов в корень сайта, вставьте шесть строк в <head>, и каждая платформа — вкладка браузера, домашний экран iOS, Android PWA — подберёт правильный значок.

FAQ#

Почему нет отдельного PNG 48×48?#

48 используется только внутри favicon.ico (кое-какой Legacy-инструментарий читает 48-запись из ICO). Создание отдельного favicon-48x48.png было бы мёртвым грузом, который ни один браузер не запрашивает, поэтому инструмент упаковывает 48 в ICO и пропускает отдельный файл.

Действительно ли нужны все шесть размеров?#

Для полного покрытия — да. Если нужна только вкладка браузера, а не iOS или PWA, снимите 180, 192 и 512 — получите только ICO плюс PNG 16/32, куда более мелкий пакет. В фрагменте тогда будут только ссылки icon, без строк манифеста или apple-touch.

ICO описывается как «встроенный PNG» — это допустимо?#

Да. Начиная с Windows Vista, ICO может содержать PNG-payload (вместо старого формата BMP), и каждый современный браузер читает эту форму. Это избавляет от отдельного BMP-кодировщика и даёт более мелкие файлы для размера 48.

Буква выглядит не по центру на одном из размеров.#

Буква центрируется на холсте во всех размерах единообразным шрифтом; очень «квадратные» буквы (вроде M) и буквы с выносными элементами могут казаться чуть высоко или низко из-за метрик шрифта. Если требуется пиксельно-точное центрирование, отрисуйте метку в редакторе изображений и используйте Источник: Изображение.