Giter Site home page Giter Site logo

head's Introduction

🤯 HEAD

Простое руководство по HTML-элементам в <head>

Contributors CC0 Follow @joshbuchea on Twitter

Оглавление

Рекомендуемый минимум

Ниже приведены основные элементы для любого веб-документа (веб-сайта/приложения):

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!--
   Вышеуказанные 2 мета-тега *должны* стоять как можно раньше в <head>.
   для обеспечения правильного отображения документов.
   Любой другой элемент заголовка должен идти *после* этих тегов.
  -->
  <title>Заголовок страницы</title>
</head>

meta charset - определяет кодировку веб-сайта, стандартом является utf-8.

meta name="viewport" - настройки viewport, связанные с мобильной отзывчивостью

width=device-width - физическая ширина устройства (отлично подходит для мобильных устройств!)

initial-scale=1 - начальный масштаб, 1 означает отсутствие масштабирования

⬆ вернуться к началу.

Элементы

Допустимые элементы <head> включают base, link, meta, noscript, script, style, template и title.

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

<!--
 Установите кодировку символов для этого документа так, чтобы
 все символы в пространстве UTF-8 (например, эмодзи)
 отображались правильно.
-->
<meta charset="utf-8">

<!-- Установите заголовок документа -->
<title>Заголовок страницы</title>

<!-- Установите базовый URL для всех относительных URL в документе -->
<base href="https://example.com/page.html">

<!-- Ссылка на внешний файл CSS -->
<link rel="stylesheet" href="styles.css">

<!-- Используется для добавления CSS в документ. Используется для важной стилизации -->
<style>
/* ... */
</style>

<!-- Ссылка на внешний JavaScript файл -->
<script src="script.js"></script>

<!-- Используется для добавление JS в документ-->
<script>
 // функция(и) идут здесь
</script>

<!-- Используется на случай если JavaScript отключен в браузере -->
<noscript>
 <!-- Альтернатива, когда JS отключен -->
</noscript>

<!-- Используется для объявления HTML-фрагментов, которые могут быть клонированы и вставлены в документ. Если указан в <head>, то <template> может содержать только метаданные -->
<template>
  
</template>

⬆ вернуться к началу.

Мета

<!--
 Вышеуказанные 2 мета-тега *должны* стоять как можно раньше в <head>.
 для обеспечения правильного отображения документов.
 Любой другой элемент заголовка должен идти *после* этих тегов.
-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- viewport-fit для управления безопасной зоны -->
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  • contain: вьюпорт должен полностью вмещать веб-контент.
  • cover: веб-контент должен полностью покрывать вьюпорт.
  • auto: значение по умолчанию, работает как contain.

Подробнее в блоке css-live

<!--
 Позволяет контролировать, откуда загружаются ресурсы.
 Поместите как можно раньше в <head>, так как тег 
 применяется только к ресурсам, которые объявлены после него.
-->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

<!-- Название веб-приложения (должно использоваться только в том случае, если веб-сайт используется как приложение) -->
<meta name="application-name" content="Имя приложения">.

<!-- Цвет вкладки для Chrome на Android, Vivaldi, Safari 15 -->
<meta name="theme-color" content="#4285f4">

<!-- Список ключевых слов -->
<meta name="keywords" content="ваши, теги">

<!-- Краткое описание документа (ограничение до 150 символов) -->
<!-- Это содержимое *может* использоваться в результатах поисковых систем. -->
<meta name="description" content="Описание страницы">.
<!-- Управление поведением поисковых машин при осмотре и индексации сайта -->
<meta name="robots" content="index,follow"><!-- Все поисковые системы -->
<meta name="googlebot" content="index,follow"><!-- Специфика Google -->
<meta name="bingbot" content="index,follow"><!-- Специфика Bing -->

<!-- Как часто посещать сайт роботу-->
<meta content="10 day" name="revisit">

<!-- Дата последнего изменения документа -->
<meta name="revised" content="Sunday, July 18th, 2010, 5:15 pm" />

<!-- Используется как description, но для научных статей-->
<meta name="abstract" content="">
<meta name="topic" content="">
<meta name="summary" content="">

<!-- Для обратной связи -->
<meta name="reply-to" content="[email protected]">

Для роботов есть несколько значений:

  • all - нет ограничений на индексирование и показ контента.
  • noindex - не показывать эту страницу в результатах поиска.
  • nofollow - не выполнять переход по ссылкам на странице.
  • none - эквивалент noindex, nofollow.
  • noarchive - запрещает показывать ссылку на кеш в результатах поиска.
  • nosnippet - не показывать в результатах поиска текстовый фрагмент или видео.
  • max-snippet: [number] - ограничение на количество символов в текстовом фрагменте
  • max-image-preview: [setting] - определяет максимальный размер изображений, которые могут показываться в результатах поиска для этой страницы.
  • max-video-preview: [number] - задает для фрагмента видео со страницы ограничение по длительности в секундах при показе в результатах поиска.
  • notranslate - не предлагать перевести эту страницу в результатах поиска.
  • noimageindex - не индексировать изображения на странице.
  • unavailable_after: [date/time] - запрещает показывать страницу в результатах поиска после даты и времени.
  • noyaca - запрет на использование информации из Яндекс.Каталога для описания в сниппете
  • noodp — запрет на использование описания из dMoz для сниппета;
  • noydir — запрет на использование описания из Yahoo! Directory для сниппета.

значения можно писать через запятую content="max-snippet:-1, max-image-preview:large, max-video-preview:-1". Подробнее в документации Google Поиска

<!-- Указывает Google не показывать поисковую строку sitelinks -->
<meta name="google" content="nositelinkssearchbox">

<!-- Указывает Google не переводить документ -->
<meta name="google" content="notranslate">

<!-- Проверить право собственности сайта -->
<meta name="google-site-verification" content="verification_token"><!-- Google Search Console -->
<meta name="yandex-verification" content="verification_token"><!-- Яндекс Вебмастерам -->
<meta name="msvalidate.01" content="verification_token"><!-- Bing Webmaster Center -->
<meta name="alexaVerifyID" content="verification_token"><!-- Alexa Console -->
<meta name="p:domain_verify" content="code_from_pinterest"><!-- Pinterest Console-->
<meta name="norton-safeweb-site-verification" content="norton_code"><!-- Norton Safe Web -->

<!-- Укажите программное обеспечение, использованное для создания документа (например, WordPress, Dreamweaver) -->
<meta name="generator" content="название программного обеспечения">

<!-- Краткое описание темы вашего документа -->
<meta name="subject" content="тема вашего документа">

<!-- Дает общую возрастную оценку, основанную на содержании документа -->
<meta name="rating" content="General">

<!-- Позволяет контролировать, как передается информация о реферере -->
<meta name="referrer" content="no-referrer">

<!-- Отключить автоматическое определение и форматирование возможных телефонных номеров -->
<meta name="format-detection" content="phone=no">

<!-- Полностью отказаться от предварительной выборки DNS, установив значение "off" -->
<meta http-equiv="x-dns-prefetch-control" content="off">

<!-- Указывает документ, который будет отображаться в определенном фрейме -->
<meta http-equiv="Window-Target" content="_value">

<!-- Гео-теги -->
<meta name="ICBM" content="широта, долгота">.
<meta name="geo.position" content="широта;долгота">
<meta name="geo.region" content="country[-state]"><!-- Код страны (ISO 3166-1): обязательный, код штата (ISO 3166-2): необязательный; например, content="US" / content="US-NY" -->
<meta name="geo.placename" content="city/town"><!-- например, content="New York City" -->

<!-- Монетизация веб-сайтов https://webmonetization.org/docs/getting-started -->
<meta name="monetization" content="$paymentpointer.example">

<!-- Подсказывает, что сайт оптимизирован для мобильных устройств-->
<meta name="HandheldFriendly" content="true">

<!-- Указывает автора документа -->
<meta name="author" content="Nikolai Shabalin">

<!-- Принадлежность авторских прав-->
<meta name="copyright" content="Nikolai Shabalin">

<!-- Создатель документа -->
<meta name="creator" content="Nikolai Shabalin">

<!-- Владелец -->
<meta name="owner" content="">

<!-- Перезагружает страницу через указанное количество секунд -->
<meta http-equiv="Refresh" content="20">
<meta http-equiv="Refresh" content="20; URL=page4.html"> <!-- Перезагружает к указанной странице -->

<!-- Язык документа -->
<meta name="language" content="Russian">
<!-- Соль -->
<meta name="salt" content="21f157b19463e98d0e9723cf486d620a">

Про соль подробнее

<!-- Регистрация доменного имени -->
<meta name="parking" content="имя регистратора">

Подробнее про парковку доменов

<!-- Отключает возможность Скайпа звонить по номерам на странице-->
<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" />

Подробнее про отключение Скайпа

⬆ вернуться к началу.

Ссылки

<!-- Путь до внешней таблицы стилей -->
<link rel="stylesheet" href="https://example.com/styles.css">.

<!-- Помогает предотвратить проблемы дублированного контента -->
<link rel="canonical" href="https://example.com/article/?page=2">

<!-- Ссылки на AMP HTML версию текущего документа -->
<link rel="amphtml" href="https://example.com/path/to/amp-version.html">

<!-- Ссылка на JSON-файл, в котором указаны данные для "установки" веб-приложения -->
<link rel="manifest" href="manifest.json">
<link rel="manifest" href="manifest.webmanifest">
<!-- Ссылки на информацию об авторе (авторах) документа -->
<link rel="author" href="humans.txt">

О human.txt подробнее

<!-- Ссылается на заявление об авторском праве, применимое к контексту ссылки -->
<link rel="license" href="copyright.html">

<!-- Дает ссылку на место в вашем документе, который может быть на другом языке -->
<link rel="alternate" href="https://es.example.com/" hreflang="es">

<!-- Предоставляет информацию об авторе или другом человеке -->
<link rel="me" href="https://google.com/profiles/thenextweb" type="text/html">
<link rel="me" href="mailto:[email protected]">.
<link rel="me" href="sms:+15035550125">

<!-- Ссылки на документ, описывающий коллекцию записей, документов или других материалов, представляющих исторический интерес -->
<link rel="archives" href="https://example.com/archives/">

<!-- Ссылки на ресурс верхнего уровня в иерархической структуре -->
<link rel="index" href="https://example.com/article/">

<!-- Обеспечивает самостоятельную ссылку - полезно, когда документ имеет несколько возможных ссылок -->
<link rel="self" type="application/atom+xml" href="https://example.com/atom.xml">

<!-- Первый, последний, предыдущий и следующий документы в серии документов, соответственно -->
<link rel="first" href="https://example.com/article/">
<link rel="last" href="https://example.com/article/?page=42">
<link rel="prev" href="https://example.com/article/?page=1">
<link rel="next" href="https://example.com/article/?page=3">

<!-- Используется, когда для ведения блога используется сторонний сервис -->
<link rel="EditURI" href="https://example.com/xmlrpc.php?rsd" type="application/rsd+xml" title="RSD">

<!-- Формирует автоматический комментарий, когда другой блог WordPress ссылается на ваш блог WordPress или пост -->
<link rel="pingback" href="https://example.com/xmlrpc.php">

<!-- Уведомляет URL, когда вы ссылаетесь на него в вашем документе -->
<link rel="webmention" href="https://example.com/webmention">

<!-- Позволяет размещать сообщения на вашем собственном домене с помощью клиента Micropub -->
<link rel="micropub" href="https://example.com/micropub">

<!-- Open Search -->
<link rel="search" href="/open-search.xml" type="application/opensearchdescription+xml" title="Заголовок поиска">.

<!-- Фиды -->
<link rel="alternate" href="https://feeds.feedburner.com/example" type="application/rss+xml" title="RSS">
<link rel="alternate" href="https://example.com/feed.atom" type="application/atom+xml" title="Atom 0.3">

<!-- Prefetching, preloading, prebrowsing -->
<!-- Дополнительная информация: https://css-tricks.com/prefetching-preloading-prebrowsing/ -->
<link rel="dns-prefetch" href="//example.com/">
<link rel="preconnect" href="https://www.example.com/">
<link rel="prefetch" href="https://www.example.com/">
<link rel="prerender" href="https://example.com/">.
<link rel="preload" href="image.png" as="image">
<link rel="modulepreload" href="super-critical-stuff.js"> <!-- Предзагрузка модулей -->

⬆ вернуться к началу.

Иконки

<!-- Для IE 10 и ниже -->
<link rel="icon" href="favicon.ico"><!-- 32×32 -->

<link rel="icon" href="favicon.ico"> - необязательно указывать в <head>. Любой сервер ищет favicon.ico, но для этого favicon.ico обязательно нужно положить в корень проекта. От .ico лучше не отказываться, так как могут перестать работать иконки, например в RSS-читалках. В .ico поддерживается прозрачность. На данный момент в Хром есть баг. Если в проекте подключены ICO и SVG версии, то всё равно предпочтение отдаётся ICO.

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

Преимущество SVG-фавиконки в том, что, помимо того, что он векторный, он может подстраиваться под тёмную тему с помощью @media (prefers-color-scheme: dark). Поддержка векторных фавиконок.

<!-- IOS 8+ -->
<link rel="apple-touch-icon" href="apple-touch-icon.png"><!-- 180×180 -->

Используется для отображения ярлыка на домашнем экране IPhone и IPad.

Выше указаны три версии для фавиконки фавиконки, но можно добавить ещё 2, чтобы учесть большинство современных браузеров. Чтобы не увеличивать HTML другие фавиконки добавляют в веб-манифест

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

manifest.webmanifest

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

⬆ вернуться к началу.

Социальные сети

Facebook Open Graph

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

<meta property="fb:app_id" content="123456789">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:type" content="website">
<meta property="og:title" content="Заголовок содержимого">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:image:alt" content="Описание того, что находится на изображении (не подпись)">
<meta property="og:description" content="Описание">
<meta property="og:site_name" content="Название сайта">
<meta property="og:locale" content="ru_RU">
<meta property="article:author" content="">

Twitter Card

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

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_account">
<meta name="twitter:creator" content="@individual_account">
<meta name="twitter:url" content="https://example.com/page.html">
<meta name="twitter:title" content="Заголовок контента">.
<meta name="twitter:description" content="Описание контента менее 200 символов">.
<meta name="twitter:image" content="https://example.com/image.jpg">.
<meta name="twitter:image:alt" content="Текстовое описание изображения, передающее его суть пользователям с ослабленным зрением. Максимум 420 символов.">

Twitter Privacy

Если вы встраиваете твиты в свой сайт, Twitter может использовать информацию с вашего сайта для адаптации контента и предложений для пользователей Twitter. Подробнее о возможностях конфиденциальности Twitter.

<!-- запретить Twitter использовать информацию о вашем сайте в целях персонализации -->
<meta name="twitter:dnt" content="on">

Schema.org

<html lang="" itemscope itemtype="https://schema.org/Article">
   <head>
     <link rel="author" href="">
     <link rel="publisher" href="">
     <meta itemprop="name" content="Заголовок контента">.
     <meta itemprop="description" content="Описание содержимого менее 200 символов">.
     <meta itemprop="image" content="https://example.com/image.jpg">

Примечание: Эти мета-теги требуют добавления атрибутов itemscope и itemtype к тегу <html>.

JSON-LD

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

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Article",
    "author": {
      "@type": "Person",
      "name": "Your Name"
    },
    "publisher": {
      "@type": "Organization",
      "name": "Your Organization"
    },
    "headline": "Article Headline",
    "image": "https://example.com/image.jpg",
    "datePublished": "2020-02-05T08:00:00+08:00",
    "dateModified": "2020-03-05T09:20:00+08:00"
  }
</script>

⬆ вернуться к началу.

Pinterest

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

<meta name="pinterest" content="nopin" description="Извините, вы не можете сохранить с моего сайта!">.

Facebook Instant Articles

<meta charset="utf-8">
<meta property="op:markup_version" content="v1.0">

<!-- URL веб-версии вашей статьи -->
<link rel="canonical" href="https://example.com/article.html">

<!-- Стиль, который будет использоваться для этой статьи -->
<meta property="fb:article_style" content="myarticlestyle">

OEmbed

<link rel="alternate" type="application/json+oembed"
 href="https://example.com/services/oembed?url=http%3A%2F%2Fexample.com%2Ffoo%2F&amp;format=json"
 title="Профиль oEmbed: JSON">
<link rel="alternate" type="text/xml+oembed"
 href="https://example.com/services/oembed?url=http%3A%2F%2Fexample.com%2Ffoo%2F&amp;format=xml"
 title="oEmbed Profile: XML">

QQ/Wechat

Пользователи обмениваются веб-страницами в qq wechat с помощью форматированного сообщения

<meta itemprop="name" content="название акции">
<meta itemprop="image" content="http://imgcache.qq.com/qqshow/ac/v4/global/logo.png">
<meta name="description" itemprop="description" content="поделиться содержимым">

⬆ вернуться к началу.

Браузеры / Платформы

Apple iOS

<!-- Баннер умного приложения -->
<meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT">

<!-- Отключить автоматическое определение и форматирование возможных телефонных номеров -->
<meta name="format-detection" content="phone=no">

<!-- Иконка запуска (180x180px или больше) -->
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">

<!-- Изображение экрана запуска -->
<link rel="apple-touch-startup-image" href="/path/to/launch.png">

<!-- Заголовок значка запуска -->
<meta name="apple-mobile-web-app-title" content="Название приложения">.

<!-- Включить автономный (полноэкранный) режим -->
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- Внешний вид строки состояния (не влияет, если не включен автономный режим) -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<!-- Глубокое связывание приложений iOS -->
<meta name="apple-itunes-app" content="app-id=APP-ID, app-argument=http/url-sample.com">
<link rel="alternate" href="ios-app://APP-ID/http/url-sample.com">

Google Android

<!-- Цветовая тем приложения -->
<meta name="theme-color" content="#E64545">

<!-- Добавить на главный экран -->
<meta name="mobile-web-app-capable" content="yes">
<!-- Дополнительная информация: https://developer.chrome.com/multidevice/android/installtohomescreen -->

<!-- Глубокое связывание приложений Android -->
<meta name="google-play-app" content="app-id=package-name">
<link rel="alternate" href="android-app://package-name/http/url-sample.com">

Google Chrome

<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/APP_ID">.

<!-- Отключить подсказку перевода -->
<meta name="google" content="notranslate">

Microsoft Internet Explorer

<!-- Заставить IE 8/9/10 использовать свой последний движок рендеринга -->
<meta http-equiv="x-ua-compatible" content="ie=edge">

<!-- Отключить автоматическое определение и форматирование возможных телефонных номеров расширением для браузера Skype Toolbar-->
<meta name="skype_toolbar" content="skype_toolbar_parser_compatible">

<!-- Плитки Windows -->
<meta name="msapplication-config" content="/browserconfig.xml">

Минимально необходимая разметка xml для browserconfig.xml:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
    <msapplication>
        <tile>
            <square70x70logo src="small.png"/>
            <square150x150logo src="medium.png"/>
            <wide310x150logo src="wide.png"/>
            <square310x310logo src="large.png"/>
        </tile>
    </msapplication>
</browserconfig>

⬆ вернуться к началу.

Браузеры (китайские)

360 Browser

<!-- Выбор порядка движков рендеринга -->
<meta name="renderer" content="webkit|ie-comp|ie-stand">

QQ Mobile Browser

<!-- Фиксирует экран в заданной ориентации -->
<meta name="x5-orientation" content="landscape/portrait">

<!-- Отображение этого документа в полноэкранном режиме -->
<meta name="x5-fullscreen" content="true">

<!-- Документ будет отображаться в "режиме приложения" (полноэкранный режим и т.д.) -->
<meta name="x5-page-mode" content="app">

UC Mobile Browser

<!-- Фиксация экрана в заданной ориентации -->
<meta name="screen-orientation" content="landscape/portrait">

<!-- Отображение этого документа в полноэкранном режиме -->
<meta name="full-screen" content="yes">

<!-- Браузер UC будет отображать изображения, даже если находится в "текстовом режиме" -->
<meta name="imagemode" content="force">

<!-- Документ будет отображаться в "режиме приложения" (полноэкранный режим, запрещающий жест и т.д.) -->
<meta name="browsermode" content="application">

<!-- Отключение "ночного режима" браузера UC для этого документа -->
<meta name="nightmode" content="disable">

<!-- Упростить документ, чтобы уменьшить передачу данных -->
<meta name="layoutmode" content="fitscreen">

<!-- Отключить функцию браузера UC "увеличивать масштаб шрифта, когда в документе много слов" -->
<meta name="wap-font-scale" content="no">

⬆ вернуться к началу.

CSRF

<!-- Токен для идентификации формы -->
<meta name="csrf-token" content="токен">
<meta name="csrf-param" content="csrf_token">

Подробнее про CSRF-атаки

⬆ вернуться к началу.

Подсказки клиентов

<!-- Включает подсказки клиентов -->
<meta http-equiv="Accept-CH" content="DPR">
<meta http-equiv="Accept-CH" content="DPR, Width">

Подробнее про подсказки клиентов

⬆ вернуться к началу.

Ссылки на приложения

<!-- iOS -->
<meta property="al:ios:url" content="applinks://docs">
<meta property="al:ios:app_store_id" content="12345">
<meta property="al:ios:app_name" content="App Links">

<!-- Android -->
<meta property="al:android:url" content="applinks://docs">
<meta property="al:android:app_name" content="App Links">
<meta property="al:android:package" content="org.applinks">

<!-- Web fall back -->
<meta property="al:web:url" content="https://applinks.org/documentation">

⬆ вернуться к началу.

Устаревшее

Значок прикрепленной вкладки Safari

В macOS 10.11 в появились закреплённые закладки, но стандартные не подошли. Поэтому создали новый тип фавиконки. Далее эти значки использовались в тач-баре Макбуков.

Для таких значков есть ряд требований:

  • только SVG
  • 100% чёрный вектор
  • с помощью color менять цвет
  • SVG должен быть однослойным
  • viewBox должен быть равен "0 0 16 16"
  • фон должен быть прозрачным
<link rel="mask-icon" href="/path/to/icon.svg" color="blue">

Проблемой было то, что такие значки, хоть они и SVG, никак не менялись для тёмной темы. А прозрачный фон становился контрастным, но вы это не могли контролировать.

Сейчас для тач-бара и закрепленной вкладки хорошо подходят:

  • Apple touch иконки <link rel="apple-touch-icon" href="/custom_icon.png">
  • Фавиконка <link rel="icon" href="favicon.png">
  • Монограмма. Если никаких иконок нет, то значок создаётся из первой буквы заголовка страницы или имени домана верхнего уровня

Начиная с Safari 12 отдельный вариант иконок стал не нужен.

Значок плитки Windows

<meta name="msapplication-TileColor" content="#efefef">

Браузер Edge раньше поддерживал такой формат значков для меню "Пуск". Для последних версий Windows это больше не требуется

Отображение документа в нужном режиме для IE

В зависимости от переданного значения content заставляет различные версии IE отображать документ в том или ином режиме.

<meta http-equiv="X-UA-Compatible" content="IE=5">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<meta http-equiv="X-UA-Compatible" content="IE=7">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8">
<meta http-equiv="X-UA-Compatible" content="IE=8">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
<meta http-equiv="X-UA-Compatible" content="IE=9">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10">
<meta http-equiv="X-UA-Compatible" content="IE=10">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

Но начиная с IE11 режимы документов устарели. Режим Edge стал предпочтительным.

shortcut для фавиконок

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

shortcut - использовался исключительно IE.

Почему не стоит использовать shortcut

Яндекс табло

<link rel="yandex-tableau-widget" href="/manifest.json" />

manifest.jons

{
"version": "1.0",
"api_version": 1,
"layout":
	{
	"logo": "https://webliberty.ru/wp-content/themes/lime/images/manifest.png",
	"color": "#e9ffd0",
	"show_title": false
	}
}

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

⬆ вернуться к началу.

Другие ресурсы

⬆ вернуться к началу.

Связанные проекты

⬆ вернуться к началу.

🌐 Переводы

⬆ вернуться к началу.

🤝 Contributing

Откройте issue или PR, чтобы предложить изменения или дополнения.

🌟 Contributors

Посмотрите на всех супер классных авторов 🤩

👤 Автор оригинального репозитория

Josh Buchea

💛 Поддержка

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

Всем кто помогает, спасибо! 🙏

— Josh

📝 Лицензия

CC0

⬆ вернуться к началу.

head's People

Contributors

beeva-miguelsarries avatar bhaskarmelkani avatar cryogenic-ric avatar davidpelayo avatar faraixyz avatar jasonkarns avatar jordanbrauer avatar joshbuchea avatar joshuahess avatar justmarkup avatar khaosdoctor avatar konfuze avatar lutece avatar marcobiedermann avatar mcecode avatar ngyikp avatar nikolai-shabalin avatar rdil avatar safaring avatar saijogeorge avatar sarbbottam avatar scottaohara avatar spekulatius avatar thatchej avatar tibor avatar tomlutzenberger avatar toshihidetagami avatar vrq avatar xtuc avatar yiqinzhao avatar

Watchers

avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.