Всё что вам нужно знать о фавиконах

Обновлено 11 янв. 2019 г.

Favicon это иконка для вашего сайта. Обычно она содержит логотип. Различные устройства и программы требуют изображения определённого размера. Ниже мы опишем все популярные форматы Favicon. Они покроют 99% случаев применения.

Содержание

Базовый Favicon

Favicon для устройств Apple

Android-устройства и другие программы

Продукты Microsoft

Базовый Favicon

Это базовый Favicon. Его размер 16x16 пикселей.

Каждый сайт должен содержать 16x16 пиксельный фавикон файл. Он должен быть доступен по адресу /favicon.ico. То есть находиться в корневом разделе сайта. Этот файл использовался первыми браузерами и до сих пор не утратил актуальности.

Вы можете сделать такое изображение из PNG картинки использовав сервис http://icoconvert.com/.

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

<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png" />

SVG фавикон будет смотреться хорошо на любом устройстве.

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

Мы рекомендуем размер 48x48 пикселей. Так вы будете уверены, что Favicon выглядит хорошо на больших мониторах.

Favicon для устройств Apple

Продукты Apple требуют расширенный набор Favicon изображений. Например, пользователь может разместить быструю ссылку на ваш сайт на Home Screen своего устройства. В этом случае изображения 48x48 будет слишком маленькое.

На домашней странице браузера Safari вы можете увидеть ссылки на популярные и избранные сайты. Чтобы выглядеть хорошо на ней, у вас должен быть Favicon размером 180x180 пикселей.

В зависимости от устройства и места размещения могут использоваться разные favicon изображения. Но достаточно загрузить только картинку размером 180x180 пикселей. Более мелкие изображения будут созданы из этого файла. Разместите следующий тег в секции <head> и укажите верный путь до файла в атрибуте href.

<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-180x180.png" />

Также загрузите иконку под названием /apple-touch-icon-precomposed.png размером 48x48 пикселей в корень сайта. Этот файл загружается программами Apple по умолчанию. Более подробную информацию вы можете найти на https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html.

Android-устройства и другие программы

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

Файл Manifest.json это универсальный стандарт для указания favicon изображений. Помимо Android-устройств и различных программ, он используется браузерами Chrome и Mozilla.

Разместите следующий тег в секции :

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

Затем загрузите в корень сайта файл manifest.json со следующим содержанием:

{
    "icons": [
        {
            "src": "/iconImage48.png",
            "sizes": "48x48",
            "type": "image/png"
        },
        {
            "src": "images/touch/homescreen144.png",
            "sizes": "96x96",
            "type": "image/png"
        },
        {
            "src": "images/touch/homescreen144.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/iconImage512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}

Мы рекомендуем указать как минимум 4 изображения со следующими размерами: 48x48, 96x96, 192x192 и 512x512 пикселей. В этом случае вы можете быть уверенными, что ваш сайт будет хорошо выглядеть во всех программах. Более подробно о manifest.json вы можете прочитать здесь https://developer.mozilla.org/en-US/docs/Web/Manifest.

Продукты Microsoft

Данные для указания Favicon изображений для продуктов Microsoft указываются в файле browserconfg.xml. Чтобы сообщить о его наличии, добавьте следующий код в секцию <head>:

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

Затем в корень сайта, загрузите файл /browserconfg.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"/>
        </tile>
    </msapplication>
</browserconfig>

Мы рекомендуем указать как минимум 4 изображения со следующими размерами: 70x70, 150x150, 310x310 и 310x150 пикселей. Ссылка на официальную документацию https://msdn.microsoft.com/library/dn320426(v=vs.85).aspx

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