Атрибут sizes тега <link>

Описание

Атрибут sizes для тега <link> указывает размеры иконок для различных устройств и контекстов отображения. Используется в сочетании с rel="icon" или rel="apple-touch-icon" для адаптивных favicon и иконок приложений.

Пример использования:
<!-- Иконки для разных устройств --> <link rel="icon" href="favicon-32x32.png" sizes="32x32"> <link rel="icon" href="favicon-64x64.png" sizes="64x64"> <link rel="apple-touch-icon" href="touch-icon-ipad.png" sizes="152x152"> <link rel="apple-touch-icon" href="touch-icon-iphone-retina.png" sizes="180x180">

Форматы значений:

Формат Пример Использование
Фиксированный размер sizes="16x16" Стандартные favicon
Несколько размеров sizes="32x32 64x64" Несколько версий одной иконки
any sizes="any" SVG-иконки, масштабируемые произвольно

Рекомендуемые размеры:

  • 16x16 - стандартный favicon
  • 32x32 - для панелей задач
  • 64x64 - для desktop ярлыков
  • 152x152 - iPad
  • 180x180 - iPhone (Retina)
  • 192x192 - Android Chrome
  • 512x512 - PWA/Splash screen

Пример с SVG иконкой:

<!-- Масштабируемая SVG иконка --> <link rel="icon" href="icon.svg" type="image/svg+xml" sizes="any">

Рекомендации по использованию:

  • Всегда указывайте sizes для иконок
  • Используйте квадратные изображения (1:1 соотношение)
  • Для PWA включайте иконки всех основных размеров
  • Сочетайте с type для указания формата изображения
  • Для SVG используйте sizes="any"

Полный пример PWA иконок:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="manifest" href="/site.webmanifest"> <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"> <link rel="shortcut icon" href="/favicon.ico">

Ошибки и проверка:

<!-- Неправильно: несоответствие размеров --> <link rel="icon" href="icon-32x32.png" sizes="64x64"> <!-- Неправильно: отсутствует sizes для растровых иконок --> <link rel="icon" href="favicon.png"> <!-- Правильно: полный набор атрибутов --> <link rel="icon" href="favicon-64x64.png" sizes="64x64" type="image/png">

Примечание: Атрибут sizes критически важен для корректного отображения иконок на различных устройствах и в разных контекстах. Для современных веб-приложений рекомендуется использовать SVG-иконки с sizes="any" в сочетании с растровыми fallback для максимальной совместимости.