apple-touch-icon и иконки 2026: правильный icon-стек

В начале 2010-х было модно класть в <head> каждого сайта по 20 строк с разными форматами иконок: 16 размеров favicon, 9 размеров apple-touch, MS Tile для Windows 8 кафельной плитки, манифесты Chrome и Microsoft. К 2026 году это всё упростилось — но не у всех. У многих сайтов до сих пор устаревшая «икон-портянка», которая ничего не делает, но захламляет HTML.

В этой статье — минимально достаточный icon-стек для 2026 года.

Что такое apple-touch-icon

Изначальный смысл — иконка, которая появляется на главном экране iPhone/iPad, когда пользователь сохранил сайт через «Добавить на экран „Домой"». Apple ввела этот механизм в iOS 4, и долгое время это была единственная нативная альтернатива установке приложения.

С развитием PWA (Progressive Web Apps) и manifest.webmanifest часть функциональности переехала туда. Но apple-touch-icon до сих пор используется Safari на iOS — он не читает webmanifest для домашнего экрана.

Минимальный icon-стек в 2026

Для современного сайта реально нужно:

favicon.ico или icon (any format) — для вкладки браузера. 32×32 хватает.
apple-touch-icon 180×180 — для iOS «На экран Домой»
manifest.webmanifest с иконками 192 и 512 — для Android и Chrome PWA

Всё. Три файла. Не девятнадцать.

В HTML:

<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">

Если используете Next.js 13+/14+ App Router — это делается через convention-files (app/icon.tsx, app/apple-icon.tsx, app/manifest.ts) и Next.js сам вставляет правильные теги.

Размеры apple-touch-icon

Один файл 180×180 покрывает все актуальные iOS-устройства:

iPhone 6+ (iPhone 14, 15, 16) — 180×180
iPad Pro — 167×167 (брезируется из 180)
Старые iPhone (iPhone SE до 2016) — 152×152 (брезируется)

В прошлом в HTML добавляли отдельные теги для каждого размера:

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
...

Это устаревшая практика. В 2026 году все iOS-устройства, на которых сайт реально открывают, понимают sizes и берут ближайший подходящий размер. Один файл 180×180 — оптимум.

Manifest.webmanifest

Файл с метаданными для PWA. Минимально нужный набор:

{
  "name": "Bcorrections",
  "short_name": "Bcorre",
  "description": "SEO в эпоху AI",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#f5f6f8",
  "theme_color": "#4f46e5",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ]
}

purpose: "any maskable" означает иконка может быть обрезана в круг или квадрат — Android её адаптирует.

Что делать с MS Tile (для Windows)

Internet Explorer и Edge Legacy позволяли «закрепить» сайт на стартовой панели Windows 8 в виде живой плитки. Это требовало browserconfig.xml и серии тегов:

<meta name="msapplication-TileColor" content="#4f46e5">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="msapplication-config" content="/browserconfig.xml">

В 2026 году это можно смело удалять:

Windows 8 EOL с 2023 года
Edge Legacy заменён на Edge Chromium с 2020
Кафельная плитка из Windows 10 убрана в Windows 11

Удалите все msapplication-* теги из вашего <head> если они там есть. Минус 5-7 строк HTML, никакого регресса.

SVG-favicon — современная норма

С 2024 года все актуальные браузеры поддерживают SVG-favicon:

<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" sizes="any" href="/favicon.ico">

Браузер берёт SVG если поддерживает, иначе ICO. SVG масштабируется идеально на retina, тёмной теме (можно использовать CSS media-queries внутри SVG для переключения), занимает 1-2 КБ.

Минус: Safari иногда некорректно отображает сложные SVG. Простые геометрические иконки (буква в круге, абстрактный символ) — работают везде.

Тёмная тема для иконки

SVG-favicon может реагировать на системную тёмную тему:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .icon-fill { fill: #4f46e5; }
    @media (prefers-color-scheme: dark) {
      .icon-fill { fill: #a5b4fc; }
    }
  </style>
  <circle class="icon-fill" cx="16" cy="16" r="14" />
</svg>

В таблице браузера у пользователя со светлой темой иконка одного цвета, у того кто переключил систему в тёмный — другого. Деталь, которая выделяет премиум-сайт от шаблонного.

Файл favicon.ico — нужен ли

Технически в 2026 году можно обойтись без него — современные браузеры понимают <link rel="icon" href="/icon.png"> без .ico формата.

Но рекомендуем оставить как fallback:

Корпоративные браузеры на Windows иногда запрашивают /favicon.ico напрямую (без чтения HTML)
Старые RSS-агрегаторы и feedreader'ы ожидают .ico
Поисковые роботы кешируют favicon

Положите 32×32 ICO в корне сайта (на сервере, не в публичном пути) — это типовое решение.

Pitfalls

Иконка под HTTPS, но HTML под HTTP (или наоборот) — браузер не покажет
Cross-origin URL — например, иконка с CDN другого домена. Браузеры могут не показать (mixed content rules)
Прозрачный фон в apple-touch-icon — iOS заполнит чёрным. Лучше делать с непрозрачным фоном (брендовый цвет)
Закругление углов в apple-touch-icon — iOS сам обрежет в квадрат с закруглением. Если вы заранее обрезали — получится двойное закругление. Делайте полный квадрат
Не оптимизированные PNG — favicon весит 50 КБ вместо 2. Прогоните через pngquant или imagemin

Удаление лишнего

Аудит вашего <head>. Удалите:

Все msapplication-* теги
Все apple-touch-icon теги с размерами кроме 180×180
Все apple-touch-icon-precomposed (устарели с iOS 7)
Все apple-touch-startup-image — splash screen для PWA, актуально только если вы реально делаете installable PWA
browserconfig.xml (Microsoft)

Замените на минимальный стек выше. Сэкономьте 10-15 строк в <head> каждой страницы.

Резюме

В 2026 году достаточно трёх файлов: favicon (SVG + ICO fallback), apple-touch-icon 180×180, manifest.webmanifest с иконками 192/512. Всё остальное — атавизмы прошлых эпох, которые можно смело удалять.

Если у вас в <head> 30 строк иконок и непонятно зачем — напишите нам. Сделаем чистку и аудит за пару часов.