Иконки и фавиконки

Иконки в вебе: SVG-спрайты, шрифтовые иконки, emoji и combos; фавиконки для всех платформ и возможности будущего.

Уровень: средний 9 разделов 1,5 часа

1. Иконка — не «картинка 16×16»

Иконка в интерфейсе — символ со смыслом. Современный стандарт — вектор: шрифты (svg/icon-font), inline-svg, символы Unicode/emoji. Главное — масштабируемость и консистентность стиля.

вектор (svg) — тянется без пикселизации;
однотонность для затемнения/состояний;
декостраницы без alt (alt=""), смысловые — с текстом.

2. Спрайт SVG

Один svg-файл со множеством <symbol>; в HTML — <svg><use href="sprite.svg#cart"/></svg>. Один запрос, кеш, стилизация мгновенная.

<svg class="icon" aria-hidden="true">
  <use href="/icons/sprite.svg#cart"></use>
</svg>

3. Инлайн-SVG

<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
  <path d="M12 19V5M5 12l7-7 7 7"/>
</svg>
<!-- это стрелка — цвет берётся из color: currentColor -->

Inline-svg в разметке — максимум контроля: currentColor красит одной строкой, анимация шрифтов и пр. Минус — разметка «весово» растёт.

4. Font Awesome и ему подобные

<link rel="stylesheet" href="https://site.cdn/fontawesome.min.css">
<i class="fa-solid fa-cart-shopping" aria-hidden="true"></i>

Icon-font — набор глифов-иконок в шрифте. Просто в использовании, но: 1 файл тяжёлый, рендер зависит от шрифта, размер/выравнивание капризны. Для взрослых проектов чаще SVGs.

5. Emoji и Unicode

<span role="img" aria-label="Улыбка">🙂</span>
· (&#183;)  — начало списка
✓ — галочка

Эмодзи-иконки — быстро и тепло, но в разных ОС выглядят по-разному: нет консистентной палитры. Для иконок интерфейса — неосновное решение.

6. Фавиконки: мини-иконки сайта

<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

svg — основной для вкладки; PNG 32 — запас; apple-touch-icon — для «домашнего экрана» iOS (без прозрачности и углов). Всё в head.

7. SVG-фавикон с темой

<link rel="icon" href="/favicon.svg" media="(prefers-color-scheme: dark)">? — не работает в большинстве браузеров.
Практичнее: один SVG, где цвета в CSS-переменных через <use>…

Официально media для icon не поддержан массово. Рабочее решение — один аккуратный SVG-фавикон, который смотрится и на тёмном, и светлом фоне.

8. Иконки и доступность

смысловая иконка без текста — role="img" + aria-label;
чисто декоративная — hidden: aria-hidden="true";
иконка в кнопке с текстом — текст главный, иконка aria-hidden;
не используйте «иконка info — как?, но нет текста» — нет понимания.

<button><svg aria-hidden="true">…</svg>Добавить в корзину</button>
<button aria-label="Добавить в корзину"><svg role="img">…</svg></button>

9. Чек-лист иконок

вектор на SVG-спрайте или inline;
currentColor или CSS-переменная для раскраски;
semantic: aria-hidden для дек-, aria-label для смысл-;
favicon: svg + png32 + apple-touch-icon;
не путать шрифтовые с текстом (a11y).

Что дальше

Курс завершён.

← Вернуться к курсам