Если раньше стандартным размером favicon.ico были 16x16px, то на сегодняшний день картина изменилась - добавились другие стандарты, браузеры, дисплеи и девайсы. Об этом и пойдет речь - о том, как сделать несколько размеров favicon.
16px - стандартный размер иконки, используется в адресной строке, на вкладках и в закладках браузеров.
24px - размер для "pinned sites" в IE9
32px - используется на табах в новых версиях IE, на кнопке в таскбаре в Windows 7 и выше, в списке для дальнейшего чтения в Safari
57px - стандартный размер иконок iOS на хоум-скрине (iPod touch, iPhone первого поколения до 3G)
72px - то же, что и 57px (для iOS), но только на iPad
114px - iPhone 4 и новее, так же для хоум-скрина (с дисплеями Retina)
144px - iPad нового поколения с дисплеем Retina
256px - максимальное значение ширины картинки для Opera Speed Dial (ниже пойдет речь об этом)
Когда браузер получает favicon большего размера, то пытается его "ужать" до 16x16px для отображения и часто в итоге получается полная ерунда. Например, браузеры на основе движка WebKit (Safari и Chrome) именно так и делают. Для того, чтобы браузеры не пытались менять размеры favicon сейчас имеет место практика создания многослойных файлов иконок (multi layer favicon).
Я расскажу про два самых популярных генератора. Принцип у обоих прост - если у вас есть готовое изображение, допустим, размера 500x500px, из него автоматически будут созданы все необходимые файлы.
X-icon Editor
Этот генератор позволяет не только сделать нужный файл многослойной иконки из готового изображения, но и создать прямо в нем свою собственную иконку. Как видно на картинке выше, будет создан многослойный файл favicon.ico, содержащий 4 разных размера.
Iconifier.net
Это совершенно замечательный инструмент из вашей единственной картинки создаст сразу и многослойный favicon, и все иконки для Apple-девайсов всех поколений и подготовит еще код для вставки на сайт. Как видно на изображении - все иконки можно скачать как по отдельности, так и целым архивом. Кроме того, в файле favicon.ico кроме остальных будет еще слой с размером 48x48px.
Код, который в итоге сгенерируется, будет следующим:
Чтобы было понятней про многослойную иконку, то я покажу как это выглядит в готовом виде после использования iconifier.net
Я посмотрел это с помощью F3 в Total Commander, но есть вероятность, что у меня какой-то специальный плагин для просмотра установлен.
Фактически, iconifier.net дает возможность закрыть все необходимые вопросы, связанные с иконками для сайта.
Генератор от ChillWebDesign
Этот генератор крайне прост в применении, но имеет ряд преимуществ:
- сразу генерирует изображение для Opera Speed Dial размером 160x160
- делает иконки для Apple-устройств с эффектами закругления и тени
- генерирует полностью код для каждого типа иконки и имеет пояснения к коду
Минус сервиса один, на мой взгляд - файл favicon.ico генерируется не многослойным, а одного размера - 16x16px.
Если вы хотите, чтобы ваш сайт был заметен на этом экране, а не просто был неразборчивым скриншотом, то вы можете браузеру Opera (начиная с версии 11.10) помочь это сделать. Самый простой вариант - подготовить отдельное изображение для этого экрана.
Для использования изображения должны быть соблюдены следующие условия:
1. Минимальный размер изображения: 114x114px
2. Формат изображения: jpg, png, gif и svg (только первый кадр при анимированном svg)
Максимальный размер изображения 256x160px.
Код для использования (в секции <head></head>):
Больше об использовании собственных изображений и не только для Экспресс-панели можно прочитать в официальной документации - Make your site shine in Speed Dial.
Конечно же, лучше для каждой статьи/страницы сайта подготавливать отдельное уникальное изображение. Полная документация об этом мета-теге и не только на официальном сайте.
Я написал лишь небольшую часть в виде обзорной статьи. Не забудьте, например, выставить для иконки правильное кэширование, потому как теперь файл favicon.ico будет весить под 30-40kb, что довольно много для такого вида иконки. Если есть что дополнить или я где-то ошибся, то прошу в комментарии.
Используемые размеры:
16px - стандартный размер иконки, используется в адресной строке, на вкладках и в закладках браузеров.
24px - размер для "pinned sites" в IE9
32px - используется на табах в новых версиях IE, на кнопке в таскбаре в Windows 7 и выше, в списке для дальнейшего чтения в Safari
57px - стандартный размер иконок iOS на хоум-скрине (iPod touch, iPhone первого поколения до 3G)
72px - то же, что и 57px (для iOS), но только на iPad
114px - iPhone 4 и новее, так же для хоум-скрина (с дисплеями Retina)
144px - iPad нового поколения с дисплеем Retina
256px - максимальное значение ширины картинки для Opera Speed Dial (ниже пойдет речь об этом)
Когда браузер получает favicon большего размера, то пытается его "ужать" до 16x16px для отображения и часто в итоге получается полная ерунда. Например, браузеры на основе движка WebKit (Safari и Chrome) именно так и делают. Для того, чтобы браузеры не пытались менять размеры favicon сейчас имеет место практика создания многослойных файлов иконок (multi layer favicon).
Генераторы favicon
Нужны они для облегчения рутиной работы по сборке файлов иконок. В итоге файл favicon будет состоять из 4-х слоев - 16x16, 24x24, 32x32 и 64x64 px. Каждый браузер или другая программа "возьмут" именно тот размер, который нужен им.Я расскажу про два самых популярных генератора. Принцип у обоих прост - если у вас есть готовое изображение, допустим, размера 500x500px, из него автоматически будут созданы все необходимые файлы.
X-icon Editor
Этот генератор позволяет не только сделать нужный файл многослойной иконки из готового изображения, но и создать прямо в нем свою собственную иконку. Как видно на картинке выше, будет создан многослойный файл favicon.ico, содержащий 4 разных размера.
Iconifier.net
Это совершенно замечательный инструмент из вашей единственной картинки создаст сразу и многослойный favicon, и все иконки для Apple-девайсов всех поколений и подготовит еще код для вставки на сайт. Как видно на изображении - все иконки можно скачать как по отдельности, так и целым архивом. Кроме того, в файле favicon.ico кроме остальных будет еще слой с размером 48x48px.
Код, который в итоге сгенерируется, будет следующим:
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png" />
Чтобы было понятней про многослойную иконку, то я покажу как это выглядит в готовом виде после использования iconifier.net
Я посмотрел это с помощью F3 в Total Commander, но есть вероятность, что у меня какой-то специальный плагин для просмотра установлен.
Фактически, iconifier.net дает возможность закрыть все необходимые вопросы, связанные с иконками для сайта.
Генератор от ChillWebDesign
Этот генератор крайне прост в применении, но имеет ряд преимуществ:
- сразу генерирует изображение для Opera Speed Dial размером 160x160
- делает иконки для Apple-устройств с эффектами закругления и тени
- генерирует полностью код для каждого типа иконки и имеет пояснения к коду
Минус сервиса один, на мой взгляд - файл favicon.ico генерируется не многослойным, а одного размера - 16x16px.
Opera Speed Dial
Когда вы в Opera открываете новую вкладку, то видите этот самый экран быстрого выбора "Speed Dial", он же - Экспресс-панель.
Если вы хотите, чтобы ваш сайт был заметен на этом экране, а не просто был неразборчивым скриншотом, то вы можете браузеру Opera (начиная с версии 11.10) помочь это сделать. Самый простой вариант - подготовить отдельное изображение для этого экрана.
Для использования изображения должны быть соблюдены следующие условия:
1. Минимальный размер изображения: 114x114px
2. Формат изображения: jpg, png, gif и svg (только первый кадр при анимированном svg)
Максимальный размер изображения 256x160px.
Код для использования (в секции <head></head>):
<link rel="icon" type="image/png" href="http://path/to/256x160image.png">
<head>
<link rel="icon" type="image/png" href="http://path/to/256x160image.png">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
...
</head>
Больше об использовании собственных изображений и не только для Экспресс-панели можно прочитать в официальной документации - Make your site shine in Speed Dial.
Изображения для Facebook
Когда люди делятся ссылкой в своем Facebook, то он пытается собрать с указанной страницы различную информацию. В том числе и небольшую картинку, относящуюся к статье. И вы можете улучшить вид публикуемой ссылки с помощью специально подготовленного и размещенного изображения.
На сегодняшний день Facebook использует мета-теги Open Graph.
Необходимые условия:
1. Изображение должно быть квадратным, размером 90x90px
2. Форматы изображения: jpg, gif, png.
Разместите на сайте (в секции <head></head>) следующий код:
<meta property="og:image"content="http://yoursite.com/path/pageimage.png" />Конечно же, лучше для каждой статьи/страницы сайта подготавливать отдельное уникальное изображение. Полная документация об этом мета-теге и не только на официальном сайте.
Я написал лишь небольшую часть в виде обзорной статьи. Не забудьте, например, выставить для иконки правильное кэширование, потому как теперь файл favicon.ico будет весить под 30-40kb, что довольно много для такого вида иконки. Если есть что дополнить или я где-то ошибся, то прошу в комментарии.
0 коммент.:
Отправить комментарий