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

Question

Даниил Першин · Accepted Answer

Чтобы добавить иконку на сайт HTML, нужно выполнить следующие шаги:

Создайте иконку размером 16x16 или 32x32 пикселей. Лучше всего использовать формат PNG или ICO.
Назовите файл иконки favicon.ico и сохраните его в корневой папке вашего сайта.
Добавьте следующую строку внутри тега <head> вашей HTML страницы:

1

<link rel="icon" href="favicon.ico" type="image/x-icon">

Если иконка не имеет формата .ico, а например .png, то нужно указать соответствующие расширение файла.

Сохраните изменения и загрузите вашу HTML страницу на сервер. Обратите внимание, что некоторые браузеры могут не отображать иконку, если она не имеет формата .ico или если ее размеры не соответствуют стандартным размерам. Также рекомендуется проверить, что иконка правильно отображается в разных браузерах и на разных устройствах.

Ivan Mamtsev · Answer

Чтобы добавить иконку (фавикон) на сайт в HTML, нужно использовать тег <link> в секции <head> HTML-документа.

Для стандартного фавикона (16x16 пикселей):

1

<link rel="icon" type="image/x-icon" href="/path/to/favicon.ico">

Для использования PNG изображения:

1

<link rel="icon" type="image/png" href="/path/to/favicon.png">

Для поддержки разных размеров на разных устройствах:

1

2

3

<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">

Для использования SVG:

1

<link rel="icon" type="image/svg+xml" href="/path/to/favicon.svg">

Помните, что некоторые браузеры кэшируют фавиконы, поэтому при обновлении иконки может потребоваться очистка кэша браузера или изменение имени файла.

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

Иконку сайта на вкладке браузера (фавикон) подключают тегом `` внутри ``: ```html ``` Файлы кладут в корень сайта рядом с `index.html`. ## Какие файлы нужны | Файл | Размер | Где показывается | |---|---|---| | `favicon.ico` | 32×32 | вкладка браузера, старые браузеры | | `icon.svg` | любой, векторный | вкладка в современных браузерах | | `apple-touch-icon.png` | 180×180 | иконка на экране iPhone при «Добавить на экран Домой» | | PNG 120×120 | 120×120 | Яндекс рекомендует этот размер для иконки в поисковой выдаче | Сделать ICO из PNG можно в любом конвертере изображений. Если иконка в SVG, современным браузерам хватит одного этого файла. ## Если иконка не появилась - Браузер кэширует фавикон. Откройте сайт в режиме инкогнито или добавьте версию: `href="/favicon.ico?v=2"`. - Проверьте путь: откройте `https://ваш-сайт.ru/favicon.ico` напрямую. - В поисковой выдаче Яндекса и Google новая иконка появляется через несколько дней или недель после переобхода. ## Логотип на странице Логотип в шапке сайта вставляют картинкой и обычно делают ссылкой на главную: ```html

``` `alt` с названием компании нужен поисковикам и программам экранного доступа. ## Иконки в тексте и кнопках Небольшие иконки рядом с текстом вставляют как SVG прямо в HTML: ```html ``` `fill="currentColor"` красит иконку в цвет текста кнопки. Готовые наборы иконок: Lucide, Heroicons, Font Awesome. Font Awesome подключают стилем и вставляют тегом ``. Структуру `` и работу с изображениями разбирают на курсе [«Профессиональная верстка»](https://ru.hexlet.io/programs/professional-layout).

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

Ответы

Какие файлы нужны

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

Логотип на странице

Иконки в тексте и кнопках

Каталог

Файл	Размер	Где показывается
`favicon.ico`	32×32	вкладка браузера, старые браузеры
`icon.svg`	любой, векторный	вкладка в современных браузерах
`apple-touch-icon.png`	180×180	иконка на экране iPhone при «Добавить на экран Домой»
PNG 120×120	120×120	Яндекс рекомендует этот размер для иконки в поисковой выдаче