Хоть и маленький, фавикон — это брендинг сайта.

Фавикон — это небольшой значок, связанный с определенным веб-сайтом или страницей, который отображается в браузере. Он отображается в адресной строке браузера, вкладках, закладках и компоненте перетаскивания. Фавиконы также широко известны как ярлыки, значки закладок или значки веб-сайтов.

Ниже приведен список фавиконов, связанных с Google, Amazon, Microsoft, Linkedin и Facebook.

Хоть и маленький, фавикон — это брендинг сайта. Он идентифицирует приложение в браузере и отображается в результатах поиска Google. Косвенно его визуальная привлекательность может повысить рейтинг сайта в поисковых системах.

Технически существуют и другие фавиконы, такие как значки Apple-touch, платформа Google TV, Opera Speed ​​Dial и т. д. В этой статье мы сузим темы до значков браузера:

Размер фавиконки, тип и тег ссылки

Для обычных браузеров фавикон отображается 16x16 в пикселях. Если значок больше 16x16 или ширина не равна высоте, он будет масштабирован до 16x16.

Для экранов Retina фавикон отображается 32x32 в пикселях. Большинство дизайнеров начинают с 32x32, чтобы приспособиться к экранам Retina. Таким образом, более крупные фавиконы хорошо отображаются на экранах Retina, и их можно уменьшить для нормального отображения.

В марте 1999 года Microsoft выпустила Internet Explorer 5, который впервые поддерживал фавиконы. Оригинальный фавикон назывался favicon.ico в корневом каталоге веб-сайта. Хотя имя файла и тип изображения могут быть разными, favicon.ico остается наиболее часто используемым именем и типом фавикона.

Это значок Microsoft в 2023 году, https://www.microsoft.com/favicon.ico:

Формат файла ico (значок) относится к формату файла изображения, который содержит изображения значков компьютеров небольшого размера. Файлы ico, которые в основном используются в Microsoft Windows, содержат одно или несколько небольших изображений различных размеров и глубины цвета, чтобы их можно было соответствующим образом масштабировать.

Вот фавикон Create React App:

Файл manifest.json показывает, что этот favicon.ico содержит 4 размера:

{
  "src": "favicon.ico",
  "sizes": "64x64 32x32 24x24 16x16",
  "type": "image/x-icon"
}

Фавиконы также могут быть определены другими форматами файлов, такими как png, gif, jpeg и svg. За исключением Firefox и Opera, большинство браузеров не поддерживают animated gif.

Вот фотография timesSquare.jpg для Таймс-сквер в Нью-Йорке.

Мы используем этот файл jpg и размером 4032x3024, чтобы заменить значок значка в приложении Create React.

<!-- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> -->
<link rel="icon" href="%PUBLIC_URL%/timesSquare.jpg" />

Он уменьшен до фавиконки 16x16.

Мы добавили к изображению серую рамку, чтобы иконка выглядела квадратной в любой цветовой гамме, включая темный и светлый режимы.

Хотя это и не требуется, фавикон обычно размещают в общедоступном или корневом каталоге, чтобы сделать его доступным по адресу yourwebsite.com/fileName.

Тег link определяет связь между документом и внешним ресурсом. Его можно определить следующим образом:

<link 
  rel="icon" 
  type="image/x-icon" 
  href=favicon.ico" 
  sizes="16x16" 
  media="screen and (max-width: 600px)"
/>

Требуются только rel и href. Атрибут rel определяет связь между связанным ресурсом и текущим документом. rel="icon" означает, что значок является ресурсом страницы. Если есть несколько элементов <link rel="icon">, браузер использует их атрибуты media, type и sizes для выбора наиболее подходящего значка. Если несколько значков одинаково подходят, используется последний из них.

rel="shortcut icon" часто встречается, но этот тип ссылки не соответствует требованиям. shortcut игнорируется и не должен использоваться.

Тип image/x-icon относится к фавикону в формате ico. Другие типы изображений определяются как image/gif, image/jpg, image/png или просто image/ico.

Как создать фавикон с помощью онлайн-инструментов

Существует ряд онлайн-инструментов для создания фавиконов, и мы выбрали https://www.favicon.cc и https://favicon.io/.

https://www.favicon.cc

Это онлайн-инструмент для создания фавиконки с размером холста 16x16.

Он может импортировать изображение с поддерживаемыми типами jpg, jpeg, gif, png, bmp, ico и cur (курсор). Максимальный размер файла составляет 5 МБ. При импорте можно выбрать сохранение размеров или сжатие до квадратного значка.

Вот импортированный timesSquare.jpg с добавленной вручную серой рамкой:

Сгенерированная выше иконка используется в двух местах: на фавиконке страницы и в примере в разделе Preview.

Мы также можем нарисовать иконку на холсте.

Сгенерированная выше иконка используется в двух местах: на фавиконке страницы и в примере в разделе Preview.

Мы можем использовать холст для создания анимированной иконки.

Можете ли вы сказать, что значок страницы выше анимирован в Firefox?

Тот же значок не анимируется в Chrome.

На указанном выше веб-сайте есть инструкция, как добавить фавиконку на свою страницу:

  • Скачать фавикон.
  • Поместите файл favicon.ico в каталог вашего веб-сервера.
  • Этот фавикон является анимацией. Только браузер Firefox поддерживает анимированные фавиконы. По этой причине вам необходимо создать дополнительный неанимированный файл favicon.ico.
  • Добавьте следующие строки между тегами <head> ... </head> страницы:
<link rel="shortcut icon" href="/PATH_TO_STATIC_FAVICON/favicon.ico" type="image/x-icon">
<link rel="icon" href="/PATH_TO_ANIMATED_FAVICON/favicon.ico" type="image/x-icon">
  • Замените PATH_TO_STATIC_FAVICON и PATH_TO_ANIMATED_FAVICON правильными путями

https://favicon.io/

Это онлайн-инструмент для создания фавикона из изображений, текста или эмодзи.

Он может загрузить изображение для создания значка сайта.

Выберите этот вариант, и мы используем пользовательский интерфейс для загрузки timesSquare.jpg.

Нажмите кнопку Download, и он загрузит favicon_io.zip. После открытия zip-файла в папке отображается список самых последних форматов фавиконов.

Мы можем использовать предложенные элементы ссылки, чтобы настроить их в файле head HTML.

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">

Он может создавать значок фавикона из текста.

Выберите эту опцию, и мы используем пользовательский интерфейс для выбора текста, шрифтов и цветов.

В левом верхнем углу он показывает предварительный просмотр сгенерированного фавикона в нескольких размерах. Нажмите кнопку Download, и он загрузит favicon_io.zip.

Он может создавать фавикон из эмодзи.

Выберите эту опцию, и мы используем пользовательский интерфейс для выбора изображений эмодзи из проекта Twemoji.

После выбора эмодзи отображается предварительный просмотр сгенерированного фавикона в нескольких размерах.

Нажмите кнопку Download, и он загрузит favicon_io.zip.

Как скачать фавикон с веб-сайта

Ранее мы уже показывали favicon.ico от Microsoft. Местоположение было получено из содержимого View Page Source, view-source:https://www.microsoft.com/en-us/?ql=4.

<link rel="SHORTCUT ICON" href="/favicon.ico?v2" type="image/x-icon"/>

Другой способ — через вкладку Network. Поиск icon в конечных точках сети, скорее всего, найдет фавикон.

chrome://favicon/yourwebsite.com — это еще и способ найти фавикон. Вот chrome://favicon/https://www.google.com:

Еще один способ найти фавикон вместе с размером значка: https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=https://www.google.com&size=64.

Вышеупомянутый веб-сайт также может быть перенаправлен поиском Google: http://www.google.com/s2/favicons?domain=www.google.com.

Снизят ли группы вкладок важность фавиконки?

Группы вкладок Chrome предоставляют новый способ организации вкладок. Щелкните правой кнопкой мыши вкладку и добавьте ее в новую или существующую группу. Имя группы представляет собой строку, фон которой можно настроить на определенный цвет.

Вот пример с тремя цветовыми группами: Colorful, Blue и White.

Эти названия групп более заметны, чем фавиконы. Нажмите на его название или цветной кружок, группу вкладок можно развернуть или свернуть. Когда он свернут, значки скрыты.

Снизят ли группы вкладок важность фавиконки?

В некотором роде. Поскольку группы вкладок все еще новые, давайте подождем и посмотрим.

Заключение

Фавикон — это брендинг сайта. Мы изучили все о favicons. Готовы ли вы создать фавикон для своего веб-приложения?

Спасибо за прочтение.

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

Want to Connect?

If you are interested, check out my directory of web development articles.

Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .