Как сделать иконку сайта на вкладке html

Question

Aleksey · Accepted Answer

Для того чтобы добавить иконку сайта на вкладке, нужно использовать тег <link> со значением атрибута rel равным "shortcut icon" и атрибут href указывающий на путь к изображению.

Пример:

1

2

3

<head>
  <link rel="shortcut icon" href="path/to/icon.png" />
</head>

В этом примере, мы добавляем иконку с путем "path/to/icon.png". Важно, чтобы путь был указан правильно и иконка была доступна по этому пути.

Aleksey · Answer

Чтобы добавить иконку для MS Edge, нужно добавить следующие теги внутри тега <head>:

1

2

3

<meta name="msapplication-TileColor" content="#ffffff" />
<meta name="msapplication-TileImage" content="path/to/ms-icon-144x144.png" />
<meta name="theme-color" content="#ffffff" />

Здесь мы указываем цвет плитки приложения для MS Edge в атрибуте content тега <meta> с именем msapplication-TileColor. Также мы указываем путь к иконке для MS Edge в атрибуте content тега <meta> с именем msapplication-TileImage.

Атрибут name и content тега <meta> определяют цвет темы приложения. В данном случае мы указываем, что цвет темы должен быть белым.

Никита Вихров · Answer

Иконку на вкладке браузера (favicon) подключают тегом <link> внутри <head>:

1

2

3

4

5

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

Этих трёх строк достаточно для современных браузеров:

Файл	Размер	Для чего
`favicon.ico`	32×32	старые браузеры и программы, которые запрашивают `/favicon.ico` без тега
`icon.svg`	векторный	вкладки браузеров, чёткий на любом экране
`apple-touch-icon.png`	180×180	значок при добавлении сайта на главный экран iPhone

rel="shortcut icon" из старых инструкций устарел, достаточно rel="icon".

Если нет SVG

Подойдёт PNG:

1

<link rel="icon" href="/favicon-32.png" type="image/png" sizes="32x32">

Сделать ICO из PNG можно в онлайн-конвертере или в графическом редакторе.

Иконка не появилась

Кэш. Браузер долго хранит старую иконку. Откройте сайт в режиме инкогнито или напрямую откройте адрес /favicon.ico.
Путь. href="favicon.ico" без слеша ищет файл относительно текущей страницы. На странице /blog/post браузер пойдёт в /blog/favicon.ico. Пишите путь от корня: /favicon.ico.
Открыт файл с диска. На странице file:/// иконки отображаются не во всех браузерах. Запустите локальный сервер, например python -m http.server.

Иконка в выдаче поисковиков

Яндекс и Google показывают favicon рядом с сайтом в результатах поиска. Google рекомендует квадратную иконку размером от 48×48, кратную 48 пикселям. Иконка появится в выдаче после переобхода сайта, это занимает от нескольких дней до недель.

Тёмная тема

В SVG-иконке можно сменить цвет под тёмную тему браузера:

1

2

3

4

5

6

7

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    path { fill: #0082ff; }
    @media (prefers-color-scheme: dark) { path { fill: #fff; } }
  </style>
  <path d="M4 4h24v24H4z"/>
</svg>

Структуру HTML-страницы разбирают в бесплатном курсе «Введение в HTML и CSS».

Aleksey · Answer

Чтобы добавить иконку для IOS, нужно добавить следующие теги внутри тега <head>:

1

2

3

4

5

6

7

<link
  rel="apple-touch-icon"
  sizes="180x180"
  href="path/to/apple-touch-icon.png"
/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

Здесь мы указываем путь к иконке для IOS в атрибуте href тега <link>. Также мы указываем размеры иконки в атрибуте sizes. Для IOS рекомендуется использовать размер 180x180.

Атрибуты name и content тега <meta> определяют поведение веб-приложения на IOS. В данном случае мы указываем, что веб-приложение может быть запущено на IOS и что стиль статус-бара должен быть черным.

Как сделать иконку сайта на вкладке html

Ответы

Если нет SVG

Иконка не появилась

Иконка в выдаче поисковиков

Тёмная тема

Каталог