Favicon и значок Apple Touch
Добавляйте значки, отображаемые на вкладках браузера и главных экранах
«Favicon и значок Apple Touch» — бесплатный урок HTML Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.
Что такое фавикон?
Фавикон — это небольшой значок, который отображается:
- На вкладках браузера
- В списках закладок
- В истории браузера
- В результатах поиска (иногда)
Он помогает пользователям с первого взгляда найти ваш сайт среди множества открытых вкладок.
Основная ссылка на фавикон
Добавьте фавикон с помощью элемента link в head:
<head>
<!-- SVG favicon (modern, scales at any size) -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<!-- PNG fallback -->
<link rel="icon" type="image/png" href="/favicon.png">
<!-- Legacy ICO for Internet Explorer -->
<link rel="shortcut icon" href="/favicon.ico">
</head>Форматы фавикона
Рекомендуемая стратегия выбора формата фавикона:
- SVG — векторный формат, идеально масштабируется, небольшой размер файла (используйте первым)
- PNG 32x32 — резервный вариант для браузеров, не поддерживающих SVG
- ICO — устаревший формат, содержащий размеры 16x16 и 32x32
Размещение файла ICO
Файл favicon.ico в корне домена загружается автоматически:
<!-- Browsers request /favicon.ico automatically -->
<!-- Placing it at the domain root means no link tag is needed:
/favicon.ico -- served without any HTML link tag
-->
<!-- But: specifying it explicitly is better: -->
<link rel="icon" href="/favicon.ico" sizes="32x32">Атрибут sizes
Атрибут sizes задаёт размеры значка:
<link rel="icon" href="/icon-16.png" sizes="16x16">
<link rel="icon" href="/icon-32.png" sizes="32x32">
<link rel="icon" href="/icon-64.png" sizes="64x64">Значок Apple Touch
Значок Apple Touch появляется, когда пользователи добавляют ваш сайт на главный экран iOS:
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- Recommended size: 180x180 px -->
<!-- Used by: iOS Safari, some Android browsers -->
<!-- Apple applies rounded corners and gloss effect automatically -->
<!-- Pre-composited icon (no transparency) looks best -->Маскируемые значки для Android
Прогрессивные веб-приложения PWA на Android используют маскируемые значки, заполняющие форму значка:
<link rel="manifest" href="/manifest.json">
<!-- In manifest.json: -->
<!--
{
"icons": [
{
"src": "/icon-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any maskable"
}
]
}
-->Фавикон для тёмного режима
Предоставьте SVG-фавикон, адаптирующийся к тёмному режиму:
<!-- SVG favicon with dark mode support: -->
<!-- In /favicon.svg: -->
<!--
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
@media (prefers-color-scheme: dark) {
.icon-bg { fill: white; }
.icon-mark { fill: black; }
}
.icon-bg { fill: #0070f3; }
.icon-mark { fill: white; }
</style>
<circle class="icon-bg" cx="16" cy="16" r="16"/>
<text class="icon-mark" x="50%" y="60%">C</text>
</svg>
-->Манифест веб-приложения для значков PWA
Полная настройка значков для прогрессивных веб-приложений:
<link rel="manifest" href="/manifest.json">
<!-- manifest.json icons array: -->
<!--
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
-->Полная настройка фавикона
Полная современная конфигурация фавикона:
<head>
<!-- SVG: scales to any size, supports dark mode -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<!-- PNG fallback -->
<link rel="icon" type="image/png" href="/favicon-32.png" sizes="32x32">
<!-- Apple home screen -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- PWA manifest (for Android home screen) -->
<link rel="manifest" href="/manifest.json">
</head>Проверка фавиконов
Как проверить настройку фавикона:
- Выполните принудительную перезагрузку (Ctrl+Shift+R / Cmd+Shift+R), чтобы очистить кэшированный фавикон
- Используйте инструмент проверки фавикона (realfavicongenerator.net)
- Проверьте на настоящем устройстве iOS значок Apple Touch
- Проверьте манифест PWA с помощью Lighthouse → проверка PWA
Быстрая проверка
Каков рекомендуемый размер изображений значка Apple Touch?
Повторение: фавиконы
Основные сведения о фавиконе:
- SVG-фавикон — современный, масштабируемый, адаптированный к тёмному режиму
- PNG 32x32 — резервный вариант для браузеров без поддержки SVG
- ICO в корне — резервный вариант для устаревшего IE
apple-touch-icon180×180 — главный экран iOS- Манифест веб-приложения — значки PWA для Android (192px и 512px)
Часто задаваемые вопросы
Урок «Favicon и значок Apple Touch» бесплатный?
Да — полный текст урока «Favicon и значок Apple Touch» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.
Чему я научусь в уроке «Favicon и значок Apple Touch»?
Добавляйте значки, отображаемые на вкладках браузера и главных экранах Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать HTML Academy?
Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Favicon и значок Apple Touch»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке HTML Academy?
Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- title и его роль в SEO
- meta charset viewport author и description
- Канонические URL и метатег robots
- Favicon и значок Apple Touch