Свой значок для сайта

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

Фавиконки в 2021 году

В 2021 году мы можем использовать SVG-значки в качестве фавиконки. Минимальный код, который следует размещать в head страницы.


<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">

Первая строчка meta с именем theme-color требуется для цвета значка в Chrome и Android.

Для старых браузеров можно использовать файл favicon.ico размером 32x32 в корне веб-сайта. Описание файла ниже в старой версии статьи.

Все остальные значки необязательно размещать в корне сайта.

Файл favicon.svg (имя может быть любым) является векторным. Размер не важен. Указывать тип type="image/svg+xml" теперь не нужно.

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


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

Файл apple-touch-icon.png с атрибутом apple-touch-icon нужен для значка на IOS-устройствах, а также для "ИзбранноеЭ на странице новой вкладки в браузере. Вам нужен только размер 180x180, и атрибут sizes лишний.

Файл manifest.json предоставляет информацию о вашем веб-приложении или веб-сайте. Значок используется в Android и Chrome. Нужен только самый большой размер 512x512. Приблизительное содержание файла:


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

Значок для сайта в 2017 году. Старая версия

Что такое значок веб-сайта и для чего он нужен? Для этого нам придётся вернуться в прошлое и вспомнить историю. Раньше все браузеры обозначали веб-страницы одинаковыми значками, например, в Internet Explorer это буква «e», которую опоясывает орбита на фоне листа бумаги, а у Firefox на значке изображена огненная лиса, которая обнимает земной шар. Но, каждый владелец сайта хочет использовать свой собственный значок, чтобы визуально отличаться от остальных сайтов в интернете. И такая возможность появилась в современных браузерах. Более того, для каждой страницы можно назначить отдельный значок. Однако, до сих пор, некоторые веб-мастера не пользуются этой возможностью.

Чтобы указать значок, соответствующий странице, достаточно прописать в разделе HEAD страницы следующее:

<link rel="shortcut icon" href="адрес значка" type="image/x-icon">

Вместо слов адрес значка необходимо указать URL-путь к файлу значка.

В данном примере тег link используется для указания отношений: ссылка указывает на значок для ярлыка страницы. Указание это обязательно, поскольку с помощью тега link могут указываться адреса не только значков, но и других объектов (например, стилевые таблицы). Регистр слов «shortcut icon» не важен; их можно записывать как строчными, так и заглавными буквами.

Слово type служит для указания MIME-типа. В данном случае «image/x-icon» означает формат файла, содержащий значок в формате Microsoft Windows. Такие значки понимают практически все браузеры, способные отображать значки сайтов. Если к странице подключён значок другого типа, и браузер не умеет отображать значки указанного типа, то он не станет и пытаться скачивать значок из Сети.

Теперь поговорим об особой роли файла favicon.ico. Слово Favicon («значок для Избранного»; происходит от слов «Favorites Icon» , обозначающих значки для папки с закладками или избранных ссылок) возникло благодаря Internet Explorer. Большинство браузеров, если не находят ни одного тега link, который соответствовал бы значку, то полагают, что у страницы нет собственного значка, и поэтому используют для неё стандартный значок страницы (свой для каждого браузера, о чем уже говорилось выше). Но Internet Explorer дополнительно пытается найти в корне сайта файл с кодовым именем favicon.ico, чтобы использовать этот значок. Некоторые веб-мастера решили вообще отказаться от тега link, просто поместив значок favicon.ico в корень сайта.

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

  • файл со значком можно назвать как угодно, а не только favicon.ico
  • можно назначить много разных значков нескольким разделам сайта, а не только один и только всему сайту сразу
  • если значок не прописан в , то его не увидят другие браузеры (Firefox, Netscape, Konqueror, Opera)

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

Поэтому, свои значки желательно не называть стандартным именем favicon.ico. Помимо всего прочего, оно ещё и плохо соответствует внешнему виду значка, описывая одно лишь его предназначение.

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

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

Значки бывают либо в естественном цвете (True Color), либо с фиксированной палитрой (из двухсот пятидесяти шести, шестнадцати, или всего из двух цветов).

Размер 16×16 является основным стандартным размером значка веб-сайта. Для браузера Internet Explorer 5.0 значок 16×16 является обязательным: если IE5 не обнаружит в файле значок 16×16, файл значка окажется проигнорирован браузером. Internet Explorer отображает значки 16×16 для ярлыков веб-сайта, создаваемых пользователм, в собственном меню «Избранное». Кроме того, благодаря интеграции Internet Explorer и Windows, перетаскиванием в другие окна ярлыки 16×16 могут быть созданы в области быстрого запуска на панели задач («Quick Launch») или в меню «Пуск > Программы». Ярлыки, созданные перетаскиванием в другие папки, тоже имеют размер 16×16 при просмотре папки в режимах «Мелкие значки», «Список» и «Таблица». После перехода по любому из этих ярлыков Internet Explorer начинает отображать значок 16×16 и в поле адреса страницы, слева от её URL. Всё вышеописанное верно только для страниц, находящихся в интернете — и не работает для локальных страниц.

Подобное поведение Internet Explorer, кстати, позволяет веб-мастеру сайта отслеживать тех посетителей, которые заносят его в «Избранное» или иным способом запоминают адрес сайта в виде ярлыка, поскольку только в этом случае происходит обращение за значком на веб-сервер.

Остальные браузеры отображают значок 16×16 в строке адреса независимо от наличия или отсутствия сайта в «избранном» или «отмеченном» списке.

Mozilla Firefox и IE8 поддерживают открытие нескольких закладок в одном окне, отображая значки веб-сайтов на корешках таких закладок. Это чрезвычайно удобно, поскольку позволяет быстро ориентироваться при выборе закладки.

Отсюда следует вывод, что при создании значка для сайта или страницы главным является размер 16×16, и именно его следует прежде всего помещать в ICO-файл.

Если стоит выбор между сохранением значка 16×16 либо в естественном цвете (True Color), либо в формате с фиксированной 256-цветной палитрой, то какой выбор следует сделать и почему? Следует выбрать естественный цвет, поскольку в данном случае именно это позволит сократить объём файла.

Наряду с основным размером значка 16×16, существует ещё пара стандартных размеров — 32×32 и 48×48. Эти крупные значки используются операционной системой Windows для представления ярлыков страниц интернета на рабочем столе, а также при просмотре папки в режиме «Крупные значки».

К сожалению, такое использование значков сайта построено на тесной интеграции браузера и операционной системы, поэтому оно начинается только в том случае, если ярлык (URL-файл) был создан перетаскиванием из Internet Explorer. Какой размер будет использован — 32×32 или 48×48? Это зависит от настроек свойств экрана — вкладка «Эффекты», группа «Параметры отображения», пункт «Использовать крупные значки». Если этот пункт включён, то 48×48, иначе 32×32. Использование значков размером 48×48 популярно на дисплеях улучшенной разрешающей способности, где значки 32×32 уже слишком мелки.

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

Исходя из вышеприведённых соображений, в каждом из ваших ICO-файлов должно присутствовать по крайней мере три значка: один 16×16, один 32×32, и один 48×48. Тогда и значки всех размеров будут в наличии, и вид их не окажется искажён.

Дополнительные возможности

Может ли значок быть не в формате ICO, а в каком-нибудь другом формате — например, в анимированном GIF? Да, может, если браузер поддерживает подобное. Для этого достаточно изменить MIME-тип и указать адрес GIF-файла:

<link rel="shortcut icon" href="адрес значка.gif" type="image/gif" />

Браузеры, которые понимают GIF-значки сайтов (например, Mozilla) будут демонстрировать анимацию в строке адреса, слева от URL, а также во всех остальных местах, где ими отображаются значки. Браузеры типа Internet Explorer 6 просто не станут скачивать значок этого типа. Именно поэтому следует указывать тип.

Можно ли сделать так, чтобы значок был анимированным GIF там, где это возможно, а в остальных браузерах оставался неподвижным ICO-изображением? Такой эффект будет достигнут, если указать два link-тега подряд, один за другим:

<link rel="shortcut icon" href="адрес значка.ico" type="image/x-icon" />
<link rel="shortcut icon" href="адрес значка.gif" type="image/gif" />

Браузер всегда берёт последний из указанных значков — при том условии, что понимает тип значка. Таким образом, понимающие GIF возьмут GIF, остальные возьмут ICO.

Этот трюк работает и со значками нестандартных форматов — таких, как MNG. Такие значки надо всегда указывать последними — а перед ними приводить, как минимум, ICO-версию.

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

Значки для iPhone, iPad

В связи с популярностью устройств от компании Apple стала актуальной создания значков для iPad и iPhone. Когда пользователь в Safari выбирает команду Добавить в «Домой» на рабочем столе устройства появляется значок. Для этой цели необходимо создать картинку в формате PNG с размерами 72×72 пикселей для iPad и 114×114 пикселей для iPhone 4. После этого необходимо прописать:

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

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

До После

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

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

HTML5

С появлением HTML5 стало возможным использовать новый атрибут sizes. И теперь можно встретить такую запись.


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

В этом примере используется значок размером 32 на 32. Иногда создаётся целый список подобных записей для разных размеров, которые могут использоваться разными браузерами.

В дополнение. Можно использовать разные размеры значков.


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

Программы для создания ICO-файлов

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

Не забывайте о том, что фиксированная палитра не обязана состоять из системных цветов. Поэтому значки 32×32 и 48×48 следует сохранять, по крайней мере, в 256-цветной палитре, поскольку в True Color они будут занимать слишком много места, а грамотный подбор палитры способен сделать ограниченность количества цветов практически незаметной.

Также вы можете воспользоваться различными онлайн-сервисами, которые позволяют загрузить на сайт нужный значок или PNG-файл и получить готовый значок для вашего веб-сайта:
www.favicon.cc/
www.favico.com
FavIcon Generator
Genfavicon

Дополнительная информация

Добавляем favicon в Wordpress
Какие нужны фавиконки

Реклама