html — Как установить иконку для сайта?

Вопрос задан

Изменён 4 года назад

Просмотрен 7k раз

Почему-то в разделе head HTML-документа написал:

<link rel="shortcut icon" href="icon/favicon.ico">

Разместил в папке файл «favicon.ico«, но всё равно иконка не отображается!

Кто-нибудь, подскажите, в чём причина, пожалуйста.

  • html
  • icon

3

Ну, во-первых, надо убедиться, что icon/favicon.ico — верный путь до иконки. Ну если все в порядке, то значит браузер виноват, т.е. кэш. Бывало такое. Но попробуй обмануть, в обоих случаях помогает, так как код страницы меняется.

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

или так (задать абсолютный путь)

<link rel="shortcut icon" href="/icon/favicon.ico">

У вас какой сервер? Если апач, то кинте favicon.ico в корень сайта и будет вам счастье.

1

Попробуй вот так:
<link rel="icon" href="./icon/favicon.ico" type="image/x-icon">

1

В настоящее время, что бы просто вставить иконку, достаточно прописать как уже выше сказали 1 строчку и закинуть файл на сервер. Но есть множество сценариев, при которых обычная фавиконка не решает поставленные задачи, в дополнение к ответам, могу порекомендовать сервис, который с легкостью подготовит ваше изображение под все популярные платформы.

https://realfavicongenerator.net/

Я всегда вставляю следующим образом (обычно ложу в корень сайта, туда же куда и index. html или index.php:

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

Многие поисковики и браузеры, сами ищут эту иконку в корне сайта по имени favicon

В вашем случае код должен быть таким (если вы указываете относительный путь):

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

Да я использую две строки с разными rel=»» атрибутами. Так сложилось исторически из-за браузеров и их «перетягиваний одеяла»

А еще иконка может не показываться, если у неё неверно указан формат. Например сделать иконку в ФШ и сохранить её как .ico почему то не всегда срабатывает. Я делаю иконки в ФШ, сохраняю как jpg а потом программой IcoFX конвертирую их в .ico уже несколько лет так и все отлично работает.

У меня тоже такая проблема была. Короче кидаешь иконку в корень сайта(Не знаю надо или нет но у меня так), прописываешь (С такими скобками< > незнаю как их поставить link rel=»shortcut icon» href=»favicon. ico» ТЕПЕРЬ! Перезагружаешь сервер свой. У меня Опен Сервер там все просто у тебя не знаю как

1

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Как Создать и Добавить Иконку для Сайта — Favicon

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

В этом руководстве вы узнаете несколько способов, как добавить favicon на ваш сайт.

1. Какие требования к размеру и формату иконки

Взять любую понравившуюся картинку и с ходу использовать ее как Favicon не получится. Надо соблюсти два несложных требования: выбрать подходящее расширение и размер.

Рекомендуемые форматы изображений для иконки:

  • .ico (.icns в macOS) — своего рода стандарт, используется повсеместно.
  • .png — более современный вариант, тоже широко распространен и поддерживается даже во многих старых браузерах.

Можно использовать и другие форматы? например, jpeg или gif. Из-за особенностей браузеров и разных ОС мы рекомендуем выбирать ico. Самый каноничный формат, с которым точно не ошибетесь.

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

  • 16 на 16 px
  • 32 на 32 px
  • 192 на 192 px
  • 512 на 512 px

2. Как и где создать иконку для сайта

Возможно у вас уже есть подготовленная иконка — тогда пропустите этот раздел и переходите к шагу 3. Если иконки у вас еще нет, вы можете самостоятельно создать её в удобном редакторе или воспользоваться одним из онлайн сервисов:

https://icons8.com — отличный сервис с большим выбором иконок и удобным поиском. Вам достаточно просто отыскать понравившуюся иконку и скачать её.

https://iconsflow.com — на этом сайте кроме большого выбора макетов вы также можете отредактировать иконку: изменить её форму, добавить фон, стиль отображения и пр.

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

Есть несколько вариантов добавить иконку на сайт.

Вариант 1 — Загрузить иконку в формате favicon. ico в корневой каталог сайта. Все браузеры автоматически распознают этот файл и отобразят изображение в качестве иконки на вкладке. Файл нужно загрузить в корень сайта через файловый менеджер или FTP, формат файла обязательно должен быть ico.

Вариант 2 — Указать путь к иконке в блокев шапке сайта. В этом случае вы можете использовать файлы разных форматов. Вам нужно открыть редактор кода сайта, найти блоки внутри него разместить следующий код со ссылкой на картинку иконки:

<link rel=»shortcut icon» href=»/images/favicon.png» type=»image/png»>

Вариант 3 — Воспользоваться стандартным загрузчиком CMS. Все популярные платформы для разработки сайта: WordPress, Joomla, Opencart уже имеют встроенный функционал для загрузки иконок. Вам достаточно открыть настройки сайта и загрузить иконку стандартным способом.

В этом руководстве вы узнали несколько способов, как быстро создать и добавить иконку для вашего сайта. Правильно подобранная иконка добавит сайту более привлекательный вид и выделить его среди конкурентов.

Icons Tutorial

❮ Главная Далее ❯

Как добавить значки

Чтобы вставить значок, добавьте имя класса значка в любой встроенный элемент HTML.

Элементы и широко используются для добавления иконки.

Все значки в приведенных ниже библиотеках значков являются масштабируемыми векторными значками, которые могут можно настроить с помощью CSS (размер, цвет, тень и т. д.)

Иконки Font Awesome 5

Чтобы использовать значки Free Font Awesome 5, перейдите на fontawesome.com и войдите в систему, чтобы получить код для использования на своих веб-страницах.

Подробнее о том, как начать работу с Font Awesome, читайте в нашем Шрифт Awesome 5 глава.

Примечание: Загрузка и установка не требуются!

Пример








<я >



Попробуйте сами »

Иконки Font Awesome 4

Чтобы использовать иконки Font Awesome 4, добавьте следующую строку в раздел вашей HTML-страницы:

Примечание: Нет загрузки или установки требуется!

Пример





< /head>






Попробуйте сами »

Иконки Bootstrap 3

Чтобы использовать глификоны Bootstrap 3, добавьте следующую строку внутри Раздел вашей HTML-страницы:

Примечание: Загрузка и установка не требуются!

Пример




bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css»>






Попробуйте сами »

Примечание. Глификоны не поддерживаются в Bootstrap 4.

Для получения дополнительной информации о Bootstrap 3 и глификонах посетите наш учебник по Bootstrap 3.

Значки Google

Чтобы использовать значки Google, добавьте следующую строку в раздел вашей HTML-страницы:

Примечание: Загрузка или установка не требуются!

Пример






< тело>

облако
избранное
приложение
компьютер
трафик


Попробуйте сами »

Полный список ВСЕХ значков (шрифт awesome, bootstrap и google) см. Справочник по значкам.

❮ Предыдущий Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебник по HTML
Учебник по CSS
Учебник по JavaScript
Учебник How To
Учебник по SQL
Учебник по Python
Учебник по W3.CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery
9000 3

Основные каталожные номера
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

ФОРУМ | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

html — Как добавить значок вкладки браузера (favicon) для веб-сайта?

Существует ряд различных значков и даже экранов-заставок, которые можно установить для различных устройств. В этом ответе рассказывается, как поддержать их всех.

Вот несколько фрагментов, которые я использовал, с соответствующими ссылками на места, где я собирал информацию. См. мой блог для получения дополнительной информации и дополнительной информации о шаблоне проекта ASP.NET MVC Boilerplate со всем этим, встроенным прямо из коробки (включая примеры файлов изображений).

Добавьте следующую разметку в заголовок HTML. Закомментированные разделы являются необязательными. В то время как незакомментированные разделы рекомендуется охватывать все варианты использования значков. Не бойтесь, больше всего, если это комментарии, чтобы помочь вам.

 



































 png">
















 png"
      media="(ширина устройства: 320px) и (высота устройства: 568px) и (-webkit-device-pixel-ratio: 2)">

Мой файл browserconfig.xml. Полное объяснение выше.

 
<конфигурация браузера>
  
    <плитка>
       png"/>
      
      
      
      #5cb95c

Мой файл manifest.json. Полное объяснение выше.

 {
    "name": "Шаблон ASP.NET MVC (обязательно! Обновите это)",
    "значки": [
        {
            "src": "\/Содержимое\/иконки\/android-chrome-36x36.png",
            "размеры": "36x36",
            "тип": "изображение\/png",
            "плотность": "0,75"
        },
        {
            "src": "\/Содержимое\/иконки\/android-chrome-48x48.png",
            "размеры": "48x48",
            "тип": "изображение\/png",
            "плотность": "1.0"
        },
        {
            "src": "\/Содержимое\/иконки\/android-chrome-72x72.png",
            "размеры": "72x72",
            "тип": "изображение\/png",
            "плотность": "1,5"
        },
        {
            "src": "\/Содержимое\/значки\/android-chrome-96x96. png",
            "размеры": "96x96",
            "тип": "изображение\/png",
            "плотность": "2.0"
        },
        {
            "src": "\/Содержимое\/иконки\/android-chrome-144x144.png",
            "размеры": "144x144",
            "тип": "изображение\/png",
            "плотность": "3.0"
        },
        {
            "src": "\/Содержимое\/иконки\/android-chrome-192x192.png",
            "размеры": "192x192",
            "тип": "изображение\/png",
            "плотность": "4,0"
        }
    ]
}

Список файлов в проекте (Обратите внимание, что имена этих файлов важны, если вы решите поместить некоторые из них в корень вашего проекта, чтобы избежать использования вышеуказанных метатегов):

 favicon.ico
браузерconfig.xml
Контент/Изображения/
    Android-хром-144x144.png
    Android-хром-192x192.png
    Android-хром-36x36.png
    Android-хром-48x48.png
    Android-хром-72x72.png
    Android-хром-96x96.png
    apple-touch-icon.png
    яблоко-тач-значок-57x57. png
    яблоко-тач-значок-60x60.png
    яблоко-тач-значок-72x72.png
    яблоко-тач-значок-76x76.png
    яблоко-тач-значок-114x114.png
    яблоко-тач-значок-120x120.png
    яблоко-тач-значок-144x144.png
    яблоко-тач-значок-152x152.png
    яблоко-тач-значок-180x180.png
    apple-touch-icon-precomposed.png (180x180)
    favicon-16x16.png
    favicon-32x32.png
    фавикон-96x96.png
    favicon-192x192.png
    manifest.json
    mstile-70x70.png
    mstile-144x144.png
    mstile-150x150.png
    mstile-310x150.png
    mstile-310x310.png
    яблоко-тач-стартап-изображение-1536x2008.png
    яблоко-тач-стартап-изображение-1496x2048.png
    яблоко-тач-стартап-изображение-768x1004.png
    яблоко-тач-стартап-изображение-748x1024.png
    яблоко-тач-стартап-изображение-640x1096.png
    яблоко-тач-стартап-изображение-640x920.png
    яблоко-тач-стартап-изображение-320x460.png

Всего накладных расходов

Если вы удалите комментарии, это 3 КБ дополнительного HTML, если вы не поддерживаете заставки, это 1,5 КБ.