Favicon.kz
Обложка статьи

Фавикон без фона: прозрачность и фон

Прозрачный favicon выглядит аккуратно, но иногда становится «невидимым» на тёмных вкладках или теряет читаемость в маленьком размере. Вот как сделать правильно.

Где прозрачность работает лучше всего

  • SVG favicon — обычно лучшее качество и корректная прозрачность
  • PNG 32×32 / 16×16 — прозрачность поддерживается стабильно
  • ICO — поддержка прозрачности зависит от того, как сформирован файл

Когда фон всё-таки нужен

  • Если логотип очень тонкий/светлый — на белом фоне он «пропадает»
  • Если в маленьком размере остаются только тонкие линии
  • Если вы хотите одинаковую читаемость на светлой и тёмной теме
Хороший компромисс — добавить мягкий круг/квадратный фон (badge) и оставить знак внутри. Так favicon читается лучше.

Как быстро проверить на двух темах