Создание favicon для сайта 2020 / Хабр

Favicon – это значок (иконка), который отображается во вкладке браузера, закладках, а также в сниппетах результатов поиска.

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

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

Какой формат использовать для favicon?

Раньше в качестве основного формата использовали ICO. Особенность данного формата – мульти-размерность. Данный файл может хранить в себе несколько размеров иконки. На смену ICO пришел формат PNG. ICO все еще поддерживаемый, но большинство современных браузеров выбирают PNG формат иконки, который легче. Некоторые браузеры не могут выбрать правильный значок в файле ICO, что приводит к неправильному использования значка с низким разрешением.

О каких платформах пойдет речь в этой статье?

• Десктопные браузеры
• Chrome на Android
• Иконка закладки в iOS (PWA)
• macOS
• Windows

Десктопные браузеры

Начнем, пожалуй, с классического десктопа.

Как было упомянуто ранее, формат ICO сегодня является устаревшим, но это не значит, что про него нужно забыть. Формат ICO может спасти вашу иконку и корректно отображать favicon в некоторых случаях. Например, до 11 версии IE PNG-формат не поддерживается. Поэтому для IE10 и младших версий нужно использовать старый формат ICO. В таком случае желательно использовать следующую комбинацию ICO и PNG форматов:

<link type="image/x-icon" rel="shortcut icon" href="…/favicon.ico">
<link type="image/png" rel="icon" href="… /favicon-16x16. png">
<link type="image/png" rel="icon" href="…/favicon-32x32.png">
<link type="image/png" rel="icon" href="…/favicon-96x96.png">
<link type="image/png" rel="icon" href="…/favicon-120x120.png">

Для создания мульти-размерной иконки ICO можно использовать сервис-конвертер icoconvert. При генерации иконки необходимо выбрать следующие размеры: 16х16, 32х32, 48х48 (highest resolution icon).

Иконки PNG имеют следующие размеры: 16х16, 32х32, 96х96, 120х120. Зачем иконка 120х120? Яндекс Справка сообщает, что может воспользоваться иконкой данного размера.

Если обратить внимание на значение rel (тип ресурса), то icon – учитывается большинством браузеров, а shortcut icon – учитывается браузером IE.

Chrome на Android

Android ожидает увидеть значок 192х192 в формате PNG, alpha-канал (прозрачность) приветствуется.

<link type="image/png" rel="icon" href="…/android-icon-192x192. png">

Android Chrome полагается на манифест веб-приложения. Любой сайт может использовать манифест для того, чтобы ссылаться на некоторые значки.

Сам файл манифеста формата json и объявляется следующей строкой:

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

Файл манифеста для Android Chrome можно сгенерировать с помощью сервиса RealFaviconGenerator.

{
 "name": "My Application",
 "short_name": "App",
 "description": "Application OK",
 "lang": "ru-Ru",
 "start_url": "/",
 "scope": "/",
 "display": "standalone",
 "theme_color": "#ffffff",
 "background_color": "#ffffff",
 "icons": [
  {
   "src": "\/res\/img\/icons\/android-icon-72x72.png",
   "sizes": "72x72",
   "type": "image\/png",
   "density": "1.5"
  },
  {
   "src": "\/res\/img\/icons\/android-icon -96x96.png",
   "sizes": "96x96",
   "type": "image\/png",
   "density": "2.0"
  },
  {
   "src": "\/res\/img\/icons\/android-icon-144x144. png",
   "sizes": "144x144",
   "type": "image\/png",
   "density": "3.0"
  },
  {
   "src": "\/res\/img\/icons\/android-icon-192x192.png",
   "sizes": "192x192",
   "type": "image\/png",
   "density": "4.0"
  },
  {
   "src": "\/res\/img\/icons\/android-icon-512x512.png",
   "sizes": "512x512",
   "type": "image\/png"
  }
 ]
}

Иконки должны иметь следующие размеры: 72х72, 96х96, 144х144, 192х192, 512х512 в формате PNG, прозрачность приветствуется. Так как иконка может иметь прозрачный фон, то в манифесте можно указать цвет с помощью background_color.

Стоит отметить, что на телефоне пользователь имеет возможность сохранить страницу браузера на главный экран. Это будет просто ссылка на страницу вашего сайта, подтянется иконка с названием android-icon-192×192.png, которая объявлена у вас в коде.

Если же подключить к сайту манифест, то при открытии страницы пользователю может быть предложено сохранить сайт в качестве приложения. В данном случае вы имеет возможность объявить визуально ту же иконку (android-icon-192×192.png) или переделать дизайн иконки для приложения под свои нужды и объявить в манифесте с соответствующими размерами.

Иконка закладки в iOS (PWA)

iOS Safari ожидает увидеть apple touch icon. Это иконка PNG формата 180х180, без alpha-канала (без прозрачности). Углы иконки будут автоматически скруглены, что упрощает создание apple touch icon.

Пользователи iOS также могут добавить сайт на главный экран, и он будет выглядеть как приложение. Такая ссылка отображается в виде значка и называется Web Clip.

Нижеперечисленные размеры иконок предназначены для поддержки различных устройств, например, для iPhone и iPad:

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

В коде нужно добавить атрибут rel=«apple-touch-icon» и указать размер с помощью sizes.

Если на сайте нет значка, размер которого является рекомендованным для устройства, то будет использована сама близкая по размеру иконка большего размера. Основная apple touch icon это иконка размером – 180х180. Остальные устройства могут уменьшать иконку.

При создании иконки не забывайте об отступах. Они должны быть не менее 4px со всех сторон. Это необходимо, чтобы ваша иконка не обрезалась, так как значок приложения в iOS имеет скругленные углы.

Следует отметить, что устройства под iOS не единственные, которые ищут apple touch icon. Некоторые браузеры, вроде Android Chrome, могут использовать apple touch иконки, так как они встречаются чаще других PNG иконок высоких разрешений.

macOS

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

Чтобы добавить иконку необходимо использовать формат SVG, который позволит сделать маску иконки. Данная иконка будет отображена при закреплении вкладки в Safari.

<link color="#e52037" rel="mask-icon" href="…/safari-pinned-tab.svg">

В коде нужно добавить атрибут rel=«mask-icon». Сама SVG-иконка должна быть черного цвета. Цвет иконки задается в атрибуте color=»#e52037″.

SVG-иконка используется в закрепленной вкладке (pinned tab – no focus) в монохромном виде. При наведении (pinned tab – focus) иконка будет закрашена в цвет, который имеет атрибут «color». В touch bar также передается цвет атрибута «color».

При создании иконки необходимо убрать все имеющиеся тени, сделать ее плоской и простой. Упростить иконку до одного объекта можно с помощью операций «Union» и «Flatten». Данные операции легко применить в программе Figma.

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

Windows

С Windows нужно немного запариться, чтобы сделать хорошо.

Для IE10 и более младших версий необходимо использовать формат ICO, так как до IE11 формат PNG не поддерживался.

С приходом IE11 и Windows 8.1 появилась возможность закреплять сайты в виде живых плиток. Для маленьких плиток используется по умолчанию favicon, а для больших и широких плиток необходимо задавать изображение конкретного размера. Это можно сделать с помощью добавления тегов метаданных в разметку сайта или создать browserconfig. xml (файл конфигурации браузера).

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

<meta name="msapplication-TileImage" content="…/mstile-144x144.png">
<meta name="msapplication-square70x70logo" content="…/mstile-70x70.png">
<meta name="msapplication-square150x150logo" content="…/mstile-150x150.png">
<meta name="msapplication-wide310x150logo" content="…/mstile-310x310.png">
<meta name="msapplication-square310x310logo" content="…/mstile-310x150.png">

Данной строкой мы указываем цвет фона плитки:

<meta name="msapplication-TileColor" content="#2b5797">

Можно указать имя вашего веб-сайта:

<meta name="application-name" content="My Application">

Что такое browserconfig? Это XML-документ, в котором перечислены различные значки, соответствующие пользовательскому интерфейсу Metro UI.

Чтобы подключить файл browserconfig в разметке необходимо добавить следующую строку в head:

<meta name="msapplication-config" content="…/browserconfig.xml">

Сам файл будет выглядеть следующим образом:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
    <msapplication>
        <tile>
            <square70x70logo src="…/mstile-70x70.png"/>
            <square150x150logo src="…/mstile-150x150.png"/>
            <square310x310logo src="…/mstile-310x310.png"/>
            <wide310x150logo src="…/mstile-310x150.png"/>
            <TileColor>#ffc40d</TileColor>
        </tile>
    </msapplication>
</browserconfig>

В browserconfig файле определены изображения для различных размеров плитки.

Microsoft рекомендует брать больший размер изображений в целях поддержки экранов с высокой плотностью пикселей.

В следующем списке приведены некоторые рекомендации по использованию различных размеров:

• Small — 70×70 (Рекомендуемый размер: 128×128)
• Medium — 150×150 (Рекомендуемый размер: 270×270)
• Wide — 310×150 (Рекомендуемый размер: 558×270)
• Large — 310×310 (Рекомендуемый размер: 558×558)

Например, для картинки 70х70 рекомендуемый размер 128х128. Это означает, что нужно создать картинку с прозрачным фоном размером 128х128, название которой будет mstile-70×70. То же самое нужно проделать с остальными размерами.

Подготовка favicons

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

Например, в моем случае вес всех изображений был 200кб, после сжатия 50кб. Качество изображений практически не изменилось. Вы можете воспользоваться любым удобным сервисом для сжатия картинок. Я использовала iloveimg.

Заключение

Последовательность подключения в разметке веб-сайта:

<link type="image/x-icon" rel="shortcut icon" href="…/favicon.ico">
<link type="image/png" rel="icon" href="… /favicon-16x16.png">
<link type="image/png" rel="icon" href="…/favicon-32x32.png">
<link type="image/png" rel="icon" href="…/favicon-96x96.png">
<link type="image/png" rel="icon" href="…/favicon-120x120.png">
<link type="image/png" rel="icon" href="…/android-icon-192x192.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-120x120. png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-180x180.png">
<link color="#e52037" rel="mask-icon" href="…/safari-pinned-tab.svg">
<meta name="msapplication-TileColor" content="#2b5797">
<meta name="msapplication-TileImage" content="…/mstile-144x144.png">
<meta name="msapplication-square70x70logo" content="…/mstile-70x70.png">
<meta name="msapplication-square150x150logo" content="…/mstile-150x150.png">
<meta name="msapplication-wide310x150logo" content="…/mstile-310x310.png">
<meta name="msapplication-square310x310logo" content="…/mstile-310x150.png">
<meta name="application-name" content="My Application">
<meta name="msapplication-config" content="…/browserconfig.xml">
<link rel="manifest" href="…/manifest.json">
<meta name="theme-color" content="#ffffff">

С помощью последней строки кода «theme-color» можно закрасить адресную строку и строку уведомлений в любой цвет. В значении content задается цвет.

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

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

Фавикон – его значение, создание favicon для сайта

Последнее обновление: 17 октября 2022 года

42887

О чем статья:

• 
  Что такое фавикон и каких форматов он бывает

• 
  Какие требования предъявляют разные платформы

• 
  С помощью каких инструментов можно создать иконку

• 
  Можно ли не создавать фавикон и как это повлияет на выдачу

Что такое фавикон 

Favicon – это сокращение от favorites icon, то есть иконка для избранного. Это может быть логотип сайта или любое другое изображение, которое позволит сделать ресурс узнаваемым. Первоначально фавикон служил для визуального выделения сайтов в закладках. Сейчас он отображаться практически везде, где это возможно: во вкладках и на пустом начальном экране десктопных и мобильных браузеров, в адресной строке и на странице поисковой выдачи рядом с url сайта. Когда вы сохраняете закладку на сайт на главном экране мобильного устройства, там тоже будет отображаться фавикон. Поэтому если раньше можно было создать favicon одного размера только для отображения в браузере, то сейчас необходимо генерировать иконки под разные контексты, платформы и технологии.

Так выглядят фавиконки во вкладках браузера и в сохраненных ссылках. 

Формат и стили фавиконов

Очень долго основным форматом фавикона был .ico. Он удобен тем, что в файл можно прописать сразу несколько размеров иконок с разной битностью. Сейчас ему на смену пришли форматы . png и .svg. Формат .svg используется в Safari MacOS, а .png — в остальных операционных системах и платформах. .ico до сих пор используется, но современные версии браузеров иногда не могут выбрать правильную иконку в файле, из-за чего фавикон отображается в низком разрешении. Фавиконку можно сделать в форматах .jpeg и .gif, однако мы не рекомендуем их использовать, потому что такие фавиконы поддерживают не все браузеры.

С помощью сервиса caniuse.com можно проверить поддержку браузерами разных типов фавиконов. Современные сайты переходят на форматы фавиконов в .svg и .png, так как те мало весят и хорошо отображаются.. 

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

Фавиконки отображаются на пустой стартовой странице Google

Особенности фавиконов для разных платформ

Десктоп

Несмотря на то, что формат . ico постепенно устаревает, его всё ещё можно встретить в браузерах Internet Explorer 10 версии и ниже. В них .png не поддерживается, поэтому для корректного отображения нужно прописать в коде сайта комбинацию .ico и .png форматов фавиконок. Размеры иконок: Google рекомендует устанавливать иконки, размеры которых кратны 48 пикселям. Т.е. 48х48, 96х96, 144х144. Или использовать формат .svg, который не имеет конкретного размера. Яндекс указывает в Справке, что рекомендуемые размеры favicon: 120х120 пикселей – именно такая иконка выглядит четче и заметнее в его сервисах, а также 16х16, 32х32 пикселей. Из всех форматов рекомендуемый – также .svg.

Если вы используете формат .ico, мультиразмерную иконку удобно создавать в сервисе icoconvert или аналогичном. В настройках выберите следующие размеры: 16х16; 32х32; 48х48 пикселей. Andriod, Chrome и Opera Google рекомендует создать фавикон для этих платформ размером 192х192 и 512х512 пикселей в формате . png. Назовите файлы соответственно android-icon-192×192.png или android-chrome-512×512.png.

Так выглядят фавиконы в мобильной версии браузера Google Chrome

Andriod, Chrome и Opera

Google рекомендует создать фавикон для этих платформ размером 192х192 и 512х512 пикселей в формате .png. Назовите файлы соответственно android-icon-192×192.png или android-chrome-512×512.png. 

Если вы хотите, чтобы иконку вашего сайта можно было сохранить на домашнем экране телефона, планшета и даже телевизора теперь, создайте файл .png размером 192х192 пикселя и веб-манифест – текстовый файл JSON, который предоставляет информацию о приложении. Затем добавьте файл site.webmanifest на свой сайт и сошлитесь на него в HTML-странице в теге <head> таким образом:

<link rel=”manifest” href=”/site.webmanifest”>

В манифесте есть ключ icons. Он принимает список иконок, их размеры и форматы. Если его не указать, браузер будет искать в коде такие варианты, как favicon. ico, <link rel=”icon” или, в крайнем случае, использует скриншот страницы.

Если вы подключили манифест, то можно сохранить сайт на экране устройства, как приложение. 

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

Mac OS и iOS Safari Web Clip

Для корректного отображения в Mac OS favicon нужно создавать в формате .svg. Тогда иконка корректно отобразится при закреплении вкладки в браузере Safari. При создании фавикона, его нужно сделать простым, плоским и убрать все тени.

Для iOS Safari создают apple touch icon – фавикон в формате .png размером 180х180 пикселей. Как и в ОС Android, страницу сайта можно сохранить на экран мобильного устройства, и иконки в этом случае будут выглядеть как приложение. Такая ссылка называется Web Clip.

При создании фавикона для iOS помните, что уголки иконки будут автоматически скруглены, поэтому отступите от краев примерно по 4 пикселя с каждой стороны.

Apple touch icon используются не только в iOS. Браузер Chrome также может искать их в коде сайта, так как такие фавиконки часто встречаются, сделаны в нужном формате .png и в высоком разрешении.

Размеры фавиконов для разных экранов устройств Apple:

Для iPhone 6 Plus версия 8 и выше – 180х180 пикселей.

Другие варианты 

Как создать?

Для создания фавикона используйте графические редакторы или специальные сервисы. 

Adobe Photoshop или Figma

Если у вас есть навыки работы в графических редакторах, будет несложно создать фавиконку. В Photoshop, например, для этого даже есть специальный плагин – Favicon.ico. В редакторе сразу можно задать размер созданного

изображения в пикселях и фон – прозрачный или непрозрачный.

Realfavicongenerator.net – генерирует фавикон разных размеров онлайн. Загружайте исходник размером не менее 260х260 пикселей, желательно квадратной формы. Затем выберите настройки для iOS, Android, Windows Phone, MacOS Safari. Дополнительно выберите степень сжатия. В результате получаете все типы иконок и код для вставки. 

Favicon.cc – еще один сервис для создания favicon формата .ico. Вы можете загрузить готовую картинку или нарисовать самостоятельно, используя инструменты графического редактора.

Не стоит создавать фавикон простым переименованием файла в нужный формат. Допустим, у вас есть файл favicon.png и вы его просто переименовываете favicon.ico. Такой значок будет отображаться с ошибкой или не показываться.

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

Как установить 

Задайте правильное имя – favicon.ico или другой тип расширения. Помните, что браузеры прежних версий не смогут определить иконку, если она будет в другом формате. Перед загрузкой на сайт откройте свойства файла, убедитесь, что нужный формат есть не только в названии файла, но и в его типе.

Делайте кроссплатформенные иконки. Пропишите правильно размеры и форматы для разных мобильных платформ и браузеров. Современные роботы и браузеры при отображении выбирают наиболее подходящий формат из загруженных. Он будет отображаться лучше, чем при ресайзе, когда фавикон загружен один и его приходится изменять под требуемые размеры. Воспользуйтесь сервисом realfavicongenerator.net.

Положите файлы в корневую директорию сайта и проверьте корректность. Для этого введите в адресную строку “yoursite.com/favicon.ico” для файлов формата .ico, для других форматов — соответствующее расширение файла. Браузер должен отобразить иконку.

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

Десктоп (ico) — <link rel=»icon» type=»image/ico» href=»favicon.ico»>

Декстоп (png) — <link rel=»icon» type=»image/png» href=»favicon.png»>

Apple — <link rel=»apple-touch-icon» href=»apple-touch-favicon.png»>

Safari — <link rel=”mask-icon” href=”icon.svg”>

Андроид — <link rel=»shortcut icon» href=»favicon.png»>

Иконки в устройствах Apple всегда закругляются по углам, чтобы этого избежать используйте apple-touch-icon-precomposed вместо apple-touch-icon.

Проверьте ответ сервера. Фавикон индексирует специальный робот. Чтобы индексация прошла успешно, проверьте, что ссылка на фавикон не закрыта от индексации в файле robot.txt и отдает ответ сервера HTTP 200.

Узнайте, виден ли фавикон. Проверьте через сервисы, подставив адрес своего сайта: 

• 
  в Яндекс — http://favicon.yandex.net/favicon/mysite.ru

• 
  в Google — http://www.google.com/s2/favicons?domain=mysite.ru.

Если у сайта нет фавиконки, то Яндекс.Вебмастер предупреждает об ошибке. Она может отображаться в журнале с системной информацией. Если же браузер не нашел в коде сайта нужный файл, например, favicon.ico, то сервер зафиксирует ошибку 404.

Когда поисковые роботы видят наличие технических недостатков, то понижают сайт в выдаче. Так фавиконы косвенно влияют на SEO-продвижение ресурса.

Статья

Изменения в Яндексе на 2022 год: новые метрики качества

#SEO

Статья

Как размещать рекламу в поисковых подсказках Яндекс

#SEO

Статья

Как организовать эффективную работу SEO in-house? Кейс интернет-магазина «Петрович»

#SEO

Запомните

1. Формат. ico устаревает. И Google, и Яндекс рекомендуют и использовать форматы .svg и .png. Проверяйте, какие форматы поддерживают браузеры с помощью сервиса caniuse.com.
2. Раньше было достаточно создать один размер фавикона 16х16 пикселей. Сейчас делайте иконки во всех размерах. Если создали фавикон одного размера, то многие браузеры смогут перевести его нужный размер, но не исключены ошибки и некорректное отображение. Если в коде будут прописаны все размеры, то браузер подтянет нужный.

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

4. 
   Чтобы сделать favicon, воспользуйтесь графическими редакторами – Adobe Photoshop или Figma. Или специальными сервисами: realfavicongenerator.net, favicon. cc и аналогичными. Генерируйте иконки online сразу для всех видов браузеров и мобильных платформ.

5. 
   Положите созданную фавиконку в корневой каталог сайта или пропишите ссылку в теге <head>. Если вам нужны разные иконки для каждого раздела сайта, прописывайте их на каждой странице.

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

7. 
   Проверьте корректность индексации. Ответ сервера должен быть HTTP 200. Посмотрите видимость фавикона в Яндексе и Google через сервисы поисковиков.

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

Материал подготовила Светлана Сирвида-Льорентэ.

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

Фавикон — это графический
изображение (значок), связанное с определенной веб-страницей и/или веб-сайтом.
сайт. Многие последние пользовательские агенты (например, графические браузеры и
программы чтения новостей) отображают их как визуальное напоминание о веб-сайте.
в адресной строке или на вкладках. В википедии есть
статья о
favicons [FAVICON-WIKIPEDIA].

Чтобы добавить фавиконку на свой веб-сайт, вам потребуется как изображение, так и
метод указания того, что изображение должно использоваться в качестве фавиконки. Этот
документ объясняет метод, предпочитаемый W3C для указания
фавикон. Существует еще один распространенный метод, который показан ниже.
с объяснением того, почему этот метод несовместим с некоторыми
принципы веб-архитектуры. Оба метода применимы только к HTML и
XHTML, одно из обсуждаемых ограничений
ниже.

В этом документе подробно не обсуждается, как создать значок сайта.
изображение. Однако формат выбранного вами изображения должен быть 16×16.
пикселей или 32×32 пикселей с использованием 8-битных или 24-битных цветов.
формат изображения должен быть одним из PNG (файл
стандарт W3C), GIF или ICO.

Метод 1 (предпочтительный): использование значения атрибута

rel
определенный в профиле

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

 

 profile="http://www.w3.org/2005/10/profile"  >
  <ссылка отн = "значок"
      тип = "изображение/png"
      href="http://example.com/myicon.png"> 
[…]

[…]
 

Версия XHTML 1.0 очень похожа:

  0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 profile="http://www.w3.org/2005/10/profile"  >
  <ссылка отн = "значок"
      тип = "изображение/png"
      href="/где-то/myicon.png" /> 
[…]

[…]
 

Способ 2 (не рекомендуется): размещение значка на предопределенном URI

Второй метод указания значка основывается на использовании
предопределенный URI для идентификации изображения: «/favicon», который относится к
корень сервера. Этот метод работает, потому что некоторые браузеры
запрограммирован на поиск фавиконов с использованием этого URI. Этот подход
несовместимы с некоторыми принципами веб-архитектуры и в настоящее время
обсуждается группой технической архитектуры W3C
(TAG) в качестве их выдачи siteData-36.
Подводя итог этой проблеме: веб-архитектура разрешает менеджерам сайтов
управлять своим пространством URI (для данного доменного имени), как они видят
поместиться. Соглашения, которые не представляют согласия сообщества и которые
уменьшить параметры, доступные менеджеру сайта, не масштабируются и могут
привести к конфликту (поскольку общеизвестного списка этих
предопределенные URI). Одно практическое соображение иллюстрирует проблему:
многие пользователи имеют веб-сайты, даже если у них нет собственных
доменное имя. Эти пользователи не могут указывать фавиконы, используя второй
метод, если они не могут писать в корень сервера. Однако они могут использовать
первый способ указать фавикон, так как он более гибкий и не
запретить менеджеру сайта использовать один значок значка в одном месте
на сайте.

Есть несколько других известных посягательств на пространство URI,
включая файл «robots.txt» и местонахождение P3P-конфиденциальности
политика. Группа технической архитектуры изучает альтернативы
которые не затрагивают пространство URI без лицензии.

Использование профилей для определения таких терминов, как «значок»

Грубо говоря, профиль — это определение набора
условия. В идеале профиль включает как машиночитаемую информацию,
и удобочитаемая информация. В HTML 4.01 и XHTML 1.0 несколько
атрибуты, такие как rel атрибут не имеет предопределенного набора
ценности. Вместо этого автор может предоставить значения в соответствии с потребностями и
затем используйте профиль, чтобы объяснить, что означают значения. В нашем случае мы
рекомендовали авторам использовать значение «значок» и профиль, который
объясняет, что «когда мы говорим значок, мы имеем в виду «это значок сайта».

В методе 1 выше мы используем атрибут rel с
ССЫЛКА НА САЙТ
элемент и выбираем профиль с атрибутом профиль
в элементе HEAD.

Мы определили профиль, который вы можете свободно использовать для своих сайтов.

Ограничения

Описанные выше подходы имеют несколько ограничений.
включая предпочтительный метод (именно поэтому TAG продолжает работать
по вопросу):

• Подходы работают только в HTML или XHTML
• Предпочтительный подход связывает значок с HTML-документом,
  не собрание документов (т. е. сайт)
• Предлагаемый профиль для определения значения «значок» не является
  общепризнанный стандарт, что означает, что могут быть проблемы с функциональной совместимостью
  на практике.
• Стандарт отсутствует (по крайней мере, определенный в HTML 4.01)
  для машиночитаемых профилей, которые
  позволить браузеру узнать, что «это означает, что изображение является фавиконом». Таким образом,
  браузер должен быть запрограммирован заранее, чтобы распознать это конкретное
  значение отн. . Для получения дополнительной информации об использовании профилей
  в HTML и XHTML см. GRDDL
  [ГРДДЛ].

Ссылки

FAVICON-WIKIPEDIA

Фавикон , Википедия, Доступно по адресу
http://en.wikipedia.org/wiki/Фавикон.

ГРДДЛ

Сбор
Описания ресурсов из диалектов языков , D.
Азаэль-Массье, Д. Коннолли, редакторы, представление команды W3C, 16 мая.
2005 г. , http://www.w3.org/TeamSubmission/2005/SUBM-grddl-20050516/. Последняя версия
доступно на http://www.w3.org/TeamSubmission/grddl/.

HTML401

HTML
4.01 Спецификация , Д. Раггетт, А. Ле Хорс, И. Джейкобс,
Редакторы, рекомендация W3C, 24 декабря 1999,
http://www.w3.org/TR/1999/REC-html401-19991224. Последняя версия
доступно на http://www.w3.org/TR/html401.

ДАННЫЕ САЙТА-36

Улучшение метаданных веб-сайта в файлах robots.txt, w3c/p3p и favicon
и т. д. , TAG, Доступно на
http://www.w3.org/2001/tag/issues.html#siteData-36.

XHTML1

XHTML™ 1.0
Расширяемый язык гипертекстовой разметки (второе издание) , S.
Пембертон, редактор Рекомендации W3C, 1 августа 2002 г.,
http://www.w3.org/TR/2002/REC-xhtml1-20020801. Последний
версия доступна на http://www.w3.org/TR/xhtml1.

Благодарности

Следующие участники QA Interest Group и сотрудники W3C
внесли значительный вклад в содержание этого документа:
Доминик Азаэль-Массье (W3C), Крис Лилли (W3C) и
Оливье Теро (W3C).

Учебники — favicon.io

Что такое фавикон?

Фавикон — это небольшая иконка или набор иконок, связанных с
веб-сайт, веб-страница или веб-приложение. Он отображается внутри
вкладки браузера и панель закладок. Примеры ниже показывают
значки для Google, Reddit и Squarespace в браузере
вкладка

Ниже приведены некоторые фавиконы с нескольких популярных веб-сайтов.
отображается на панели закладок Chrome.

Для чего используется фавикон?

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

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

Какие есть альтернативные названия для фавикона?

Некоторые альтернативные названия для фавикона: значок браузера, избранное
значок, значок ярлыка, значок вкладки, значок URL и значок закладки.
Слово favicon является сокращением от «любимая иконка» и происходит от
Функция «Избранное» Internet Explorer, которая является самой современной
браузеры называют «закладками».

Какие распространенные форматы файлов favicon?

ICO — favicon.ico

Наиболее распространенными форматами фавиконки являются ICO, PNG и SVG, но есть
являются дополнительными форматами для определенных браузеров или устройств. ICO
формат файла был разработан Microsoft и является исходным файлом
формат фавикона. Формат уникален тем, что позволяет
для нескольких небольших изображений в одном файле. Это
выгодно, потому что маленькие значки, необходимые для фавикона в
Формат ICO (16×16, 32×32 и 48×48 пикселей) можно масштабировать и
оптимизировать самостоятельно. На маленькие габариты нельзя положиться
браузер для автоматического изменения размера значка оптимальным образом.
Формат ICO поддерживается всеми браузерами, и это единственный
формат, поддерживаемый IE5–IE10.

PNG — favicon.png

Формат PNG — хороший формат, потому что это формат, который наиболее
люди привыкли и не требуют никаких специальных инструментов для
Создайте. При современных экранах высокое разрешение оригинала
Проблема маленьких размеров значков для маленьких разрешений больше не существует
существуют. Для браузеров, поддерживающих формат фавикона PNG
часто качество фавикона, отображаемого в
вкладка браузера или панель закладок будут выше формата ICO.
Недостатком формата PNG является то, что он несовместим
с IE5 по IE10.

SVG — favicon.svg

Формат SVG имеет преимущества перед форматами PNG и ICO, но
пока не имеет отличной поддержки браузеров. Файлы SVG очень
легкие, и они бесконечно масштабируемы. Это означает, что
качество изображения превосходно без ущерба для времени загрузки для тяжелых
картинки. Только Chrome, Firefox и Opera поддерживают формат SVG.
фавиконки.

Каковы общие размеры фавиконов?

Важно отметить, что ваш фавикон должен быть квадратным.

Для формата ICO рекомендуемые размеры: 16 x 16, 32 x 32 и 48 x 48.

This entry was posted in Семантическое ядро