Favicon
HTML
ОсноваСамое лучшее решение для главной иконки сайта – вообще не использовать никакую HTML разметку. Оно обеспечит максимальную кросс-браузерность и будет работать во всех браузерах вплоть до IE6 (Исключение составляет только браузер SeaMonkey).
Вам всего лишь нужно назвать файл с иконкой favicon.ico и поместить в корневой каталог вашего домена. [1][2]
Опциональные, но рекомендованные иконки
Возможно, вам потребуются следующие:
- Иконка для устройств на iOS 2.0+ и Android 2.1+
- Плиточная иконка для IE10 Metro (аналог apple-touch-icon)
Замените #FFFFFF на то значение цвета, которое вам нравится.
Если вы такой, то вам они просто необходимы:
- Иконки для мобильных устройств, от больших к меньшим1234567891011121314151617<!-- Для iPad с дисплеем Retina под iOS ≥ 7: --><!-- Для iPad с дисплеем Retina под iOS ≤ 6: --><!-- Для iPhone с дисплеем Retina под iOS ≥ 7: --><!-- Для iPhone с дисплеем Retina под iOS ≤ 6: --><!-- Для iPad первого и второго поколений: --><!-- Для iPhone с обычным дисплеем, iPod Touch, и устройств на Android 2.1+: -->
- Любые другие иконки
Изображения
Как минимум, необходимо создать следующую иконку:| Размеры | Имя | Назначение |
|---|---|---|
| 16х16 & 32×32 | favicon.ico | Требуется для IE, а Chrome и Safari могут выбирать ico вместо png. Печально |
Также, если вы беспокоитесь о iOS и Android, но ленивы, то добавьте всего одну иконку:
| Размер | Имя | Назначение |
|---|---|---|
| 152×152 | Общая иконка для iOS и Android, устройства автоматически уменьшат ее до требуемого размера |
Если вы помешались на иконках, создайте и эти:
Файл ICO
Файл с расширением .ico представляет собой контейнер для нескольких иконок различных размеров в формате .bmp или .png. Вам, как минимум, нужно создать следующие:| Размер | Назначение |
|---|---|
| 16×16 | Адресная строка IE9, закрепленный сайт в списках переходов, панели инструментов или панели закладок |
| 32×32 | Новая вкладка в IE, кнопка в панели задач в Win 7+, сайдбар Safari Read Later |
| 48×48 | Иконка cайта в Windows |
Если вы хотите большего и вас не беспокоят лишние 1-3кб в размере файла, то добавьте еще и следующие размеры:
| Размер | Назначение |
|---|---|
| 24×24 | Закрепленный сайт в интерфейсе браузера IE9 |
| 64×64 | Иконка cайта в Windows, сайдбар Safari Reading List на дисплеях Retina/HiDPI |
Создавайте свой .ico файл из оптимизированных .png файлов.
Инструменты в помощь
Я рекомендую:- OptiPNG - для оптимизации файлов .png перед помещением их в файл .ico
- ImageMagick – для создания .ico из файлов .png. Простой пример использования тут
- Пакет icoutil в Ubuntu/Debian имеет программу, которая создает файл .ico из файлов .png
- MSDN рекомендует этот онлайн-сервис по созданию .ico
- Изменение размера favicon - http://faviconer.com
- Еще про изменение размеров - https://github.com/abrkn/icon
- Динамическая генерация иконок - https://github.com/HenrikJoreteg/favicon-setter
- Необычные трюки с иконками - https://github.com/component/piecon
- Web Icon – простой скрипт, который генерирует иконки
- Приложение для OS X – Icon Slate
- png2ico – модуль для ImageMagick
- favico.js - прокачает иконку вашего сайта
Принудительное обновление favicon
Обычно оно не требуется. Это только для тех случаев, когда в процессе разработки ваша иконка не обновляется автоматически:- Очистите кэш браузера (Ctrl+F5 или Ctrl+Shift+R)
- Если браузер IE, то закройте его и откройте снова.
- Если не помогло, попробуйте открыть новую вкладку. Или почитайте эту статью
- Временно добавьте разметку HTML, явно указывающую на размер и месторасположение иконки. Уберите её когда все будет ОК:12<link rel="shortcut icon" href="http://www.yoursite.com/favicon.ico?v=2" /><link rel="icon" sizes="16x16 32x32" href="/favicon.ico?v=2">
- Добавить HTML-разметку (измените атрибут sizes под себя), явно указывающую на конкретную иконку и поместите номер версии в имя файла: 12<link rel="shortcut icon" href="/favicon-v2.ico" /><link rel="icon" sizes="16x16 32x32" href="/favicon-v2.ico">
FAQ
Что будет, если я положу в корень одновременно файлыЯ думаю, что все-таки лучше ограничиться только одним файлом favicon.ico, так как:
- Файл .ico является контейнером для нескольких файлов .bmp или .png. Если вы укажете один файл
favicon .png , в качестве основного, и если он переопределяет файлfavicon .ico, вы не сможете контролировать отображение иконки на разных разрешениях, а также не позволите браузеру контролировать её размер. Например, вы хотите, чтобы у вас была иконка 64х64, которая содержит какой-то текст, а также чтобы была иконка 16х16 без текста, т.к. при размере 16х16 текст будет все-равно не читаем. - В спецификации HTML5 ничего не написано про
favicon .png , только оfavicon .ico
Правда ли, что иконки должны находиться в корне сайта?
Нет, они должны там лежать только в том случае, если вы явно не указали браузеру/устройству путь до иконок в теге <link>. См. https://en.wikipedia.org/wiki/Favicon.ico
Если у вас нет в корне favicon.ico – рассмотрите возможность его добавления, иначе будет возвращаться ответ HTTP 204. Многие инструменты и сервисы, такие как закладки, читалки RSS, поисковые роботы и т.д., запрашивают файл favicon.ico из корня сайта и если его не находят, возвращают ответ HTTP 404. В худшем случае некоторые фреймворки возвращают собственную страницу с ошибкой, которая может весить во много раз больше самой иконки.
Правда ли, что иконки в формате .
Нет, это никогда не было правдой, насколько я могу судить по своим исследованиям.
Правда ли, что иконки в формате .ico обязательно именовать как favicon.ico?
Если вы явно не указали иконки в теге <link>, то да. Для лучшей ясности рекомендуется назвать файл с иконками favicon.ico и явно указать путь до него в теге <link>.
Стоит ли использовать префикс “apple-touch-icon” в имени файла?
Если вы не зададите теги <link>, то iOS будет искать имена файлов с префиксами “apple-touch-icon” и “apple-touch-icon-precomposed”. Многое основано (например HTML5 Boilerplate) на этом, но:
- Явное определение тега <link> вносит больше ясности и, тем более, оно поддерживается Apple
- Если жестко не указывать имя файла, можно избежать путаницы относительно повторного использования иконок для других целей, например,
favicon -144.png используется также и для сайта, закрепленного на экране в Windows.
- обычные иконки iOS имеют скругленные края, блики и отбрасывают тень.Звучит круто в теории, но на практике результат может разочаровать, особенно дизайнеров.
- обычное иконки не работают в Android 2.1
Некоторые версии Firefox требуют использования абсолютных путей. Это самый простой выбор, потому что их поддерживают все браузеры.
Почему бы не добавить строчку запроса принудительного обновления иконки для всех пользователей?
Некоторые прокси-сервера и стабилизаторы нагрузки в крайних случаях могут игнорировать эту строчку.
Комментарии
Отправить комментарий