Поиск по сайту:

Как настроить модные значки (Favicons) для вашего сайта

Фавиконы — это крошечные значки, которые вы видите на вкладках браузера. Обычно это простые файлы ICO, но в последние годы они стали чем-то вроде значка для вашего веб-сайта с многочисленными конкурирующими размерами и типами.

Как вы используете фавикон?

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

Если у вас нет точного размера или формата, большинство браузеров будут использовать изображение с самым высоким разрешением, которое они могут поддерживать, и масштабировать значки вверх или вниз. На самом деле вам не нужно включать 20 разных файлов favicon для каждого «официального» разрешения значка, достаточно пары файлов с высоким разрешением в дополнение к стандартному. Но, если вам нужно включить каждый из них, вы можете обратиться к этой шпаргалке для получения дополнительной информации.

Если у вас есть изображение, которое вы хотите использовать в качестве значка, вы можете создать фавиконы вручную в любом фоторедакторе. Однако ради здравомыслия вы, вероятно, захотите использовать генератор фавиконов, чтобы делать это автоматически. Это создаст группу файлов, которые вы захотите связать в тегах <link> и <meta> в разделе <head> HTML вашего сайта.

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

Обычные теги Favicon

Исходные значки представляют собой файлы favicon.ico. Минимальный размер — 16×16, но файлы ICO могут содержать несколько разных разрешений. Обычно favicon.ico – это набор значков размером 16 × 16, 32 × 32 и 48 × 48, объединенных вместе. Вы можете создать эту иконку из любого PNG, используя онлайн-генераторы фавиконок.

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

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

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

Если ваш значок не работает, скорее всего, файл находится не в том месте. Проверьте, доступен ли http://www.yourwebsite.com/favicon.ico и правильно ли он отображается в вашем браузере. Если вы загрузили файл вручную, у него могут отсутствовать надлежащие разрешения, которые вы можете исправить из командной строки с помощью:

sudo chmod +r favicon.ico

Что позволит его прочитать вашему веб-серверу.

PNG Фавиконы

Большинство новых браузеров поддерживают значки PNG с более высоким разрешением для использования в областях, отличных от панели вкладок, например на странице новой вкладки Chrome или на рабочем столе Android. Вы, вероятно, захотите, чтобы ваша иконка не выглядела пиксельной при увеличении.

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

<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

Генератор фавиконок также создает файл android-chrome-512x512.png , но он будет проверяться автоматически и не нуждается в теге. Chrome на Android будет использовать значок Apple Touch, если он отсутствует. Если вы хотите включить его, вы можете включить значок PNG любого размера, изменив размеры и указав на другой файл:

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

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

Значок Apple Touch

Этот значок используется, когда ваша веб-страница добавляется на главный экран пользователей iOS из Safari, а также в различных других местах пользовательского интерфейса iOS. Для экранов Retina наличие значка с высоким разрешением имеет большое значение.

Его точный размер сильно изменился в разных версиях iOS, но он всегда будет квадратным, а его текущая ширина составляет 180 пикселей для iPhone Retina. Вы можете добавить значок iOS с помощью ссылки apple-touch-icon, например:

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

iOS будет автоматически уменьшать значки с более высоким разрешением, но вы можете добавить несколько значков разных размеров, чтобы немного сэкономить трафик, так же, как и значки PNG.

Большинство браузеров автоматически проверяют наличие /apple-touch-icon.png, поэтому вам может даже не понадобиться этот тег. Поскольку этот значок довольно распространен, он также используется во многих браузерах в качестве запасного варианта, если вы не укажете значок PNG с высоким разрешением.

Значок Safari и Touch Bar

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

Вы можете сделать их автоматически с помощью генератора фавиконов, и вам нужно будет добавить:

<link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#5bbad5">

К вашему растущему списку ссылок. Safari не будет проверять это автоматически.

Плитки метро Windows 10

Если кто-то закрепит ваш сайт в меню «Пуск» или на рабочем столе, он отобразит значок вашего сайта.

Это должно вернуться к другим фавиконам, если у вас их нет, как и в Safari, это не совсем необходимо. Но чтобы лучше выглядеть при закреплении в меню «Пуск», вам понадобится несколько метатегов для настройки:

<meta name="msapplication-TileColor" content="#000000">
<meta name="msapplication-config" content="/browserconfig.xml">
<meta name="theme-color" content="#ffffff">

На самом деле просто определение цвета фоновой плитки и цвета темы. Остальная часть конфигурации помещается в файл XML:

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

Что кажется немного избыточным только для одной ссылки на файл. Вам все равно нужно поместить файл mstile-150x150.png в корень вашего веб-сервера, чтобы он работал правильно.

Как обойти размещение файлов в корневом каталоге вашего веб-сервера

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

location = /favicon.ico {
    root /new/images/path;
}

Это заставит nginx искать ваши значки в /new/images/path. Это не повлияет на клиентскую сторону, поэтому вам все равно нужно будет ссылаться на /favicon.ico, как если бы все было по-прежнему.