Генератор фавикона
Фавикон должен оставаться разборчивым в размере 16 пикселей — мелкие детали и длинные надписи там превращаются в кашу. Инструмент рисует иконку в 512 и уменьшает её: так край получается чище, чем при рисовании сразу в мелком размере.
32 — вкладка браузера, 180 — значок на экране телефона, 512 — манифест.
<link rel="icon" href="/favicon-32.png" sizes="32x32" /> <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
Каким должен быть фавикон
Значок живёт в размере 16–32 пикселя: во вкладке браузера, в списке закладок, в истории. На этой площади помещается один элемент — буква, простой знак или силуэт. Логотип с надписью, мелкими деталями или градиентом превращается там в цветное пятно, по которому вкладку не найти.
Второе требование — контраст. Браузеры показывают вкладки и на светлом, и на тёмном фоне, поэтому светло-серый значок на белом просто исчезает. Берите насыщенный фон и светлый символ либо наоборот: тогда иконка читается в обеих темах.
Как пользоваться
- Введите букву или эмодзи — обычно это первая буква названия.
- Выберите цвет фона и форму: круг или скруглённый квадрат.
- Посмотрите на превью в мелком размере: если символ сливается, поменяйте контраст.
- Скачайте файл и подключите его к сайту. В Zorava достаточно попросить агента.
Частые ошибки
- Загружают полный логотип с названием — во вкладке от него остаётся полоска.
- Берут прозрачный фон: на тёмной теме тёмный символ пропадает.
- Ставят фотографию: мелкие детали превращаются в шум.
- Забывают подключить файл и удивляются, что значок не появился.
Частые вопросы
Какой размер нужен?
Достаточно квадратного изображения 512×512 — браузеры сами уменьшат его под нужный размер. Инструмент рисует именно в этом размере и отдаёт готовый файл.
В каком формате сохранять?
PNG или SVG понимают все современные браузеры. Отдельный ICO сегодня не обязателен.
Почему новый значок не появился?
Чаще всего это кэш браузера — проверьте в режиме инкогнито. Если и там пусто, файл не подключён к странице.