Favicon ico rel: Six files that fit most needs — Martian Chronicles, Evil Martians’ team blog

Её величество иконка в manifest.json

Немного о добавление иконок для сайта в мультибраузерном и мультиплатформенном мире. О возможности добавления иконки сайта на рабочий стол мобильного устройства и многом другом.

Иконка для сайта называется Favicon.

Favicon – это маленький значок, помогающий идентифицировать страницу. Это часто забываемая концепция бренда для сайта. Они дополняют UX просмотра в нескольких ключевых местах.

В зависимости от браузера и контекста они могут отображаться:

ICO – формат изображений для отображения иконок. Изначально favicon в вебе был размером 16х16 пикселей, но со временем появилась поддержка разных размеров в ICO файле (32×32, 24×24, 48×48, 64×64, 128×128 и 256×256).

В настоящее время favicon не обязательно должен быть формата ICO. Часто встречаются форматы GIF, PNG, JPG и даже SVG favicon.

Почему я назвал статью «Ее величество иконка»? Да потому, что эта «пешка» прошла в «ферзи».

Изначально Microsoft для Internet Explorer 5 разработала способ добавления favicon на сайт.

Позже, когда favicon стал частью стандартов HTML 4.01 и XHTML 1.0, рекомендовали использовать тег link для размещения favicon.

Тег link можно прописать по разному, я использую все сразу, чтобы угадать:

Иконка представляет собой точку запуска сайта или приложения. Она всегда должна смотреться хорошо. То есть быть четкой и ясной, без видимых пикселей, а размер и качество должны подходить под разрешение экрана устройства. Favicon 16×16 и 32×32 – это хороший фолбек, но они будут плохо смотреться на экранах с большим разрешением.

Дело осложняется тем, что современные браузеры и мобильные ОС требуют разные размеры иконок и угадать бывает очень трудно.

Смотрите сами неполный список рекомендаций:

Если собрать все вместе, предполагая, что мы следуем всем рекомендованным размерам для всех основных браузеров и платформ, наш набор файлов будет примерно такой:

favicon. ico

favicon-16.png

favicon-32.png

icon-48.png

icon-96.png

icon-144.png

icon-192.png

icon-256.png

icon-384.png

icon-512.png

apple-touch-icon-57.png

apple-touch-icon-60.png

apple-touch-icon-72.png

apple-touch-icon-76.png

apple-touch-icon-114.png

apple-touch-icon-120.png

apple-touch-icon-152.png

apple-touch-icon-167.png

apple-touch-icon-180.png

ms-tile-144.png

ms-tile-126.png

ms-tile-270.png

ms-tile-558×270.png

ms-tile-558.png

Разметка link примерна такая:

<link rel="icon" href="/icon-96.png">
<link rel="icon" href="/icon-144.png">

<link rel="icon" href="/icon-192.png">
<link rel="icon" href="/icon-256.png">
<link rel="icon" href="/icon-384.png">
<link rel="icon" href="/icon-512.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-57.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-60. png">
<link rel="apple-touch-icon" href="/apple-touch-icon-72.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-76.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-114.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-120.png">

<link rel="apple-touch-icon" href="/apple-touch-icon-152.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-167.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-180.png">

Уверен, вы уже схватились за голову. Караул!!! Это ж сколько рисовать всего, да еще вставлять столько тегов.

А еще появился Manifest.json и browserconfig.xml.

По сути своей это конфигурационные файлы которые управляют иконками на той или иной ОС или браузере.

Вы опять скажете — «Блин…. еще и эти файлы делать к куче картинок»… «Королева иконка требует меня в жертву»…

Все просто на самом деле. Я сейчас подскажу как все сделать. У меня на этот сайт — все про все — заняло 10 минут.

Но сначала разберемся с этими файлами, а не с иконками разных размеров.

Manifest.json

Файл манифеста содержит информацию об иконках, цветовой теме, ориентации экрана, начальном URL и т.д. Используется для создания виджета в закладках браузеров.

Подключение файла как и всего остального в head:

<link rel="manifest" href="/manifest.json">

Пример простого файла:

{
    "lang": "ru",
    "name": "Моё приложение",
    "description": "Описание приложения",
    "icons": [{
        "src": "/icon.png",
        "sizes": "64x64",

        "type": "image/png"
    }],
    "start_url": "/",
    "display": "fullscreen",
    "orientation": "landscape",
    "background_color": "#000000",
    "screenshots": [{
        "src": "/screenshots.jpg",
        "sizes": "640x480",
        "type": "image/jpeg"
    }]
}

Манифест для сайта – это простой JSON-файл, который позволяет вам настроить следующие вещи:
1. Какая будет иконка у пользователя, после того как он добавит ваш сайт на рабочий стол
2. Как будет запускаться ваш сайт (с адресной строкой, без нее или в полноэкранном режиме)

Кратко пройдемся по параметрам:

name – имя, которое будет отображаться под иконкой, ну и вообще везде, где будет отображаться ваше «приложение»
short_name – будет использоваться в тех случаях, когда места для отображения полного имени недостаточно
icons – набор иконок разных размеров
start_url – определяет url, которые открывается при нажатии иконки (можно использовать, чтобы зафиксировать пользователей, которые открывают сайт через иконку на рабочем столе, добавив параметр, допустим, ?src=homescreen в url)

Как быстро все реализовать:

1. Вначале приготовьте прозрачный свой логотип или квадратную картинку в формате PNG, достаточного размера.

2. Идем на бесплатный сервис https://www.favicon-generator.org/

Выставляем в нем галочки как на скриншоте:

Выбираем созданную заранее картинку и генерируем.

И о чудо! Получаем полный комплект иконок с нужными названиями и размерами, готовые конфигурационные файлы и теги link для вставки в шаблон сайта.

Хотя прямое назначение этого сервиса генерировать иконки, а не манифест, он его создает. Таким образом, у вас будут и иконки (для iOS и Андроид), и манифест. Полный комплект! Правда, манифест придется подправить (изменить имя и прочие настройки).

Я исправил в нем только имя:

"name": "Веб-студия WebTend",
"short_name": "WebTend",

Если name не влазит, устройства сами берут short_name. Лучше имя покороче, чтоб влазило под иконку в одну строку.

Правьте в NotePad++ в UTF-8 без BOM.

Вставил полученные на этом же сервисе теги в head:

<link rel="apple-touch-icon" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" href="/apple-icon-152x152.png">

<link rel="apple-touch-icon" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png"  href="/android-icon-192x192. png">
<link rel="icon" type="image/png" href="/favicon-32x32.png">
<link rel="icon" type="image/png" href="/favicon-96x96.png">
<link rel="icon" type="image/png" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">

И кинул все иконки в главную директорию (не хотелось пути менять).

В результате, добавив ссылку на экран IPhone, получил такое:

Как видим это 5s — экран маленький и он взял short_name — WebTend из manifest.json, что логично. На Ipad я уже увидел полное имя. При добавлении пользователь может изменить имя. Единственно на Android нет скругления иконки, что растраивает, думаю будет в будущем, при развитии этой системы.

При открытии по клику на ней очень интересно — при загрузке иконка с названием по типу preloader без анимации (можно цвет фона предзагрузки менять в manifest. json). Открывается без строки браузера, в полноэкранном режиме, с имитацией приложения.

А совсем недавно такое работало только на андроид системах. Прогресс идет.

Еще один отличный сервис: https://realfavicongenerator.net

Очень удобный, есть много настроек для каждого устройства с демо результата. Я пользуюсь им.

Мне в нем понравилось, что он генерирует и черно-белый файл svg, кроме всего прочего. Для чего он нужен?

А нужен он в В Mac OS с его Safari (не путайте Safari в iOS!).

Чтобы использовать SVG Mac OS, необходимо указать атрибут rel со значением mask-icon, все элементы SVG должны быть черного цвета. Но не стоит пугаться, цвет можно поменять атрибутом color. Эта SVG-иконка нужна для закрепления вкладки в Safari. А цвет при наведении будет таким, какой мы указали в атрибуте color.

<link rel=»mask-icon» href=»/safari-pinned-tab.svg» color=»#00а0ff»> Название файла именно такое — safari-pinned-tab.svg.

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

В Mac OS особо не разгуляешься, к сожалению. Если сохранить сайт на рабочий стол в Mac OS, то значок будет отображаться как скриншот страницы с html кодом. Просто так сайт приложением в Mac OS не сделать.

Для такой маленькой иконки очень много работы

С этим соглашается Philippe Bernard, автор RealFaviconGenerator. Он протестировал несколько вариантов, чтобы уменьшить количество необходимых файлов.

Он предполагает, что более минимальный подход обеспечивает достаточное покрытие совместимости для подавляющего большинства случаев.

Пусть браузер сам занимается уменьшением

Как говорилось ранее, браузеры обычно используют иконку самого близкого большего размера и уменьшают ее до желаемого размера, когда оптимального размера нет.

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

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

Минимальный набор иконок (от Ruadhán O’Donoghue)

Следующие файлы в корневой папке

favicon.ico (с размерами 16×16, 32×32)

favicon-16×16.png: современный эквивалент формата ICO

favicon-32×32.png: Safari

apple-touch-icon-180.png: Apple touch icon

icon-192.png: Chrome/Android

safari-pinned-tab.svg: SVG на закрепленной вкладке в Safari

mstile-150×150.png: MS плитка

Файл manifest.json, использующий изображение chrome:

{
 "name": "",
 "short_name": "",
 "icons": [
 {
 "src": "/icon-192.png",
 "sizes": "192x192",
 "type": "image/png"
 }
 ],
 "theme_color": "#ffffff",
 "background_color": "#ffffff",
 "display": "standalone"
}

Файл browserconfig.xml, использующий изображение mstile:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
 <tile>
 <square150x150logo src="/mstile-150x150. png"/>
 <TileColor>#da532c</TileColor>
 </tile>
  </msapplication>
</browserconfig>

Разметка:

<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" href="/icon-32x32.png">
<link rel="icon" type="image/png" href="/icon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">

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

Можно и закончить эту публикацию, но осталась одна важная вещь:

Сейчас многие шаблоны прописывают вызов иконки из папки самого шаблона. Если шаблон и фреймворк не позволяет вывести иконку из директории шаблона, то не забудьте путь до нее разрешить в robots.txt. Пример: Allow: /templates/vash-shablon/favicon.ico Так как по умолчанию в нем закрыто индексирование папки templates (для CMS Joomla).

И наконец, в догонку, связанная с темой информация — вывод Иконки в Яндекс браузере.

Она там имеет «кличку» — Виджет для Табло. Жуткое название. Всегда были Визуальные закладки. Красиво и понятно. Теперь Табло…

Про табло и иконки (виджеты на нем) читайте тут: https://yandex.ru/support/browser/personalization/tableau.html

Я попробовал, взял иконку для айфона побольше и переименновал, добавил link и дописал в ранее созданный manifest.json рекомендуемое яндекс.

И ничего в начале не получил. Виджет да, Заголовок да, а вот саму иконку нет. Оказалось абсолютный путь до иконки должен быть закодирован в URLencoded — вот ссылка на сервис это делающий: http://www.codenet.ru/services/urlencode-urldecode/

Это для информации. Меня вполне устраивают на панели быстрого запуска яндекс браузера и стандартно формируемые.

Вот и все, пожалуй, на это время. В принципе просто, но конечно удивляет и восхищает Карьера фавиконки за эти годы. Мы сами придумываем себе трудности, чтобы их преодолевать. Вроде, про это…

Дополнение:

После того как я написал эту статью, прошло не так много и времени и в Яндекс вебмастере появились уведомления, что формат SVG у них сейчас стал рекомендуемый. Требования к фавиконке: Размер: 120 × 120 пикселей (рекомендуемый), 16 × 16 или 32 × 32. Формат: SVG (рекомендуемый), ICO, GIF, JPEG, PNG, BMP. Совет. Используйте размер 120 × 120 пикселей или формат SVG, чтобы на сервисах Яндекса логотип сайта выглядел четче и заметнее.

SVG формат конечно хорош, но я лично рисовать ничего не буду. И так все четко и заметно. Могли бы сами сконвертировать при желании. В on line конвертерах в svg из png и генераторах даже не пытайтесь, при сохранении будет черно-белая иконка (такая применима только в mac os. Писал выше). Если есть правильная цветная svg, то вставить ее можно как обычный файл, используя в type (Тип передаваемых данных) image/svg — для формата SVG:

<link rel="icon" type="image/svg" href="/image.svg"> 

У svg есть конечно перспективы сделаться «ферзем» в будущем. Несомненный плюс — в возможностях переопределения размеров svg изображений. Но я бы не стал торопиться. Всему свое время.

Поэтому все выше описанное — актуально.

А вы уже используете SVG-фавиконки? Руководство для современных браузеров.

Вы должны использовать фавиконки в формате SVG. Они уже поддерживаются во всех современных браузерах.

Кроме того, вам не понадобятся куча ссылок на фавиконки разных размеров, которые вы копируете из проекта в проект. Давайте посмотрим, какой абсолютный минимум требуется сделать.

Иконка

Основным значком может быть SVG любого размера. Тип — type=»image / svg + xml», не требуется.

<link rel="icon" href="favicon.svg">

Mask-icon

Для Safari все немного по-другому. Вам нужно добавить mask-icon. Это тоже SVG, но он должен быть сделан при помощи только одного цвета и размещен на прозрачном фоне. Браузер добавляет цвет атрибута.

<link rel=”mask-icon” href=”mask-icon.svg” color=”#000000">

Touch-иконка

Фавиконка для устройств iOS, а также для избранного в браузере, для новой вкладки и многое другое. Вам нужен только размер 180 х 180, а атрибут размеров, теперь, будет излишен.

<link rel="apple-touch-icon" href="apple-touch-icon.png">

Манифест

Файл manifest.json предоставляет информацию о вашем веб-приложении или веб-сайте. Он обязателен для успешного прохождения тестирования в Lighthouse. Указанная фавиконка используется для Android и Chrome. Самый большой размер 512 х 512 является единственным необходимым.

{
   "name": "Starter",
   "short_name": "Starter",
   "icons": [{
       "src": "google-touch-icon.png",
       "sizes": "512x512"
   }],
   "background_color": "#ffffff",
   "theme_color": "#ffffff",
   "display": "fullscreen"
}

Значение theme-color для тега meta по-прежнему требуется чтобы указать цвет для браузера Chrome Android.

<meta name="theme-color" content="#ffffff">

Сделано

Вот и все. Это все фавиконки, которые вам нужны для современных браузеров, все остальное не нужно, или не обязательно. Можно добавить msapplication-TileImage, если вы хотите использовать другой значок на “плитках” Windows, по умолчанию будет использован значок apple-touch-icon. TileColor больше не используется.

Остальные браузеры

К сожалению, не все пользователи работают в современных браузерах, но это можно легко решить, добавив файл 32 x 32 favicon.ico в корень вашего сайта. Это будет работать везде, даже у вашей бабушки.

Темный режим

На последок, вот совет для темного режима. Одним из преимуществ фавиконки в формате SVG, является то, что вы можете изменить ее цвет с помощью CSS. При помощи медиа-запроса prefers-color-color цвет вашей фавиконки меняется в зависимости от темного или светлого режима включенного у пользователя. Этот метод не работает с mask-icon, так как цвет фавиконки указан в атрибуте, но Safari добавляет белый фон, если контрастности недостаточно.

<svg xmlns="http://www.w3.org/2000/svg">
  <style>
    path {
      fill: #000;
    }
    @media (prefers-color-scheme: dark) {
      path {
        fill: #fff;
      }
    }
  </style>
  <path fill-rule="evenodd" d="M0 0h26v16H0z"/>
</svg>

Результат

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

<meta name="theme-color" content="#ffffff">
<link rel="icon" href="favicon.svg">
<link rel="mask-icon" href="mask-icon.svg" color="#000000">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="manifest" href="manifest.json">

Почему не отображается иконка сайта favicon?

Для начала хочу напомнить про статью Как создать favicon иконку сайта? Там Вы гарантированно сможете создать валидную иконку для сайта.

Вспомним как установить на сайт иконку сайта favicon

<html>

<head>

<title>Где подключить иконку сайта favicon?</title>
<link rel="icon" href="/favicon.ico" type="image/x-icon">

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

<body></body>

</html>

<!-- Если favicon лежит в корне сайта. РЕКОМЕНДУЕМЫЙ вариант. -->

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

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<!-- Если favicon лежит в корне сайта.  Полный адрес к иконке. -->

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

<link rel="shortcut icon" href="http://yoursite.ru/favicon.ico" type="image/x-icon">
<!-- Если favicon лежит в папке Выше. НЕ РЕКОМЕНДУЕМЫЙ вариант. -->

<link rel="icon" href="http://yoursite.ru/путь_к_иконке/favicon.ico" type="image/x-icon">

<link rel="shortcut icon" href="http://yoursite.ru/путь_к_иконке/favicon.ico" type="image/x-icon">

Как индексируется иконка сайта favicon? Почему не отображается сразу после изменений?

Вы все сделали правильно, но фавикон не хочет отображаться?

Я обновил запись c favicon (иконкой сайта), но у меня по-прежнему ничего не отображается. Почему?

Проверка Favicon в поисковых системах Яндекс и Google

Информация о favicon.ico

Обновлено: 08.05.2020, Computer Hope

Что такое favicon.ico?

favicon.ico — это небольшой значок, который можно найти в адресной строке URL-адреса и в закладках, созданных веб-браузерами.

Например, на изображении выше есть маленький значок () перед URL-адресом Computer Hope.

Как создать фавикон?

Значок может быть создан с помощью любого бесплатного генератора значков или в бесплатном онлайн-генераторе значков, таком как favicon. cc. Файл favicon.ico должен иметь размер 16×16, иметь 16 цветов и сохраняться как файл .ico.

Наконец, файл favicon.ico должен быть загружен в корневой каталог на сервере, на котором размещена ваша веб-страница.

Можно ли анимировать иконку?

Да, если генератор значков, который вы используете для создания значка, поддерживает анимацию, а браузер, который вы используете для просмотра веб-страницы, поддерживает ее, этот значок можно анимировать.

Может ли файл называться как-нибудь иначе, кроме favicon.ico?

Да, добавьте в свой HTML-код тег ниже в раздел вашего кода.

В этом примере браузер будет искать файл favicon2.ico и использовать его вместо favicon.ico. Если используется старый браузер или браузер, который не поддерживает эту функцию, тег игнорируется.

Значок также можно загрузить с другого веб-сайта. Например, чтобы использовать значок Computer Hope на своем сайте, вы можете добавить тег ниже в разделе .

Современный браузер не требует размещения этого тега на каждой создаваемой вами странице, если в корневом (домашнем) каталоге хранится файл favicon.ico. Мы предлагаем использовать этот тег для использования определенного значка или когда ваш веб-хостинг не поддерживает размещение файлов .ico.

Что такое favicon.gif?

Более современные интернет-браузеры используют favicon.gif в дополнение к favicon.ico. Если вы разработчик веб-сайта или блога, мы рекомендуем использовать файл favicon.gif в дополнение к favicon.ico. Поместите файлы в корневой каталог вашего сайта и любые подкаталоги, доступные в Интернете, чтобы предотвратить появление ошибки 404 в журнале вашего сервера.

Почему в моем браузере не отображается значок?

Значок может не отображаться по любой из указанных ниже причин.

1. Если вы или кто-то другой, использующий ваш компьютер, недавно очистили ваш интернет-кеш, значки будут потеряны, поскольку они хранятся во временном кэше.
2. Страница не загружалась в последнее время или браузер не ищет значок в правильном месте. Попробуйте обновить страницу браузера (нажатие F5 на клавиатуре — это обычная комбинация клавиш для обновления страницы).
3. Если вы веб-мастер веб-страницы и не можете отобразить favicon.ico, убедитесь, что значок находится в корневом каталоге с соответствующими разрешениями. Если это подтверждено и страница находится в другом каталоге, попробуйте поместить файл favicon.ico в этот каталог.
4. Наконец, в более ранних версиях браузеров были и другие проблемы, связанные с файлом favicon.ico. Убедитесь, что у вас установлена ​​последняя доступная версия интернет-браузера для вашей операционной системы.

Как сделать фавикон в 2021 году

Я всегда благодарен тем, кто изучает и переоценивает лучшие практики в том, что необходимо буквально каждому веб-сайту и имеет сложный набор требований. Андрей Ситник сделал это здесь с помощью значков.

Последнее предложение:

  <ссылка rel = "icon" href = "/ favicon.ico "> 

 
  

  {
  "icons": [
    {"src": "/192.png", "type": "image / png", "sizes": "192x192"},
    {"src": "/512.png", "type": "image / png", "sizes": "512x512"}
  ]
}  

Было хорошее время, чтобы сделать это здесь, на CSS-Tricks, поэтому я попытался последовать совету буквально, и пока он работает отлично.Думаю, мне надоело, насколько это было сложно, в какой-то момент я стал ультра-минималистичным, и только имел файл favicon.ico . Теперь у меня есть все вышеперечисленное.

Чем я отличался…

• У меня не установлен GIMP или Inkscape, который может экспортировать формат .ico , поэтому я использовал этот генератор значков (я скармливал ему свой «основной» SVG) только для этого значка.
• Я нашел Figma полезной для изменения размера фреймов и экспорта нужных размеров.
• Я использовал ImageOptim для оптимизации всех изображений.
• Я нервничал по поводу добавления «манифеста», потому что у меня нет других шагов, подобных PWA, и это похоже на дополнительный веб-запрос за небольшую ценность. Но я все равно это сделал.
• У меня есть цвет темы ( ), потому что мне сказали, что это приятный штрих. Чувствует себя родственным.

Мне нравится концепция SVG в темном режиме:

Но я здесь не обошелся, так как считаю, что мой значок в любом случае выглядит нормально без изменений:

Я также не удосужился снова создать специальный значок, предназначенный только для разработки, но я сделаю это, потому что считаю его чрезвычайно удобным.

Прямая ссылка →

Фавикон мертв, да здравствует фавикон

Кто не любит фавикон? Эти крошечные логотипы были опорой веб-дизайна почти 20 лет и не собираются исчезать.Первоначально представленный Microsoft для IE5, значок значка означал, что веб-дизайнеры могли добавить свой собственный крошечный элемент брендинга в список пользователей страниц, отмеченных закладками. В то время возможность выделить вашу страницу с помощью собственного красочного логотипа была возможностью, перед которой не мог устоять ни один веб-дизайнер, так как такое внедрение было быстрым, и значки вскоре стали основным продуктом современного веб-опыта.

Перенесемся в 2018 год, и онлайн-ландшафт почти не узнаваем. В отличие от 1999 года, наши браузеры теперь поддерживают несколько вкладок, и наши экраны усыпаны этими крошечными иконками — мы постоянно используем их, чтобы легко определить, к какой вкладке браузера мы хотим получить доступ.Также растет количество устройств, размеров и разрешений экрана; от смартфонов и планшетов до смарт-телевизоров, игровых консолей, электронных книг и наручных часов — список можно продолжать и продолжать. Так какую же роль должен играть старомодный значок в нашу эпоху мульти-устройств, 4k, PWA?

По правде говоря, фавикон может быть с нами по духу, но его значение ослабевает, даже если количество фирменных иконок, украшающих экраны многих наших устройств, растет. Формат favicon был заменен более современными реализациями, которые используют высококачественные изображения для совершенно нового набора применений.Проблема с современными значками (как поймет любой, кто сталкивался с префиксами поставщиков при написании CSS) заключается в том, что каждый браузер имеет свой собственный подход к тому, как лучше всего отображать ваш значок, то есть вместо включения одного простого изображения значка, которое вы теперь должны создать целый ряд изображений разных размеров и форматов. Поддержка четырех самых популярных браузеров (Chrome, Firefox, Safari, Edge), работающих в четырех самых популярных операционных системах (Windows, macOS, iOS, Android), может быть сложной.

Favicons в 2018 году

Что сделало старый формат .ico популярным в первую очередь, так это его способность поддерживать несколько изображений. Правильно сделанный favicon.ico на самом деле будет 3 разными изображениями в одном файле (обычно 16 × 16, 32 × 32 и 48 × 48). Теперь с помощью HTML5 и атрибута изображения «sizes» это можно сделать с помощью разметки. Поэтому вместо одного файла .ico используйте 3 разных изображения PNG. Мы также используем обновленные размеры для учета современных разрешений экрана.

Пока все просто, правда? Неправильный. К сожалению, значки в формате PNG не поддерживаются в более старых версиях IE, поэтому, если вы хотите поддерживать IE9 и ниже, вам также потребуется добавить старый стиль favicon.ico. Учитывая, что даже Microsoft перестала поддерживать что-либо старше IE11, об этом не стоит беспокоиться, если у вас нет особой причины поддерживать эти старые версии IE.

Сенсорные значки Apple

Сенсорные значки были представлены Apple, чтобы пользователи могли сохранять ссылку на ваш веб-сайт на своем мобильном рабочем столе с помощью опции «Добавить на главный экран». Это заставляет ваш веб-сайт отображаться на телефоне пользователей, как приложение, и поэтому для него требуется изображение большего размера. Первоначальные сенсорные значки были 57 × 57, но с тех пор было выпущено множество различных устройств Apple под управлением iOS, а также появление экранов Retina, которые сделали их устаревшими. Для поддержки современных устройств Apple, включая следующие, со значением по умолчанию (т.е.тот, который не использует атрибут ‘sizes’) размером 120 × 120:

Итак, об устройствах Apple позаботились, верно? Опять же, все не так просто. На самом деле, вам не нужна никакая из вышеперечисленных разметок, чтобы ваши сенсорные значки работали на современных устройствах Apple.Если изображения включены в корневую папку вашего веб-сайта, iOS автоматически отобразит наиболее подходящий сенсорный значок. Так почему мы включаем их в нашу разметку? Что ж, сенсорные значки стали до странности повсеместными, что означает, что их использует целый ряд продуктов сторонних производителей, включая собственный Android от Google и Chrome (да, действительно). Так что, по крайней мере, на данный момент лучше всего включить вышеперечисленное для поддержки всех продуктов сторонних производителей.

Иконки на Android

Как упоминалось выше, Google использует значок apple-touch-icon для целого ряда своих собственных приложений, но для оптимизации под Android вам необходимо создать файл манифеста веб-приложения (без одного из них). , пользователи не получат опции «Добавить на главный экран»).Это может показаться сложным, но на самом деле это всего лишь крошечный файл JSON, который сообщает Android, как отображать ваш сайт. Во-первых, вам нужно создать файл с именем site.webmanifest и вставить в него что-то вроде этого:

  {
  "name": "Ваш замечательный сайт",
  "short_name": "Ваш сайт",
  "description": "Здесь идет ваше описание.",
  "background_color": "# 000000",
  "цвет_темы": "#cccccc",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "размеры": "192x192",
      "тип": "изображение / png"
    },
    {
      «SRC»: «/ android-chrome-512x512.png ",
      "размеры": "512x512",
      "тип": "изображение / png"
    }
  ],
}  

Вы заметите, что здесь есть ссылки на еще два значка. Google рекомендует использовать значки 192 × 192 и 512 × 512, после чего Android выберет наиболее подходящий в зависимости от используемого устройства. После того, как вы создали файл манифеста и значки, вам нужно будет добавить на него ссылку. Это находится в вашего документа:

Для дальнейшей настройки вы также можете изменить цвет браузера, добавив свой собственный цвет темы .Просто добавьте следующее под ссылкой на свой файл манифеста:

Значки в Windows

Итак, теперь у нас есть значки для устройств Apple (и все другие приложения, использующие «apple-touch»), и теперь мы настроили манифест для Android. То, что осталось? Ну, только самая популярная в мире операционная система, наш старый друг Windows.

С тех пор, как Microsoft представила «Metro» в Windows 8, пользователи могут добавлять веб-сайты на свой начальный экран Windows в виде «плитки».Чтобы управлять отображением этой плитки, вам нужно создать другой файл, на этот раз XML-файл с именем browserconfig.xml. Внутри этого файла вам нужно вставить что-то вроде этого:

  
  
    
      
        
        
        
        
         # 000000 
    
  
  

Для Windows вам нужно добавить еще четыре значка, опять же в формате PNG. Эти значки будут располагаться посередине плитки, поэтому лучше всего они будут смотреться с прозрачным фоном. Затем вы можете указать цвет плитки, которая будет отображаться «позади» вашего логотипа. На последнем этапе просто добавьте эту ссылку в вашего веб-сайта, указав на только что созданный XML-файл:

Что-нибудь еще? Конечно, есть…

Не довольствуясь использованием своего собственного« яблочного сенсорного значка », эти ребята из Apple создали другой тип значка, он называется« значок-маска ». В настоящее время , это используется, в частности, когда вкладка браузера в Safari «закреплена». Это довольно нишевое использование, но есть что-то уникальное в «значке маски», что означает, что это, вероятно, стоит сделать. В отличие от всего вышеперечисленного, маска- icon использует файлы SVG вместо PNG. Хотя сначала может показаться невероятно раздражающим использование другого типа файла, переход к значкам SVG имеет большой смысл.Если учесть все вышеперечисленные значки и их разные размеры, то можно сэкономить много работы, если вместо этого мы можем использовать одно изображение, масштабируемое до разных размеров. Именно здесь на помощь приходят SVG, и поэтому иконка-маска (или что-то очень похожее) может стать будущим фавиконов.

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

Я сказал, что это сложно!

Вот как настроить значки для всех основных браузеров и операционных систем. Может показаться, что это много, но пугает то, что вы можете добавить еще больше значков, если хотите поддерживать более старые версии iOS и множество нишевых приложений Android. В какой-то момент мы должны провести линию, а моя линия находится где-то здесь. Имея это в виду, это последний код, который вам понадобится в вашего веб-сайта:

Не забывайте, вам нужно создать ‘site.webmanifest’ и ‘browserconfig .xml тоже. Это, безусловно, намного больше работы, чем один файл favicon.ico, который мы так быстро полюбили, но вышесказанное означает, что вы охватываете самые современные способы использования значков на самых популярных устройствах и браузерах.

Если вы ищете быстрое автоматизированное решение для создания иконок, обратите внимание на RealFaviconGenerator, отличный инструмент, который охватывает все вышеперечисленное и многое другое.

Favicon.ico html — Pretag

4 или если у вас нет favicon.ico в корневой папке, но, например, папка с активами — Голосовать за 27 фев ’14 в 11:59 , Я могу принудительно обновить значок, добавив параметр запроса, например? V = 2. нравится: , я не включил следующую строку кода в свой тег head, однако мой значок по-прежнему отображается в моем браузере:, 4 Любопытно, что realFaviconGenerator рекомендует не объявлять значок в заголовке HTML. — Дэн Даскалеску 5 окт.

Многие люди устанавливают свой путь для файлов cookie в /.Это приведет к тому, что каждый запрос значка будет отправлять копию файлов cookie сайта, по крайней мере, в хроме. Это должно исправить обращение вашего значка к вашему домену без файлов cookie.

(1 размер), (2 размера), (любой размер). Этот атрибут используется, только если rel = «icon».

Определение и использование

Атрибут sizes определяет размеры значков для визуальных медиа.

загрузить больше v

Значок — это графический изображение (значок), связанное с определенной веб-страницей и / или веб- сайт. Многие недавние пользовательские агенты (например, графические браузеры и программы чтения новостей) отображают их как визуальное напоминание о веб-сайте идентичность в адресной строке или во вкладках. Википедия включает статья о favicons [FAVICON-WIKIPEDIA]. Предпочтительный подход связывает значок с документом HTML, не сборник документов (т.е., сайт), Проект в разработке; могут радикально измениться в любое время. Следующие участники группы QA Interest Group и сотрудники W3C имеют внесли значительный вклад в содержание этого документа: Доминик Хазаэль-Массье (W3C), Крис Лилли (W3C) и Оливье Теро (W3C).

Первый способ указать значок — использовать rel значение атрибута «icon» и определить, что это значение означает через профиль; профили обсуждаются более подробно ниже. В этом примере HTML 4.01 значок, идентифицированный через URI http: // example.com / myicon.png как значок:

 



   
   […]

[…]

 

загрузить больше v

Вот сценарий, необходимый для получения значка в адресной строке, значок Favicon — это ярлык от значка «Избранное»., Вы можете проверить в Интернете, является ли файл значка и правильно ли он был вставлен на страницу. Щелкните здесь., Это небольшой логотип, расположенный перед посещенным URL-адресом, его можно увидеть в адресной строке и использовать для продвижения компании или товарного знака

Вот сценарий, необходимый для получения значка в адресной строке

 html
 

загрузить больше v

Вместо того, чтобы обслуживать десятки значков, вам нужно всего лишь пять значков и один файл JSON ., В вашем HTML для браузера:, Если у вас есть общедоступный веб-сайт, на нем должен быть значок. К сожалению, то, что пользователи воспринимают как один значок, на самом деле их много. Теперь, когда мы прощались с павшими товарищами, давайте посмотрим, как создать идеальный набор значков для тех, кто еще стоит.

загрузить больше v

favicon.ico - это небольшой значок, который можно найти в адресной строке URL-адреса и в закладках. создается веб-браузерами. Например, на изображении выше есть небольшой значок () перед URL-адресом Computer Hope.Наконец, в более ранних версиях браузеров были и другие проблемы, связанные с файлом favicon.ico. Убедитесь, что у вас установлена ​​последняя доступная версия интернет-браузера для вашей операционной системы., Полезные ссылкиО компьютере НадеждаКарта сайтаФорумСвяжитесь с намиКак получить помощьВверх 10 страниц

Да, добавьте в свой HTML-код тег ниже в разделе вашего кода.

загрузить больше v

Вот, наш список значков увеличивается:, Наше изображение находится в / favicon.ico. Это относится к файлу favicon.ico в корневой папке нашего веб-сайта. Корневая папка - это основная папка, обычно та, в которую помещается файл index.html. Это должно сделать наш веб-сайт или приложение более соответствующими современным стандартам! Найдите подходящий учебный лагерь для себя

загрузить больше v

Значок - это небольшое изображение, которое находится на вкладке браузера слева заголовка веб-страницы.На изображении ниже показано расположение значка. , Обязательно замените Favicon_Image_Location на относительный путь к файлу вашего изображения значка. Сохраните файл index.html и перезагрузите его в своем веб-браузере. Вкладка вашего браузера должна теперь содержать изображение значка. , Работаете над улучшением здоровья и образования, сокращением неравенства и стимулированием экономического роста? Мы бы хотели помочь. DigitalOcean упрощает запуск в облаке и масштабирование по мере вашего роста - независимо от того, используете ли вы одну виртуальную машину или десять тысяч.

Затем добавьте элемент (выделен ниже) в файл index.html прямо под элементом ...

Другие запросы типа "undefined-undefined", относящиеся к "Favicon.ico html"

  / favicon.ico 
 

  
 
 
 
 
 1
2
3
4
5
 
 
 
 
 
    
        
    

 
 
 
 
 
  

有些 人 会 直接 把 .png .ico 来. ico 其 也 能 正确 解析 为 PNG 格式。

是 推荐 16 × 16, 32 × 32 以及 48 × 48 几个 尺寸 的 的 图标 整合 在 favicon.ico 中 的。 例如 IE 会把 16 × 16 本 的 用 在 浏览 地址 栏上 ， 而 32 × 32 这个 尺寸 用 在 快捷 任务 栏 上。

使用 示意 如下 ：

注意 ， 我们 直接 使用 rel = "icon" 就 可以 了 ， 现在 很多 网站 依然 使用 rel = "shortcut icon" ， 这 是 过时 的 用法 ， 可以 被 淘汰 掉 了。

当然 ， 对于 favicon.ico 的 使用 ， 最 推荐 的 做法 是 放在 网站 的 根 目录 下 ， 不需要 有 任何 的 声明。 同时 在 页面 头部 声明 的 的 根 小更 灵活。

Иконки PNG

现代 桌面 浏览 器 ， 推荐 使用 PNG 作为 favicon。

的 尺寸 是 16 × 16, 32 × 32 大 越好。 例如 MacOS / Safari 使用 196 × 196 尺寸 图标 ， 如果 这 是 这些 找到 的 最大 图片。

那 应该 推荐 什么 尺寸 是 什么 呢？ 下面 是 一些 平台 favicon 最佳 尺寸 列表 ：

还 可以 使用 size 属性 指定 PNG 图标 的 尺寸 ， 这样 浏览 器 可以 选择 的 的 小 图标。

例如

 

... 

可以 实际 测试 下 这种 размер 尺寸 设定 在 常见 桌面 浏览 器 下 的 效果 ：

可以 狠狠 地 点击 这里 ： PNG 格式 значок 尺寸 设置 测试 демо

HTML 如下

Chrome ， Firefox ， IE edge 下 小 图标 均 换成 了 圆角 的 «鑫» ：

然后 我们 来看 下 请求 ：

Chrome Размер 32 × 32 Размер PNG Размер

Firefox 则 是 请求 16 × 16 以及 128 × 128 这 两个 尺寸 ：

16 × 16 应该 用来 显示 在 地址 栏 上 ， 128 × 128 这个 尺寸 不 知道 干什么 用 的 ， 需要 专业 人士 告知 了。 ，

三 、 favicon 的 生成

favicon.ico 的 文件 生成 需要 专门 的 工具 ， 不像 PNG 这么 方便。

下载 制作 不过 这样 成本 有点 高 ， 其实 有 很多 的 favicon 生成 工具 做 的 很 不错 的。

推荐 这个 ： https: //realfavicongenerator.net/

无 广 无 告 ， 作者 对 favicon 研究 很 深入 ， 适合 于 多种 平台 ， 还 favicon 压缩。

例如 ， 选 一张 «鑫» 图片 ：

其 可以 生成 在 各个 平台 下 favicon ， 以及 预览 效果 ：

其他 备选 在线 页面 （有 广 有 告） ：

四 、 favicon 与 404

网页 开发 的 时候 ， Chrome 浏览 器 经常 可以 favicon.ico 404 错误 ， 这个 可以 只要 线上 服务器 跟 地址 favicon.ico 就 可以 了 ， 会 出问题 ， 网页 如果指定 favicon 器 会 从 域名 的 根 目录 下 查找 favicon.ico 的 文件 ， 如果 找不到 就会 404。

你 ， 制作 一个 和 线上 favicon.ico 形状 图形 一样 ， 但 的 的 favicon.ico 放在 开发 的 建议 是 ： 线上 favicon 系 的 ， 则 本地 环境 的 favicon.ico 使用 橙色 或者 红色 ； 线上 favicon 橙色 系 的 ， 本地 使用 蓝色 系。

一眼 就 看清楚 到底 是 线上 环境 还是 ， 免得 数据 测试 的 时候 不 小心 在线 上 环境 操作。 我 找 了 css-tricks 的 示意图 ：

五 、 favicon 与 base64

favicon 除了 使用 线上 地址 ， 还 支持 base64 格式 内 联 ， 例如 ：

файл: // 协议 打开 的 本地 HTML 静态 页面 可以 使用 这种 方式 让 浏览 器 地址 的 favicon 显示。

六 、 结语

这段 是 大家 参考 的 favicon 现代 用法 ， 跨 PC 和 移动 端 的 项目 可以 参考 参考 ：

   ->
















 

- для windows 8+ - для browserconfig.xml, для файла

使用 示意 ：

   ->


 

browserconfig.xml 内容 示意 ：

 
    
        
            
            
            
             #FFFFFF 
        
    
 

， favicon 的 水 还是 很深 ， 因为 不同 平台 下 的 尺寸 啊 ， 使用 方式 本文 的 内容 也 尽量 涉及。

以后 出现 新 的 平台 ， 例如 鸿 蒙 ， 说不定 又 是 另外 的 favicon 尺寸 规则。

就是 这样 ， 有时候 好像 挺 了解 的 东西 一旦 深入 ， 发现 原来 自己 懂 的 只是 皮毛。

要 时刻 保持 谦逊 才是！

文 为 原创 文章 ， 欢迎 分享 ， 全文 转载 ， 如果 内容 你 收藏 ， 永不 过期 ， 而且 知识 点 以及 修正 体验 也 更好。
本: // www.zhangxinxu.com/wordpress/?p=8747

（本篇 完）