Используйте фавиконки правильно / Хабр
Фавиконка (favicon) — это иконка, которая отображается во вкладке браузера перед названием страницы. Также эта иконка отображается в закладках и на рабочем столе для веб-приложений.
Фавиконка при установке веб-приложенияФавиконка на вкладке в браузереПодключение
Чтобы иконка начала отображаться, на вкладке нужно подключить файл с графическим отображением иконки. Для правильного подключения иконки нужно использовать обязательные требования браузера и минимальный набор фавиконок, который мы сейчас подробно рассмотрим.
Почему именно набор, а не одну иконку? Дело в том, что браузеры и экраны развиваются и не стоят на месте. Чем современнее браузер, тем более современный формат он может поддерживать. Например, вы можете подумать, что можно подключить только одну SVG-иконку и браузер уже сам правильно отрисует её, но не все браузеры до сих пор поддерживают SVG-формат для фавиконок. На таблицу совместимости SVG-фавиконок можно посмотреть тут.
Эта статья — фрагмент из учебника по вёрстке с курса «HTML и CSS. Профессиональная разработка сайтов».
Обязательная фавиконка
Все — старые и новые — веб-серверы и браузеры поддерживают .ico-формат.
Для подключения нужно добавить в <head>:
<head> <link rel="icon" href="favicon.ico"><!-- 32×32 --> </head>
Обратите внимание на две детали: размер и расположение.
Размер. В интернете можно найти информацию, что нужно подключать фавиконку в формате .ico в размере 16×16. Это так и не так. Дело в том, что контейнер ico динамический и он может изменять размеры «на лету». Поэтому браузеры, которые понимают размер 16×16, сами сожмут 32×32 до необходимого. В каком случае нужно создавать favicon.ico в размере 16×16? Когда фавиконка размером 32×32 при сжатии начнёт мылиться (будет нечёткой). Это можно проверить вручную, сжав фавиконку с 32×32 до 16×16. Если размыливание картинки произошло, то без дизайнера не обойтись и придётся отрисовывать фавиконку вручную в графическом редакторе.
Расположение. Фавиконку в формате ico обязательно нужно класть в корень проекта, как это показано в примере выше. Дело в том, что любой веб-сервер незаметно для вас всегда ищет favicon.ico в корне проекта и пытается её подключить к сайту.
Дополнительные необходимые фавиконки
Расположение. Только favicon.ico должна лежать в корне проекта. Остальные иконки могут лежать в любом месте в проекте, например:
project/ favicon.ico img/ 180.png 192.png 512.png icon.svg
Или можно сгруппировать все фавиконки, чтобы отделить от других изображений в проекте:
project/ favicon.ico img/ favicons/ 180.png 192.png 512.png icon.svg
SVG
Если современный веб-браузер умеет работать с векторными фавиконками, то этот формат более предпочтительный: меньший вес, наилучшее качество, поддерживает смену тем, не нужно указывать размер.
Подключение точно такое же, как и для favicon. ico, только нужно добавить тип, чтобы браузер понимал, с чем имеет дело:
<head> <link rel="icon" href="images/favicons/icon.svg" type="image/svg+xml"> </head>
Для устройств Apple
Apple пошли по другому сценарию развития и предложили собственные размеры фавиконок для своих устройств — iPhone и iPad. Формат для подключения favicon для Apple поддерживают все современные браузеры.
Самым востребованным размером для старых устройств фавиконок стал размер 180×180. Давайте посмотрим пример подключения:
<head> <link rel="apple-touch-icon" href="images/favicons/apple.png"><!-- 180×180 --> </head>
Подключив такую иконку, мы также поддержим старые устройства, которые не умеют работать с таким большим размером фавиконки и уменьшать её до нужных размеров.
Устройства Apple работают и с большими размерами иконок, но так получилось, что устройства, которые понимают большие размеры, можно подключать более современным способом с помощью манифеста.
Манифест
Манифест — это JSON-файл со всеми подробностями веб-приложения для браузера. Формат был разработан Google по инициативе PWA.
Чтобы добавить фавиконки с помощью манифеста, нужно подключить манифест, а в манифесте указать все иконки и их размеры, которые мы хотим подключить на сайт.
Файл. Создадим файл в корне проекта и назовём его manifest.webmanifest. Расширение .webmanifest нужно указать, чтобы браузер понимал, с каким файлом имеет дело. Само название файла может быть любым (в нашем случае — manifest).
Так как манифест — это JSON-файл, то он должен начинаться с открывающей скобки { и заканчиваться закрывающей скобкой}.
manifest.webmanifest { }
Внутри скобок нужно создать секцию иконок. Секция с иконками ожидает несколько иконок, поэтому добавим массив []:
manifest.webmanifest { "icons": [] }
Осталось добавить фавиконки по шаблону:
manifest. webmanifest { "icons": [ { "src": "", "type": "", "sizes": "" } ] }
Если иконок несколько, то их нужно добавить через запятую:
manifest.webmanifest { "icons": [ { "src": "", "type": "", "sizes": "" }, { "src": "", "type": "", "sizes": "" }, { "src": "", "type": "", "sizes": "" } ] }
Размеры. В манифесте мы укажем размер 192×192 и 512×512. 192 — так как это следующий размер после 180, а 512 — так как это очень большой размер для фавиконки, его будет достаточно. А что с промежуточными разрешениями? Всё хорошо: как и раньше, браузер сожмёт картинку к нужному размеру. Например, из 512 до 256.
manifest.webmanifest { "icons": [ { "src": "images/favicons/192.png", "type": "image/png", "sizes": "192x192" }, { "src": "images/favicons/512.png", "type": "image/png", "sizes": "512x512" } ] }
Настройки:
Можно добавить дополнительные размеры иконок, если этого требует браузерная поддержка вашего проекта. Например, вам потребовалась иконка 256×256. Давайте добавим её:
manifest.webmanifest { "icons": [ { "src": "images/favicons/192.png", "type": "image/png", "sizes": "192x192" }, { "src": "images/favicons/256.png", "type": "image/png", "sizes": "256x256" }, { "src": "images/favicons/512.png", "type": "image/png", "sizes": "512x512" } ] }
Откуда брать фавиконки и как их приготовить
Фавиконки — это ответственность верстальщика. Дизайнеры в большинстве случаев про фавиконки не знают, поэтому не предоставляют их с макетами.
Если дизайнер не предоставил фавиконки, у верстальщика есть два пути:
Не добавлять фавиконки в проект.
Попросить дизайнера отрисовать фавиконку (лучше в векторном формате). Рассказать, что требуется отрисовать иконку в квадрате. Сама иконка может быть круглой или даже овальной, но изображение должно быть вписано в квадрат с пропорциями 1:1.
Векторный формат позволит растянуть фавиконку до нужных размеров (192, 256 и даже 512) без потери качества. Таким образом верстальщик сможет сгенерировать себе нужные размеры и подключить их к странице.
При генерации фавиконок с помощью сторонних сервисов всегда смотрите на получившийся результат. Чаще всего иконки получаются замыленными. Даже если брать хороший оригинал 512×512, то при уменьшении до 32×32 всё равно могут появиться артефакты.
Для генерации фавиконок используйте сервис favicon-generator: экспортируйте изображение фавиконки в формате PNG, добавьте это изображение в сервис генерации фавиконок, нажмите кнопку «Create favicon», а потом — ссылку «Download the generated favicon». Вы скачаете архив со всеми возможными вариантами фавиконок. Возьмите favicon.ico и другие необходимые версии, подключите к странице проекта.
Итог
Итоговый способ подключения фавиконки:
<link rel="icon" href="favicon.ico"> <!-- 32×32 --> <link rel="icon" href="images/favicons/icon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="images/favicons/apple. png"> <!-- 180×180 --> <link rel="manifest" href="manifest.webmanifest">
manifest.webmanifest
{ "icons": [ { "src": "images/favicons/192.png", "type": "image/png", "sizes": "192x192" }, { "src": "images/favicons/512.png", "type": "image/png", "sizes": "512x512" } ] }
Таким способом мы будем поддерживать самые старые браузеры и самые новые.
Ничего страшного, что список одной фавиконки получился столь длинным — 4 пункта. Во-первых, браузер загружает фавиконку асинхронно. Во-вторых, он сначала посмотрит на весь список фавиконок и загрузит только одну — самую подходящую.
Фавиконки — часть программы курса «HTML и CSS. Профессиональная вёрстка сайтов». Кроме этого в комплекте два месяца теории и практики, интересные проекты и личный наставник. А по промокоду SKUCHNO — скидка 1000 ₽.
Иконки продуктов — СКБ Контур
У большинства продуктов Контура есть собственные иконки. Они выполнены как единый набор, и гармонично сочетаются между собой и остальными элеметнами фирменного стиля.
Иконки в Figma
Использование
Иконки продуктов используются в следующих случаях:
- Списки продуктов;
- Фавиконки и touch-иконки сайтов;
- Иконки мобильных и десктоп-приложений;
- Аватарки продуктов в соцсетях
- Другие случаи, когда текстовый логотип неприменим.
Иконка — не логотип
Иконка продукта не является логотипом или его частью. Нельзя использовать конструкцию «иконка + текстовый логотип».
Стили иконок
Дефолтный
Основной стиль с цветной подложкой, используется в большинстве случаев.
Symbol
Легкая версия приглушенного цвета без подложки. Подходит для больших списков продуктов, и где уместнее использовать упрощенную иконку.
Glyph
Специальная версия, где линия — вырез. Используется в маленьких фавиконках.
Специальные версии
Для круглых аватарок
Версия «Avatar» для использования в качестве аватарки в соцсетях и других местах, где накладывается круглая маска. Значок в этой версии немного уменьшен и оптически скомпенсирован так, чтобы лучше смотрелся в круге.
Фавиконки и Touch-иконки
Для маленьких фавиконок используется стиль «Glyph», где линия — это прозрачный вырез, принимающий цвет фона. Такая фавиконка выгодно смотрится сразу в светлой и темной теме браузера. Для больших Touch-иконок используется дефолтный стиль в версии без скруглений у плашки (браузеры обернут их в свои скругления).
Мобильные приложения
Приложения для iOS и Android используют дефолтный стиль иконок, но с учетом требований магазинов приложений. Такие иконки готовятся по запросу.
Рабочий стол Windows
Используется дефолтный стиль. По умолчанию для всех продуктов доступен ICO-файл, в который включены размеры 16, 32, 48 px. Другие размеры готовятся по запросу.
Размеры
Иконки в дефолтном стиле доступны во многих ходовых размерах. Используйте их в оригинальном размере, т. к. толщина линии подобрана индивидуально, а элементы подогнаны под пиксельную решетку.
Палитра
Продуктовые иконки используют собственную палитру, которая немного отличается от оттенков «Basic (60)» из общей палитры. В ней цвета приведены к более общему тону, чтобы в списках продуктов явно не было более темных/светлых иконок.
Если в промо-материалах это отклонение является проблемой, допускается перекрасить иконки в оттенки из общей палитры.
Сервер статики
При использовании в вебе по возможности ссылайтесь на иконки прямо с сервера статики, где хранятся самые актуальные версии. Если со временем продукт сменит цвет или значок в иконке, изменения произойдут автоматически.
Иконки файлов Ico скачать бесплатно
Расширенный поиск Запросить дизайн
[ Иконки ] Дизайн иконок ( 53,72 КБ )
Ага-Софт
[Значки] Файлы Файл разработчика ( 133,87 КБ )
Бенжигарнер (Винсент Гарнье)
[ Иконки ] Файлы Файл фильма ( 51,35 КБ )
Шон Пун
[Значки] Файлы ( 62,46 КБ )
Делекет (Джоджо Мендоса)
[Значки] My Flash Files (58,32 КБ)
Делекет (Джоджо Мендоса)
файлы ico ico files recycle ico icon pc ico refresh ico building ico vista ico usb ico coffee ico new ico home ico money ico recycle ico down file ico free ico icons twitter ico галерея ico
Пользовательский дизайн значков
[ Иконки ] Файлы Загрузить файл ( 88,48 КБ )
Шон Пун
[Значки] Файлы Файл ( 46,74 КБ )
Шон Пун
[Значки] Мои файлы SWF (59,73 КБ)
Делекет (Джоджо Мендоса)
[Значки] Мои файлы Adobe PDF (55,74 КБ)
Делекет (Джоджо Мендоса)
[Значки] Файлы Веб-файл (128,51 КБ)
Бенжигарнер (Винсент Гарнье)
[ Иконки ] Файлы Файл изображения ( 128,57 КБ )
Бенжигарнер (Винсент Гарнье)
[Значки] Файлы Файл настроек ( 67,39 КБ )
Шон Пун
[ Иконки ] Файлы Скачать файл ( 88,44 КБ )
Шон Пун
[Значки] Мои файлы Adobe Photoshop ( 65,86 КБ )
Делекет (Джоджо Мендоса)
[Значки] Файлы Векторный файл (70.
Бенжигарнер (Винсент Гарнье)
[Значки] Файлы Файл шрифта ( 95,13 КБ )
Бенжигарнер (Винсент Гарнье)
[Значки] Файлы Новый файл (81,17 КБ)
Шон Пун
[ Иконки ] Файлы Редактировать файл ( 60,94 КБ )
Шон Пун
[Значки] Мои файлы Fireworks ( 60,24 КБ )
Делекет (Джоджо Мендоса)
[ Иконки ] Файлы Текстовый файл ( 121,28 КБ )
Бенжигарнер (Винсент Гарнье)
[Значки] Файлы Файл ( 61,17 КБ )
Бенжигарнер (Винсент Гарнье)
[Значки] Файлы Музыкальный файл ( 61,15 КБ )
Шон Пун
[Значки] Файлы Копировать файл ( 60,14 КБ )
Шон Пун
[Значки] Мои файлы Dreamweaver ( 61,87 КБ )
Делекет (Джоджо Мендоса)
Загрузка дополнительных элементов, пожалуйста, подождите. ..
Загрузка дополнительных элементов, подождите…
Критерий поиска:
Тип поиска:
Совпадение с любымСовпадение со всеми
Искать в:
ВекторыИконкиФотоШрифтыШаблоны сайтовPSD
Лицензия:
Все лицензииРазрешить коммерческое использование
Результат сортировки:
Сначала лучшее совпадениеСначала новыеСначала много загрузокСначала меньше загрузок
- Дом
- Лицензии
- Срок
- Конфиденциальность
- О
- Связаться с
Ubuntu Manpage: ico — Чтение и запись значков Windows
Предоставлено: tklib_0.7+20210111-1_all
ИМЯ
ico - Чтение и запись значков WindowsОБЗОР
пакет требует Ткл 8,4 пакет требует ico ?1. 0.5? ::ico::icons файл ? вариант значение ...? ::ico::iconMembers файл имя ? вариант значение ...? ::ico::getIcon файл имя ? вариант значение ...? ::ico::getIconByName файл имя ? вариант значение ...? ::ico::getFileIcon файл ? вариант значение ...? ::ico::writeIcon файл имя глубина данные ? вариант значение ...? ::ico::copyIcon файл индекс файл2 индекс2 ? вариант значение ...? ::ico::EXEtoICO файл ?dir? ::ico::clearCache ?файл? ::ico::transparentColor изображение цвет ::ico::Показать файл ? вариант значение . ..? _________________________________________________________________________________________________ОПИСАНИЕ
Этот пакет предоставляет функции для чтения и записи значков Windows из ICO, EXE, DLL, ICL и BMP файлы. В данном модуле значок представляет собой визуальное представление объект. Значок состоит из одного или нескольких изображений, обычно с разным разрешением и цветом. глубина. Каждый значок и изображение имеют идентификатор ресурса, который может быть текстовой строкой или положительное целое значение. Большинство команд используют этот идентификатор, чтобы указать, какой значок или изображение оперировать.API
::ico::icons файл ? вариант значение ...? Возвращает список значков, найденных в файле , где каждый элемент является именем или числовым идентификатором. Распознает следующие параметры: -тип формат файла ::ico::iconMembers файл имя ? вариант значение . ..? Возвращает список изображений, из которых состоит иконка с идентификатором 9.0269 имя . Каждый элемент сам по себе подсписок в формате {имя ширина высота bpp}. Распознает следующие параметры: -тип формат файла ::ico::getIcon файл имя ? вариант значение ...? Извлекает значок с идентификатором и именем из файла . По умолчанию -формат представляет собой изображение , которое будет вернуть имя изображения Tk, содержащего значок. Разрешение и глубина цвета выбираются с параметрами ?-res?, ?-bpp? и ?-exact? опции. Если указано -exact а точного совпадения нет, выдает ошибку. Опционально -изображение можно использовать для укажите имя создаваемого образа Tk. Если -формат - это цветов , то список имен цветов в формате #RRGGBB. Каждый элемент списка представляет собой горизонтальную строка. Каждая горизонтальная строка содержит список цветов для всех пикселей в этой строке. слева направо. Если -format равно name , то имя ресурса выбранного изображения возвращается. Это полезно для вызова writeIcon или getIconByName. Признает следующие опция с. -тип формат файла - формат значения -значение изображения -рез значение -bpp значение - точное значение ::ico::getIconByName файл имя ? вариант значение ...? Извлекает изображение с идентификатором и именем из файла . Это имя должно быть именем конкретное изображение, возвращенное ::ico::iconMembers , не имя значка возвращено из ::ico::иконки . Если в файле нет соответствующего идентификатора ресурса, возникает ошибка. Распознает следующие параметры: -тип формат файла - формат значения ::ico::getFileIcon файл ? вариант значение ...? Эта команда работает только в Windows. Он читает винду реестр, чтобы определить отображаемый значок для файл , как он будет отображаться в Проводнике или похожий. файл не обязательно должен существовать и может быть указан как расширение файла с ведущей точкой. Если файл является каталогом или вы указываете специальное имя Папка затем возвращается значок, представляющий папку. Эта команда принимает то же самое аргументы и использование как getIcon : - формат значения -значение изображения -res значение -bpp значение - точное значение ::ico::writeIcon файл имя глубина данные ? вариант значение . ..? Записывает изображение в файл . имя является идентификатором ресурса изображения в файле для записывать. При записи в файл EXE, DLL или ICL вы можете перезаписывать только существующие значки со значком тех же размеров и глубины цвета. Никакие значки не могут быть добавлены к эти типы файлов. При записи в BMP имя игнорируется, так как этот тип может содержать только одно изображение. Это означает, что если файл уже существует, он будет полностью перезаписан. При записи в файл ICO или ICODATA, если указанное имя не существует, изображение добавляется и будет названо следующим по порядку (указанное имя игнорируется). Изображения в файлах ICO и ICODATA могут быть перезаписаны разными размеры или глубину цвета. Обратите внимание, что вы получите странные результаты при отображении значки, если вам не удалось изменить каждое изображение, составляющее данный значок. целое число глубина (дюйм) Этот аргумент должен иметь значение 1 , 4 , 8 , 24 или 32 . Если данных больше цветов, чем позволяет глубина цвета, будет сгенерирована ошибка. опции данные (в) Этот аргумент является либо списком цветов в формате, возвращаемом функцией ::ico::getIcon -format цветов или имя изображения Tk. Распознает следующую опцию s. -тип формат файла ::ico::copyIcon файл индекс файл2 индекс2 ? вариант значение ...? Копирует значок index в файл в index2 в file2 . -fromtype формат файла -totype Формат файла ::ico::EXEtoICO файл ?dir? Извлекает все значки из исполняемого файла в файлы ICO, размещенные в каталоге . ?дир? по умолчанию используется каталог , в котором находится файл . Файлы значков будут называться в форме файл -ID.ico, где ID — это идентификатор ресурса значка. -тип формат файла ::ico::clearCache ?файл? Команда ::ico::getIconList кэширует смещения значков внутри EXE, DLL, ICL и ICO файлов для ускорения извлечения. Эта команда очищает этот кеш для конкретный? файл? или все файлы. ::ico::transparentColor изображение цвет Если изображение представляет собой одно слово, предполагается, что оно является именем изображения Tk. Все пиксели соответствующий цвет в изображении будет установлен прозрачным. В качестве альтернативы изображение может быть список цветов, и в этом случае возвращается измененный список. ::ico::Показать файл ? вариант значение . ..? Команда уровня приложения, которая отображает окно со всеми значками в файле и их название. -тип формат файла -родительский имя_путиПРИМЕР
кнопка .explore -image [::ico::getIcon explorer.exe 0 -name explore -res 16 -bpp 8] set i [lsearch -inline [::ico::iconMembers tclkit.exe 0] {* 32 32 8}] set colorlist [::ico::getIconByName tclkit.exe [lindex $i 0] -format colors]ОГРАНИЧЕНИЯ
Иконки не могут быть добавлены или удалены из типов файлов, кроме ICO. Иконки в этих файлах могут заменять только значками того же размера и глубины цвета. Иконки 8bpp или ниже должны включать черный цвет в палитре, это означает, что если ваша иконка не есть черный, вам нужно будет оставить цвет свободным, чтобы он мог быть включен написатьИконка. В настоящее время невозможно прочитать информацию об альфа-канале из 32-битных значков.