ICO — формат файла изображения
.ICO вариант №
Файлы с расширением ICO представляют собой типы файлов изображений, используемые в качестве значков для представления приложения в Microsoft Windows. Они бывают разного размера, поддерживают цвет и разрешение в соответствии с требованиями дисплея. Другим подобным форматом файла изображения в Microsoft Windows является CUR для представления курсора и определения активной области в заголовке изображения. В MacOS форматы файлов ICNS служат той же цели, что и файлы ICO. Несколько онлайн-сайтов, а также приложений предоставляют возможность создания таких файлов и преобразования других форматов изображений, таких как BMP, PNG и т. д., в формат файла значка. Официальным зарегистрированным IANA типом интернет-носителя для файлов ICO является image/vnd.microsoft.icon.
Краткая история
Иконки были представлены с запуском Microsoft Windows 1.0. Они были размером 32×32 и были монохромными. С появлением win32 была введена поддержка изображений значков в истинном цвете с размером до 256×256 пикселей.
Windows XP была первой, которая обеспечила поддержку 32-битных цветных изображений значков, позволяя добавлять к значку полупрозрачные области, такие как тени, сглаживание и эффекты, подобные стеклу. Microsoft рекомендует только размеры значков до 48×48 пикселей для Windows XP. Windows Vista добавила в проводник Windows представление значков размером 256 × 256 пикселей, а также поддержку сжатого формата PNG. Пользователям, использующим более высокие разрешения и режимы с высоким DPI, рекомендуются более крупные форматы значков (например, 256 × 256).
Формат файла ICO
Один файл ICO состоит из одного или нескольких небольших изображений разных размеров и глубины цвета. Наличие изображений нескольких размеров для соответствующего масштабирования при разных разрешениях экрана. Все значения в файлах ICO/CUR представлены в порядке байтов little-endian.
Файл ICO состоит из заголовка значка, каталога значков,
| Поле | Описание |
|---|---|
| Заголовок значка | Хранит общую информацию о файле ICO. |
| Directory[1..n] | Хранит общую информацию о каждом изображении в файле. |
| Иконка №1 | Фактические «данные» для первого изображения в старом формате AND/XOR DIB или более новом формате PNG |
| … | |
| Icon #n | Данные для последнего изображения значка |
Заголовок
| Смещение | Размер (в байтах) | Назначение |
|---|---|---|
| 0 | 2 | Зарезервировано. Всегда должен быть 0. |
| 2 | 2 | Указывает тип изображения: 1 для изображения значка (.ICO), 2 для изображения курсора (.CUR). Другие значения недействительны. |
| 4 | 2 | Указывает количество изображений в файле. |
Справочник
Каталог, содержащийся в файле ICO, представленный как структура ICONDIR, содержит структуру ICONDIRECTORY для каждого изображения в файле. За ним следует непрерывный блок всех растровых данных изображения.
Это показано ниже.
| Смещение | Размер | Описание |
|---|---|---|
| 0 (0) | 1 | Ширина, должна быть 0, если 256 пикселей |
| 1 (1) | 1 | Высота, должна быть 0, если 256 пикселей |
| 2 (2) | 1 | Количество цветов, должно быть 0, если цветов больше 256 |
| 3 (3) | 1 | Зарезервировано, должно быть 0 |
| 4 (4) | 2 | Цветные плоскости в формате .ICO должны быть 0 или 1, или точка доступа X в формате .CUR |
| 6 (6) | 2 | Бит на пиксель в формате .ICO или точка Y в формате .CUR |
| 8 (8) | 4 | Размер растровых данных в байтах. |
| 12 (C) | 4 | Смещение в файле. |
Использованная литература
- ICO — Википедия
- IANA — vnd.microsoft.icon
О favicon и не только
Форматы favicon
Основными форматами для favicon являются ICO, PNG и SVG.
При желании, значок сайта можно сделать в форматах JPEG или анимированном GIF. Но из-за слабой поддержки основными браузерами использование таких значков превращается в нецелесообразную экзотику. Хотя и можно сделать favicon в формате GIF без анимации, но не нужно – лучше в PNG.
Favicon.ico
Хотя формат ICO сейчас считается устаревшим, но сбрасывать со счетов его ещё рано. Основными достоинствами этого формата являются: возможность хранения в одном файле нескольких вариантов размеров иконки сайта и поддержка полупрозрачности. Надо помнить что, IE10 и более ранние версии этого браузера понимают только ICO. Так же следует учитывать то, что этот формат довольно широко используется в операционной системе Windows. Т. е. favicon.ico используется как изображение для вкладок, панели задач, рабочего стола. Поэтому для корректного отображения на этих объектах, создаётся файл в формате ICO, содержащий три изображения рекомендуемых размеров: 16х16, 32х32 и 48х48. Сделать такой файл можно здесь.
Подключение favicon.ico на сайте производится с помощью следующего кода:
<link href="/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
В параметре href указывается путь до иконки сайта. В этом примере и далее в этой статье предполагается, что файл favicon размещён в корне сайта. Если файл иконки размещается не в корне сайта, то тогда нужно указать соответствующий путь.
Favicon.png
Формат PNG предоставляет более широкие возможности для изображения, чем ICO. Сейчас очень большое количество сайтов используют favicon в формате PNG. Он поддерживается всеми основными браузерами. Подключение favicon.png на сайте производится с помощью следующего кода:
<link href="/favicon.png" rel="icon" type="image/png" />
Favicon.svg
Формат SVG — новый открытый формат векторной графики. В силу того, что изображения в SVG масштабируются без потери качества, он идеально подходит для favicon. Этот формат является рекомендацией консорциума W3C, его поддерживают ещё не все браузеры, но за ним будущее.
Подключение favicon.svg на сайте производится с помощью следующего кода:
<link href="/favicon.svg" rel="icon" type="image/svg+xml" />
Отслеживать поддержку SVG браузерами можно здесь.
Favicon – устройства, ОС, технологии
С приходом HTML 5 появилась возможность указывать размеры favicon. Теперь различные мобильные устройства или браузеры могут выбрать необходимый размер значка и использовать его, например, как изображение для ярлыка на рабочем столе. За указание размеров отвечает атрибут size. Делается это так:
<link href="/favicon-32x32.png" rel="icon" type="image/png" /> <link href="/favicon-16x16.png" rel="icon" type="image/png" />
Для favicon.svg можно сделать так:
<link href="/favicon.svg" rel="icon" type="image/svg+xml" />
Так как формат SVG векторный и может масштабироваться, то даём указание использовать изображение для любых размеров.
Windows
Начиная с версии Windows 8.
1, появилась возможность закреплять сайты с помощью т. н. живых плиток. Для изображений на плитках малого размера будет использоваться favicon. Для средних и больших плиток лучше задать изображения подходящих размеров. Сделать это можно двумя способами: разместить в заголовке сайта специальные метатеги или создать файл конфигурации браузера. Второй способ более предпочтителен т. к. размещение лишних тегов метаданных увеличивает заголовок страницы, что не лучшим образом сказывается на скорости загрузки. И так, создаётся файл browserconfig.xml следующего содержания:
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="/mstile-70x70.png"/>
<square150x150logo src="/mstile-150x150.png"/>
<square310x310logo src="/mstile-310x310.png"/>
<wide310x150logo src="/mstile-310x150.png"/>
<TileColor>#da532c</TileColor>
</tile>
</msapplication>
</browserconfig>Он описывает четыре изображения для различных размеров живых плиток: три квадратные и одно прямоугольное.
В теге TileColor указывается фоновый цвет плитки. Сами изображения следует брать большего размера, примерно в 1,8-2 раза. Например, для плитки 70×70 лучше взять изображение размером 128×128. Делается это с целью поддержки экранов с высокой плотностью пикселов. Подключение файла конфигурации браузера на сайте производится с помощью следующего кода:
<meta name="msapplication-config" content="browserconfig.xml" />
Mac OS и Safari
Версии Safari под Mac OS поддерживают формат SVG. Такое изображение нужно для закладок в этом браузере. Но есть один момент – элементы изображения должны быть или чёрными или белыми. В коде подключения используется атрибут color. Так вот, после подключения все элементы чёрного цвета будут отображаться тем цветом, который указан в этом атрибуте. Подключение для Safari в Mac OS производится с помощью следующего кода:
<link href="/safari-pinned-tab.svg" rel="mask-icon" color="#598473" />
Обратите внимание на то, что имя файла и значение rel должны быть такими, как в примере.
Apple (iOS)
Safari в устройствах Apple, на базе операционной системы iOS тоже использует иконку сайта для закладок. Но favicon может использоваться и как значок на рабочем столе. Для того, чтобы на устройствах Apple значок сайта смотрелся прилично, понадобятся изображения в формате PNG и несколько строк кода. Устройств на базе iOS довольно много и они имеют различные размеры экранов. Для каждого размера нужен свой значок. Размеры этих значков следующие: 57×57, 60×60, 72×72, 76×76, 114×114, 120×120, 144×144, 152×152, и 180×180. В некоторых источниках рекомендуется писать код для каждого размера favicon. Объясняется это тем, что иконки для устройств от Apple, в виду их большой популярности, используются (ищутся) устройствами других производителей. Вот так подключается изображение для одного из размеров:
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
Можно обойтись без девяти строк кода и ограничиться тремя, хотя файлы всех девяти размеров лучше загрузить на сайт.
Используется одна хитрость: если иконка не соответствует рекомендуемому размеру устройства, то используется иконка большего размера. Подключаем изображение размером 180×180 следующим образом:
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
Затем добавим строку кода из предыдущего примера:
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
Т. е. по крайней мере, основная иконка должна быть 180×180. Остальные устройства могут уменьшить изображение. Есть ещё одна тонкость, иконки в iOS оформляются в определённом стиле, т. е. используются скругленные уголки, тень, блики. Когда загружается значок сайта, устройство начинает приводить его к этому стилю. Если это не нужно, то добавляем следующий код:
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon.png" />
А ещё можно указать заголовок:
<meta name="apple-mobile-web-app-title" content="Aitishnik.RU" />
Android
К сожалению, изображения в формате SVG пока не поддерживаются ОС Android.
Поэтому используются изображения в формате PNG. Для настроек используется файл manifest.json. Он может быть следующего содержания:
{
"name": "Aitishnik.RU",
"icons": [
{
"src": "android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "android-chrome-256x256.png",
"sizes": "256x256",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"start_url": "http://www.aitishnik.ru",
"display": "standalone"
}Файл – манифест описывает настройки отображения сайта на домашнем экране, как веб-приложения. В примере:
name – подпись к приложению. Если ключ name не указан, то для подписи будет использоваться содержимое тега title из заголовка сайта. Если значение name длинное, то можно добавить ключ short_name для короткой подписи.
icons – этот ключ определяет набор иконок. Внутри него ключи src, sizes и type определяют источник изображения, размер и тип изображения соответственно.
theme_color – передаёт цветовое значение строки состояния.
background_color – фоновый цвет для иконки на домашнем экране.
display – режим отображения веб-приложения.
Файл manifest.json подключается в заголовке сайта следующим кодом:
<link rel="manifest" href="/manifest.json" />
Заключение
У человека, прочитавшего всё вышеизложенное, может сложиться впечатление, что всё это очень сложно и нудно. Отчасти это так. Но к счастью, есть сервисы, которые делают всю эту работу за нас. Например, http://realfavicongenerator.net. На этом ресурсе можно сгенерировать все нужные иконки и получить код для вставки на сайт.
Вот и всё. Удачи в сайтостроении!
Помните, что у нас вы можете не только купить готовый сайт или заказать его разработку, но и подобрать подходящий тариф поддержки сайта, заказать продвижение сайта в поисковых системах, а так же зарегистрировать домен в одной из двухсот доменных зон и выбрать недорогой тариф хостинга! Айтишник РУ
Задать вопрос
Об авторе:
Меня зовут Андрей Золкин.
Из более, чем пятнадцати лет работы в сфере информационных технологий, десять лет работаю с системами, базирующимися на открытом исходном коде. На страницах сайта Aitishnik.Ru веду блоги по CMC Joomla и Debian GNU/Linux.
Ещё о сайтостроении
-
Где купить хостинг и домен?
Домен — это имя сайта в глобальной сети Интернет. Домен используется не только в качестве адреса сайта, к домену можно прикрепить электронную почту и другие сервисы. Прежде чем вы будете выбирать провайдера, где купить домен, вам следует…
Создание сайтов: цели и методы
Создатели сайтов, как правило, преследуют несколько известных целей.
Во-первых, видные организации, представляющие свой ресурс, стремятся подчеркнуть свой имидж и статус. На квалифицировано спроектированном веб-ресурсе, где прописан скрипт доски объявлений…Чем должна заканчиваться каждая страница успешного сайта? …
Существует ряд ошибок, которые допускают многие владельцы сайтов при его создании. Одну из таких ошибок можно заметить на многих веб-ресурсах. Это не только игнорирование хостинга и бесплатная аренда сервера в Киеве с тестовым периодом, но и резкое…
Сайт: основные функции, разработка и продвижение…
Информация всегда была и продолжает оставаться одним из важнейших элементов привлечения внимания – к товарам, услугам, личности и т.
Зачем вебмастеру VPN?
Повсеместная доступность Интернета привела к тому, что пользоваться им стало небезопасно. Мошенники превратили сеть в стабильный источник дохода. Они взламывают сайты, блоги, электронную почту, кошельки и все, что под руку попадет….
Что лучше хостинг или VPS
Сказать, то VPS лучше виртуального хостинга (или наоборот) некорректно, поскольку они предназначены для разных аудиторий.ВПС актуален в том случае, когда виртуальный хостинг не в силах поддерживать web-проект, или же пользователю нужно.
..
..ICO — Формат файла изображения
Что такое файл ICO?
Файлы с расширением ICO — это типы файлов изображений, используемые в качестве значка для представления приложения в Microsoft Windows. Они бывают разного размера, поддерживают цвет и разрешение в соответствии с требованиями дисплея. Другой аналогичный формат файла изображения в Microsoft Windows — CUR для представления курсора и определяет активную точку в заголовке изображения. В MacOS форматы файлов ICNS служат той же цели, что и файлы ICO. Несколько онлайн-сайтов, а также приложений предоставляют возможность создания таких файлов и преобразования других форматов изображений, таких как BMP, PNG и т. д., в формат файла значка. Официальным зарегистрированным IANA типом интернет-носителя для файлов ICO является изображение/vnd.microsoft.icon.
Краткая история
Значки были представлены с запуском Microsoft Windows 1.
0. Они были размером 32×32 и были монохромными. С появлением win32 была введена поддержка изображений значков в истинном цвете с размером до 256×256 пикселей. Windows XP была первой, которая обеспечила поддержку 32-битных цветных изображений значков, позволяя добавлять к значку полупрозрачные области, такие как тени, сглаживание и эффекты, подобные стеклу. Microsoft рекомендует только размеры значков до 48×48 пикселей для Windows XP. Windows Vista добавила вид значков размером 256 × 256 пикселей в проводник Windows, а также поддержку сжатого формата PNG. Пользователям, использующим более высокие разрешения и режимы с высоким DPI, рекомендуются более крупные форматы значков (например, 256 × 256).
Формат файла ICO
Один файл ICO состоит из одного или нескольких небольших изображений разных размеров и глубины цвета. Наличие изображений нескольких размеров для соответствующего масштабирования при разных разрешениях экрана. Все значения в файлах ICO/CUR представлены в порядке байтов с прямым порядком байтов.
ICO-файл состоит из заголовка Icon, Каталога Icon,
| Поле | Описание |
|---|---|
| Заголовок Icon | Хранит общую информацию о файле ICO. |
| Каталог[1..n] | Содержит общую информацию о каждом изображении в файле. |
| Значок #1 | Фактические «данные» для первого изображения в старом формате AND/XOR DIB или новее PNG |
| … | |
| Номер значка n | Данные для последнего изображения значка |
| Смещение | Размер (в байтах) | Назначение |
|---|---|---|
| 0 | 2 | Зарезервировано. Всегда должно быть 0. |
| 2 | 2 | Указывает тип изображения: 1 для изображения значка (.ICO), 2 для изображения курсора (.CUR). Другие значения недействительны. |
| 4 | 2 | Указывает количество изображений в файле. |
Каталог
Каталог, содержащийся в файле ICO, представленный в виде структуры ICONDIR, содержит структуру ICONDIRECTORY для каждого изображения в файле. За ним следует непрерывный блок всех растровых данных изображения. Это показано ниже.
| Смещение | Размер | Описание |
|---|---|---|
| 0 (0) | 1 | 900 27 Ширина, должна быть 0, если 256 пикселей|
| 1 (1) | 1 | Высота, должно быть 0, если 256 пикселей |
| 2 (2) | 1 | Количество цветов, должно быть 0, если более 256 цветов |
| 3 (3) | 1 | Зарезервировано, должно быть 0 |
| 4 (4) | 2 | Цветовые плоскости в формате .ICO должны быть 0 или 1, или точка доступа X в формате .CUR |
| 6 (6) | 2 | Бит на пиксель, когда в формате .ICO или точка Y в формате . CUR |
| 8 (8) | 4 | Размер растровых данных в байтах. |
| 12 (C) | 4 | Смещение в файле. |
Ссылки
- ICO — By Wikipedia
- IANA — vnd.microsoft.icon
Создание значков ICO (.ico) • Программирование — это весело
Автор JanellОпубликовано
Персонализируйте приложение с помощью пользовательского значка.
Чтобы добавить пользовательские значки приложений в свои проекты или фавикон на веб-сайты, вам потребуются значки ICO. Чтобы сделать это, вы можете экспортировать изображение как ICO (формат файла .ico), преобразовать существующую графику в формат файла или загрузить готовое изображение.
«Файлы ICO содержат одно или несколько небольших изображений разного размера и глубины цвета, чтобы их можно было соответствующим образом масштабировать.
В Windows все исполняемые файлы, которые отображают значок для пользователя, на рабочем столе, в меню «Пуск» или в проводнике Windows должен содержать значок в формате ICO». (Википедия)Создание значков ICO
Вы можете экспортировать напрямую из приложения, такого как GNU Image Manipulation Program, без добавления плагинов. GNU Image Manipulation Program (GIMP) — это редактор изображений с открытым исходным кодом, такой как Photoshop. Это мощный и отличный вариант для графики.
Показать снимок экрана
Экспорт ICO из GIMP
Для других графических программ может потребоваться плагин. Photoshop CS6, например, нуждался в плагине для экспорта в формате .ico. Однако доступно несколько бесплатных, поэтому, если вы готовы добавить плагин, это легко исправить.
Преобразование изображений в ICO
Вы также можете использовать онлайн-конвертер. Загрузите свое изображение, а затем загрузите файл как ICO. Как и в случае с плагинами, в Интернете есть из чего выбирать.
Существуют также сайты, позволяющие создать значок ICO в браузере. Многие из них представляют собой сетки, позволяющие раскрашивать квадраты, представляющие пиксели. Вы не сможете получить тот же диапазон цветов, форм и эффектов, как если бы вы использовали графическую программу, но они отлично подходят для простых дизайнов или 8-битных стилей ретро.
Онлайн-конструктор значков favicon.ccНекоторые, например favicon.cc, имеют предварительный просмотр того, как значок будет выглядеть в меньшем размере. На приведенном выше снимке экрана показан предварительный просмотр результата в виде значка в адресной строке браузера.
Готовые ICO
Существует множество готовых ICO значков, которые вы можете скачать. Здесь, в Programming Is Fun, есть девять значков формата .ico, которые вы можете использовать, делиться и/или адаптировать (даже для коммерческого использования), если вы указываете источник (Международная лицензия Creative Commons Attribution-ShareAlike 4.
