От автора: простые, часто геометрические и выполненные в различных размерах иконки (favicon) отлично подходят под SVG формат. К сожалению, до недавнего времени браузеры очень плохо поддерживали SVG фавиконы. В Firefox 41 появилась поддержка данного формата, в Safari 9 для десктопной и мобильной версии (с некоторыми уступками). Однако в IE/Edge и Chrome все еще нет поддержки, по крайней мере, на данный момент. Тем не менее, ситуация вскоре изменится (должна измениться). Так что стоит уделить немного времени и изучить возможности и синтаксис SVG фавиконов, дабы подготовить ваш сайт к грядущим временам.
Проблема
С момента создания картинки 16х16 пикселей изменилась сама концепция фавиконов. Теперь фавикон должен работать с целой серией иконок, заточенных под тачскрины, с плиточным интерфейсом новых версий Windows, со специальными возможностями Retina дисплеев и т.д. Комплексное решение (от realfavicongenerator) включает в себя довольно длинный список всевозможных вариантов:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png"> <link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png"> <link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png"> <link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png"> <link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png"> <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32"> <link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192"> <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96"> <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16"> <link rel="manifest" href="/manifest.json"> <meta name="msapplication-TileColor" content="#da532c"> <meta name="msapplication-TileImage" content="/mstile-144x144.png"> <meta name="theme-color" content="#ffffff"> |
Хотя большинство из этих файлов можно и просто положить в корень вашего сайта, а соответствующие приложения выберут, что им необходимо, не прописывая все их в явном виде в HTML, все же это не самый удачный подход. Слишком много контента нужно создать, а потом еще и обслуживать. Один масштабируемый файл будет работать намного лучше. К примеру, логотип нашего сайта сохранен в формате favicon.svg:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее|
1 2 3 4 5 6 |
<svg xmlns="//www.w3.org/2000/svg" viewBox="0 0 500 500"> <title>the new code favicon</title> <polygon points="201.4,0 96.5,69.1 201.2,141.1 298.5,69.1" fill="#f06823"/> <polygon points="97.1,83.8 95.8,84.7 39.8,123 199.5,241.8 361.4,125 298.5,82.5 200.6,154.5" fill="#f4e302" /> <polygon points="60.1,152.2 58.4,153.3 0,192.2 201.2,339.6 399.1,192.2 340.2,154.5 199.5,255.9" fill="#2f8bca" /> </svg> |
И выглядит так:
Фавикон можно добавить строкой кода между тегов head:
|
1 |
<link rel="icon" type="image/svg+xml" href="favicon.svg"> |
Несколько замечаний:
Составляющие рисунка выполнены отдельными, не перекрывающими друг друга фигурами: значок должен иметь размер 16х16 пикселей. Тут важны простота и четкость.
По тем же самым причинам фон в SVG иконке прозрачный, так что ее можно использовать в различных ситуациях.
Viewbox для SVG должен быть квадратным.
Рисунок должен занимать наибольшую площадь на viewBox’е (холст в SVG).
Тег <title> описывает цели, для которых предназначен рисунок; также стоит добавить <desc> и <title> для каждого полигона <polygon>.
Необходимо по максимуму оптимизировать и минифицировать ваш SVG, чтобы файл на выходе получился как можно меньше.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееЧтобы SVG заработал необходимо указывать MIME тип image/svg+xml.
Добавляем поддержку iOS
В iOS 9 также поддерживаются SVG фавиконы в закрепленных закладках, но с некоторыми оговорками:
Элементы SVG должны быть черного цвета.
В ссылке на фавикон должен быть указан неофициальный атрибут mask-icon.
Не обязательно, но цвет можно изменить также с помощью неофициального атрибута color. Поддерживаемые значения hexadecimal, keyword и rgb. Не рекомендуется использовать яркие цвета.
Учитывая вышеописанные условия, я бы использовал новый SVG файл без информации о цветах:
|
1 2 3 4 5 6 7 8 |
<svg xmlns="//www.w3.org/2000/svg" viewBox="0 0 500 500"> <title>the new code favicon</title> <polygon points="201.4,0 96.5,69.1 201.2,141.1 298.5,69.1" /> <polygon points="97.1,83.8 95.8,84.7 39.8,123 199.5,241.8 361.4,125 298.5,82.5 200.6,154.5" /> <polygon points="60.1,152.2 58.4,153.3 0,192.2 201.2,339.6 399.1,192.2 340.2,154.5 199.5,255.9" /> </svg> |
Чтобы это заработало на iOS, добавляем строку:
|
1 |
<link rel="mask-icon" href="icon.svg" color="blue"> |
Собираем мысли вместе
Предположим, что вам больше не нужно поддерживать IE8 и более ранние версии, значит, формат .ico можно выбросить, а браузерам оставить файл PNG. Чтобы фавикон отображался во всех браузерах и не забыть про SVG, расположим ссылки в следующем порядке:
|
1 2 3 |
<link rel="icon" type="image/png" href="favicon.png"> <link rel="mask-icon" href="icon.svg" color="blue"> <link rel="icon" type="image/svg+xml" href="favicon.svg"> |
Мы отказались от использования формата .ico: если бы мы положили в корень сайта файл favicon.ico, то браузеры использовали бы его вместо остальных, и не важно какие директивы вы указали в хедере.
Для iOS и IE все еще нужно указывать отдельные иконки; SVG в данных браузерах еще не работает.
Заключение
SVG как будто создан для фавиконов, и остается только надеяться, что в скором будущем и Chrome будет его поддерживать. Идеальным было бы, чтобы в одном SVG файле для различных степеней детализации и размеров использовались разные элементы <symbol> или <use>… хотя мы и так уже хотим слишком многого.
Источник: //thenewcode.com/
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
