Я упоминал <link rel="icon" type="image/x-icon" href="/images/favicon.ico"> как часть веб-страницы SEO в Semantic HTML: What, Why, and How. Кто-то задал отличный вопрос — почему MIME-тип в теге <link> атрибут type="" должен быть image/x-icon? Ответ: не обязательно, но все же это хорошая идея — включить файл ICO. Давайте разберемся, как использовать фавиконы по максимуму.
Оглавление
- Фавиконы
- Типы MIME
- Файлы изображений
- Код
Фавиконы
Фавикон — это сокращение от любимой иконки. Это изображение, обычно логотип, связанный с вашей веб-страницей. Консорциум World Wide Web Consortium (W3C) стандартизировал фавиконы в 2000 году как часть HTML, и с тех пор мало что изменилось. В Internet Explorer 5 фавикон представлял собой файл favicon.ico в корневом каталоге сайта (/favicon.ico), и браузеры до сих пор проверяют его наличие.
Фавикон можно использовать во вкладке или адресной строке окна браузера при открытии веб-страницы, в строке закладок, когда ваш сайт добавлен в закладки, в истории браузера, а также в качестве значка на рабочем столе или мобильном устройстве. Google даже будет отображать ваш favicon вместе с вашим сайтом в результатах поиска. Однако, поскольку каждый браузер имеет свой набор допустимых вариантов использования фавикона и каждый из них проверяет наличие фавикона по-своему, это приводит к множеству ситуаций, которые разработчику необходимо предусмотреть. Например, все маленькие логотипы, кроме папок закладок, на следующем снимке окна браузера Chrome являются фавиконами:
Чтобы еще больше запутать ситуацию, W3C так и не стандартизировал атрибут rel= в теге <link>, поэтому существуют несоответствия. Например, rel="shortcut" все еще разрешен по унаследованным причинам, но shortcut ни на что не ссылается. Кроме того, существуют различия между ОС и устройствами. Если указано <link rel="apple-touch-icon">, мобильное устройство Apple будет использовать фавикон при создании ярлыка веб-страницы на главном экране. В противном случае будет использоваться уменьшенное изображение сайта.
Существуют также проблемы безопасности — злоумышленники могут изменить фавикон сайта, чтобы создать впечатление, что он использует HTTPS для фишинговой аферы, запросить фавикон, чтобы узнать, вошел ли пользователь в систему, и использовать фавиконы для отслеживания пользователей по сеансам браузера.
Типы MIME
Типы MIME — это способ передать браузеру формат файла или данных. Для фавиконов они используются в атрибуте type="" в теге <link>.
В 2003 году формат ICO был зарегистрирован под MIME-типом image/vnd.microsoft.icon, но он не был зарегистрирован Microsoft, и Internet Explorer его не распознает. Сегодня используется MIME-тип ICO image/x-icon.
В наши дни вы не ограничены использованием только формата ICO. Вы можете использовать формат Apple Icon Image (ICNS), неанимированные GIF, PNG и SVG. Однако Apple перешла от файлов ICNS к использованию каталога активов в приложениях, и они поддерживаются меньше, чем ICO. Одна из причин существования формата ICO заключается в том, что растровые изображения с трудом масштабируются. PNG (MIME-тип image/png) в качестве фавиконов почти полностью поддерживается браузерами. SVG (MIME-тип image/svg+xml) почти достигли 75% поддержки браузерами. Наконец, нет никаких реальных преимуществ использования неанимированных GIF перед PNG. (О растровых и векторных изображениях, SVG, PNG, JPEG и GIF я рассказываю в статье «Поиск изображений и их оптимизация для Web»).
Mozilla Developer Network (MDN) может предостерегать от использования формата ICO для веб-контента, но их руководства <head> и <link> рекомендуют использовать файл /favicon.ico для обратной совместимости. На это есть несколько причин:
- Internet Explorer 6-10 (поддержка PNG была добавлена в 11).
- Если ваш путь в теге
<link>нарушен, браузеры будут проверять наличие/favicon.icoи показывать пользователям 404, если он не найден. - Такие инструменты, как программы для чтения RSS, будут запрашивать только
/favicon.ico.
Файлы изображений
Фавиконы всегда квадратные, поэтому вот размеры, которые мы пытаемся охватить (в пикселях):
- 16×16: по умолчанию для браузеров
- 24×24: прикрепленный сайт в Internet Explorer 9
- 32×32: вкладка в Internet Explorer, кнопка на панели задач в Windows 7+ и боковая панель «Читать позже» в Safari.
- 57×57: Стандартный домашний экран iOS
- 72×72: значок домашнего экрана iPad
- 96×96: Google TV
- 114×114: главный экран iPhone 4+
- 128×128: Интернет-магазин Chrome
- 195×195: Opera Speed Dial
- 512×512: Загрузочная заставка Progressive Web App (PWA)
Для самого простого решения favicon, которое охватывает все эти размеры, имеет обратную совместимость и обеспечивает откат, мы рассматриваем файл favicon.ico с тремя размерами и три других PNG-файла, которые хорошо масштабируются. Если у вас уже есть квадратное изображение размером 512 x 512 пикселей или больше с цветом фона, вы можете просто загрузить его в Favicon Generator и перейти к разделу кода. Если вы хотите узнать больше о том, как я манипулирую своими изображениями и почему, продолжайте читать этот раздел.
Теоретически вы можете предоставить только самое большое изображение, если оно хорошо масштабируется, но одним из основных принципов отзывчивых изображений является требование к браузерам загружать как можно меньшие изображения.
Обычно я являюсь большим поклонником SVGs, чем растровых изображений, когда требуется несколько размеров, но они имеют более ограниченную поддержку браузерами в качестве фавиконов. Я не говорю, что не надо их использовать, просто это, вероятно, займет больше 4 файлов. Кроме того, даже если вы хотите прозрачный фон на большинстве устройств, вам понадобится файл с цветом фона и некоторыми вставками для иконок Apple. Если вы хотите создать классный SVG-фавикон, который будет менять цвета в зависимости от @media (prefers-color-scheme: ), посмотрите руководство по фавиконам Андрея Ситника.
Я буду обновлять свои файлы, чтобы все они имели светлый цвет фона, потому что я заметил, что детали теряются в темном режиме в Chrome с фавиконом моего сайта портфолио:
Чтобы создать файлы изображений, я открываю исходный SVG, который я нарисовал в Photoshop. Добавляю слой с небелым фоном, изменяю размер изображения на 450 пикселей в ширину, изменяю размер холста на 512 x 512 пикселей и экспортирую PNG с именем logo512.png.
Затем я нахожу этот файл в Finder, нажимаю правую кнопку мыши > duplicate дважды и с помощью опции Preview «Изменить размер» (в разделе «Инструменты») создаю два PNG-файла — logo192.png размером 192 x 192 пикселя и apple-touch-icon.png размером 180 x 180 пикселей. Единственный размер Apple, который второй PNG не покроет, — это изображение Opera Speed Dial размером 195 x 195 пикселей. Я дважды проверяю в Preview, что увеличение масштаба apple-touch-icon.png не выглядит слишком пикселизированным, прежде чем двигаться дальше.
Существует множество способов создания файлов ICO. Я загружаю изображение logo512.png в Favicon Generator. Я не только получаю файл favicon.ico за считанные секунды, но в папке также содержатся уже созданные мною размеры и многое другое.
Код
Как атрибут type="" в теге HTML <link> сообщает браузеру, в каком формате находится мой файл изображения, так и атрибут sizes="" сообщает браузеру размер моего файла, чтобы он мог выбрать лучший вариант для отображения.
Чтобы обновить мой favicon, мне нужно обновить два тега в моем файле index.html. Из-за того, как работает React, два пути в моих атрибутах href=""" начинаются с %PUBLIC_URL% перед /, но вот код с более универсальным путем:
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48" type="image/x-icon">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" type="image/png">
Далее я поместил 4 новых файла в папку public, которая действует как корневой каталог для моего созданного сайта в React.
Чтобы PWA распознавал изображения, нам также понадобится манифест веб-приложения. Если вы используете create-react-app, этот JSON-файл будет предоставлен вам как public/manifest.json. Типичные размеры изображения для файла favicon.ico составляют 48×48, 32×32 и 16×16 пикселей, но в файле manifest.json, предоставленном create-react-app, указаны 64×64, 32×32, 24×24 и 16×16. Я обновляю указанные размеры, чтобы они соответствовали файлу, который я получил от генератора.
{
"short_name": "Abbey Perini",
"name": "Abbey Perini Portfolio",
"icons": [
{
"src": "favicon.ico",
"sizes": "48x48 32x32 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
Теперь мой favicon имеет красивый фон и хорошо смотрится в разных размерах:
Заключение
Фавиконы обманчиво сложны, и этот блог был очень сосредоточен на поиске самого простого кодового решения. Если вам интересно руководство о том, как я перехожу от идеи приложения к логотипу, доступной цветовой теме и набору изображений, просто оставьте комментарий!