Favicon в формате svg: Еще не используешь SVG фавиконки? / Хабр |

Posted:

Янв 25, 2021

Comments:

Favicon в формате svg: Еще не используешь SVG фавиконки? / Хабр

Содержание

Еще не используешь SVG фавиконки? / Хабр

Тебе нужно использовать SVG фавиконки. Они поддерживаются во всех современных браузерах (Ну почти во всех).

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

Иконка

Главная фивиконка может быть SVG любого размера. Тип type="image/svg+xml" не нужен.

<link rel="icon" href="favicon.svg">

Тач-иконки

Для иконки на IOS девайсах, а также для избранное на странице новой вкладки в браузере. Вам нужен только размер 180 x 180, и атрибут sizes лишний.

Манифест

Файл manifest.json предоставляет информацию о вашем веб-приложении или веб-сайте. Эти строки являются обязательными для прохождения теста Lighthouse.

Значок используется Android и Chrome. Нужен только самый большой размер 512 x 512.

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

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

<meta name="theme-color" content="#ffffff">

Готово

Вот и все, что вам нужно для современных браузеров, все остальное не нужно. msapplication-TileImage можно добавить, если вам нужен другой значок в плитках Windows, в противном случае используется apple-touch-icon. TileColor больше не используется.

Все остальное

К сожалению, не все используют современные браузеры, но это можно легко решить, поместив favicon.ico размером 32 x 32 в корень вашего веб-сайта. Это работает везде, даже у вашей бабушки.

Темный режим

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

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

Результат

Вот окончательный результат. Скопируйте его в <head> вашего веб-сайта и не забудьте разместить favicon.ico в корне.

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

О favicon и не только

Форматы favicon

Основными форматами для favicon являются ICO, PNG и SVG. При желании, значок сайта можно сделать в форматах JPEG или анимированном GIF. Но из-за слабой поддержки основными браузерами использование таких значков превращается в нецелесообразную экзотику. Хотя и можно сделать favicon в формате GIF без анимации, но не нужно – лучше в PNG.

Favicon.ico

Хотя формат ICO сейчас считается устаревшим, но сбрасывать со счетов его ещё рано. Основными достоинствами этого формата являются: возможность хранения в одном файле нескольких вариантов размеров иконки сайта и поддержка полупрозрачности. Надо помнить что, IE10 и более ранние версии этого браузера понимают только ICO. Так же следует учитывать то, что этот формат довольно широко используется в операционной системе Windows. Т. е. favicon.ico используется как изображение для вкладок, панели задач, рабочего стола. Поэтому для корректного отображения на этих объектах, создаётся файл в формате ICO, содержащий три изображения рекомендуемых размеров: 16х16, 32х32 и 48х48. Сделать такой файл можно здесь. Подключение favicon.ico на сайте производится с помощью следующего кода:

<link href="/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />

В параметре href указывается путь до иконки сайта. В этом примере и далее в этой статье предполагается, что файл favicon размещён в корне сайта. Если файл иконки размещается не в корне сайта, то тогда нужно указать соответствующий путь.

Favicon.png

Формат PNG предоставляет более широкие возможности для изображения, чем ICO. Сейчас очень большое количество сайтов используют favicon в формате PNG. Он поддерживается всеми основными браузерами. Подключение favicon.png на сайте производится с помощью следующего кода:

<link href="/favicon.png" rel="icon" type="image/png" />

Favicon.svg

Формат SVG — новый открытый формат векторной графики. В силу того, что изображения в SVG масштабируются без потери качества, он идеально подходит для favicon. Этот формат является рекомендацией консорциума W3C, его поддерживают ещё не все браузеры, но за ним будущее. Подключение favicon.svg на сайте производится с помощью следующего кода:

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

Отслеживать поддержку SVG браузерами можно здесь.

Favicon – устройства, ОС, технологии

С приходом HTML 5 появилась возможность указывать размеры favicon. Теперь различные мобильные устройства или браузеры могут выбрать необходимый размер значка и использовать его, например, как изображение для ярлыка на рабочем столе. За указание размеров отвечает атрибут size. Делается это так:

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

Для favicon.svg можно сделать так:

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

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

Windows

Начиная с версии Windows 8. 1, появилась возможность закреплять сайты с помощью т. н. живых плиток. Для изображений на плитках малого размера будет использоваться favicon. Для средних и больших плиток лучше задать изображения подходящих размеров. Сделать это можно двумя способами: разместить в заголовке сайта специальные метатеги или создать файл конфигурации браузера. Второй способ более предпочтителен т. к. размещение лишних тегов метаданных увеличивает заголовок страницы, что не лучшим образом сказывается на скорости загрузки. И так, создаётся файл 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>#da532c</TileColor>
        </tile>
    </msapplication>
</browserconfig>

Он описывает четыре изображения для различных размеров живых плиток: три квадратные и одно прямоугольное. В теге TileColor указывается фоновый цвет плитки. Сами изображения следует брать большего размера, примерно в 1,8-2 раза. Например, для плитки 70×70 лучше взять изображение размером 128×128. Делается это с целью поддержки экранов с высокой плотностью пикселов. Подключение файла конфигурации браузера на сайте производится с помощью следующего кода:

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

Mac OS и Safari

Версии Safari под Mac OS поддерживают формат SVG. Такое изображение нужно для закладок в этом браузере. Но есть один момент – элементы изображения должны быть или чёрными или белыми. В коде подключения используется атрибут color. Так вот, после подключения все элементы чёрного цвета будут отображаться тем цветом, который указан в этом атрибуте. Подключение для Safari в Mac OS производится с помощью следующего кода:

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

Обратите внимание на то, что имя файла и значение rel должны быть такими, как в примере.

Apple (iOS)

Safari в устройствах Apple, на базе операционной системы iOS тоже использует иконку сайта для закладок. Но favicon может использоваться и как значок на рабочем столе. Для того, чтобы на устройствах Apple значок сайта смотрелся прилично, понадобятся изображения в формате PNG и несколько строк кода. Устройств на базе iOS довольно много и они имеют различные размеры экранов. Для каждого размера нужен свой значок. Размеры этих значков следующие: 57×57, 60×60, 72×72, 76×76, 114×114, 120×120, 144×144, 152×152, и 180×180. В некоторых источниках рекомендуется писать код для каждого размера favicon. Объясняется это тем, что иконки для устройств от Apple, в виду их большой популярности, используются (ищутся) устройствами других производителей. Вот так подключается изображение для одного из размеров:

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

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

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

Затем добавим строку кода из предыдущего примера:

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

Т. е. по крайней мере, основная иконка должна быть 180×180. Остальные устройства могут уменьшить изображение. Есть ещё одна тонкость, иконки в iOS оформляются в определённом стиле, т. е. используются скругленные уголки, тень, блики. Когда загружается значок сайта, устройство начинает приводить его к этому стилю. Если это не нужно, то добавляем следующий код:

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

А ещё можно указать заголовок:

<meta name="apple-mobile-web-app-title" content="Aitishnik.RU" />

Android

К сожалению, изображения в формате SVG пока не поддерживаются ОС Android. Поэтому используются изображения в формате PNG. Для настроек используется файл manifest.json. Он может быть следующего содержания:

{
    "name": "Aitishnik.RU",
    "icons": [
        {
            "src": "android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "android-chrome-256x256.png",
            "sizes": "256x256",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "start_url": "http://www.aitishnik.ru",
    "display": "standalone"
}

Файл – манифест описывает настройки отображения сайта на домашнем экране, как веб-приложения. В примере:

name – подпись к приложению. Если ключ name не указан, то для подписи будет использоваться содержимое тега title из заголовка сайта. Если значение name длинное, то можно добавить ключ short_name для короткой подписи.

icons – этот ключ определяет набор иконок. Внутри него ключи src, sizes и type определяют источник изображения, размер и тип изображения соответственно.

theme_color – передаёт цветовое значение строки состояния.

background_color – фоновый цвет для иконки на домашнем экране.

display – режим отображения веб-приложения.

Файл manifest.json подключается в заголовке сайта следующим кодом:

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

Заключение

У человека, прочитавшего всё вышеизложенное, может сложиться впечатление, что всё это очень сложно и нудно. Отчасти это так. Но к счастью, есть сервисы, которые делают всю эту работу за нас. Например, http://realfavicongenerator.net. На этом ресурсе можно сгенерировать все нужные иконки и получить код для вставки на сайт.

Вот и всё. Удачи в сайтостроении!

Помните, что у нас вы можете не только купить готовый сайт или заказать его разработку, но и подобрать подходящий тариф поддержки сайта, заказать продвижение сайта в поисковых системах, а так же зарегистрировать домен в одной из двухсот доменных зон и выбрать недорогой тариф хостинга! Айтишник РУ

Задать вопрос

Об авторе:

Меня зовут Андрей Золкин. Из более, чем пятнадцати лет работы в сфере информационных технологий, десять лет работаю с системами, базирующимися на открытом исходном коде. На страницах сайта Aitishnik.Ru веду блоги по CMC Joomla и Debian GNU/Linux.

Ещё о сайтостроении

- Сайт. С чего начать?
  
  Эта статья написана для тех, кому нужен интернет-сайт, но не представляющих с чего начать. Это краткое введение в мир web-сайтов, призванное помочь новичку сориентироваться в этом мире и принять правильные решения. Информация может быть…
- Какой хостинг самый дешевый
  
  Сайт готов и теперь перед его создателем стоит задача — приобрести для него хостинг. Здесь он будет делегироваться в течение 24-х часов. Как известно, компаний, предоставляющих хостинги, огромное множество. Зачастую вебмастера стараются…
- «Сайт под ключ» — как не обмануться
  
  Вам нужен сайт. Вы знаете, что сами его не сделаете. Вы поговорили с друзьями, имеющими сайт. Но Вам ничего не нравится. Вы вбиваете в поиск в интернете словосочетание «сайт под ключ» и получаете 6 миллионов ответов. Столько же при…
- О favicon и не только
  
  Сейчас каждый веб-мастер знает, что favicon – это значок (иконка) сайта, веб-страницы. А в далёком 2006 году, когда создавалась первая версия сайта aitishnik.ru, о favicon знали немногие и уж тем более, немногие его использовали. Тогда…
- Что лучше хостинг или VPS
  
  Сказать, то VPS лучше виртуального хостинга (или наоборот) некорректно, поскольку они предназначены для разных аудиторий.ВПС актуален в том случае, когда виртуальный хостинг не в силах поддерживать web-проект, или же пользователю нужно…
- Принцип работы интернет-магазина
  
  Сегодня компьютеры с выходом в интернет есть практически в каждом доме. Это и объясняет высокую популярность интернет-магазинов, открытие которых не требует больших финансовых вложений со стороны предпринимателя, так как для организации…

Вы уже используете фавиконы SVG? Руководство для современных браузеров.

| Антуан Буланже | Стартап

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

Кроме того, вам, вероятно, не нужны все эти ссылки и размеры значков, которые вы копируете из проектов в проекты. Давайте выясним, каков абсолютный минимум, слово за словом.

Главный фавикон может быть SVG любого размера. Тип type="image/svg+xml" не нужен.

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

Значок для устройств iOS, а также избранное из новой вкладки браузера и многое другое. Вам нужен только 180 х 180 размер, а атрибут размеры лишний.

manifest. json предоставляет информацию о вашем веб-приложении или веб-сайте. Эти строки обязательны для прохождения теста Lighthouse. Связанный значок используется Android и Chrome. Нужен только самый большой размер 512 x 512 .

 { 
 "name": "Starter", 
 "short_name": "Starter", 
 "icons": [{ 
 "src": "google-touch-icon.png", 
 "sizes": "512x512" 
 }], 
 "background_color": "#ffffff", 
 "theme_color": "#ffffff", 
 "display": "полноэкранный" 
 }

Цвет темы meta по-прежнему требуется для цвета браузера Chrome на Android.

Вот и все иконки, которые нужны для текущих современных браузеров, все остальное ненужно. msapplication-TileImage можно добавить, если вы хотите другой значок в плитках Windows, в противном случае 9Используется 0007 apple-touch-icon . TileColor больше не используется.

К сожалению, не все используют современные браузеры, НО эту проблему можно легко решить, перетащив 32 x 32 favicon. ico в корень вашего веб-сайта. Это работает везде, даже у бабушки.

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

Вот окончательный результат. Скопируйте это в вашего сайта и не забудьте поместить favicon.ico в корень. ✌️

  
  svg">

значков SVG | Могу ли я использовать… Таблицы поддержки для HTML5, CSS3 и т. д.

Могу ли я использовать

Поиск

Значки SVG

— ЛС

Глобальное использование
76,15%
+
0,24%
знак равно
76,39%

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

Chrome

4 — 79: не поддерживается
80 — 106: Поддерживается
64% — Supported»> 107: Поддерживается
108 — 110: поддержано

Edge

12 — 7932. 7936: 7936: 7936: 7936: 7936:

12 — 7936: 7936: 7936: 7936:

. Поддерживается

107: Поддерживается

Safari

3,1 — 16,0: не поддерживается
16,1: не поддерживается
16,2 — TP: не поддержано

.0115

4 — 40: Partial support

41 — 105: Supported

106: Supported

107 — 108: Supported

Opera

24% — Not supported»> 9 — 43: Not supported
44 — 53: Supported
54 — 66: Not supported
67 — 90: Supported
91: Supported

IE

5.5 — 10: Not supported
11: Not supported

Chrome for Android

107: Supported

Safari на iOS

3,2 — 11,4: не поддерживается
12 — 16,0: не поддерживается
16.1: не поддерживается

Samsung Internet

4-1132

30% — Not supported»> 4-110113.
18,0: Поддержано

Opera Mini

Все: не поддерживается

Opera Mobile

10 — 12.1: не поддержан
64: не поддерживает

9013 9013 9013

2 9013

2 2 9013

.0114
13.4: Not supported

Android Browser

2.1 — 4.4.4: Not supported
107: Not supported

Firefox for Android

106: Not supported

QQ Browser

13.1: Не поддерживается

Браузер Baidu

This entry was posted in Популярное

Posted:

Comments: