Чем создать ico: Как создать файл формата ico

ICO — формат файла изображения

.ICO вариант №

Файлы с расширением ICO представляют собой типы файлов изображений, используемые в качестве значков для представления приложения в [Microsoft Windows] (https://www.microsoft.com/en-us/windows). Они бывают разного размера, поддерживают цвет и разрешение в соответствии с требованиями дисплея. Другим подобным форматом файла изображения в Microsoft Windows является CUR для представления курсора и определения активной области в заголовке изображения. В MacOS форматы файлов ICNS служат той же цели, что и файлы ICO. Несколько онлайн-сайтов, а также приложений предоставляют возможность создания таких файлов и преобразования других форматов изображений, таких как [BMP] (/ru/image/bmp/), [PNG] (/ru/image/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] (/ru/image/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

Бесплатный онлайн конвертер изображений в ICO

Онлайн конвертер

• Конвертеры
• Форматы
• Карта сайта

Глубина цвета

32 (True color, YCbCrK)24 (True color, YCbCr) 8 (Grayscale)

Качество, %

тип сжатия

baseline (default)progressivelosslesssequential

sample

1:1:1 (11:11:11) (default)4:2:2 (22:21:21)4:2:1 (22:21:11)4:4:2 (22:22:21)4:1:1 (22:11:11)

lossless predictor

Auto select best predictor01234567

interleaved
оптимизация huffman кодов
предварительный просмотр
Сохранить EXIF, если есть
Сохранить IPTC, если есть

Порядок байтов

от младшего к старшемуот старшего к младшему

save TIFF file with:

MultistripSinglestripTiled

Jpeg subsample

1:1:1 (11:11:11) (default)4:2:2 (22:21:21)4:1:1 (22:11:11)

photometric mono

Leave As IsMinimum is WhiteMinimum is Black

With fill order:

most significant to leastleast significant to most

создать превью
Сохранить EXIF, если есть
Сохранить IPTC, если есть
BigTIFF формат

Ширина:

Высота:

Сохранить пропорции

#	Результат	Исходный файл

---

Чтобы выполнить конвертацию изображений, выполните несколько шагов:

• С помощью кнопок «Локальный файл» или «Онлайн файл» укажите каким образом загрузить изображение на сервер.
  Используете «локальный файл» если вам нужно сконвертировать файл с вашего компьютера, для того чтобы указать файл, находящийся в интернете выберите «Онлайн файл» и в появившемся поле вставьте ссылку на файл. Мы не устанавливаем никаких ограничений на размер файла с изображением, но чем больше файл, тем больше времени будет занимать конвертация. Просто наберитесь терпения и все получится.
• Если вам нужно изменить его размер, то просто укажите размер в поле «Изменить размер» ширину и высоту изображения. Если вам нужна точная подгонка по высоте или ширине, то укажите только её и установите флаг «Сохранить пропорции», в этом случае конвертер преобразует файл по вашему условию, вторая же величина будет рассчитана автоматически.
• Для начала конвертации нажмите кнопку «Конвертировать» чтобы начать преобразование. В случае успешной конвертации файл будет доступен в разделе «Результаты конвертации». Если вам нужно просто скачать файл, то кликните на имя файла. Если вы хотите получить другие способы сохранения, то нажмите на значок чтобы сформировать QR-код для загрузки результата на ваш мобильный телефон или планшет, а также если вы хотите сохранить файл в одном из онлайн-сервисов хранения данных, таких как Google Drive или Dropbox.

Пожалуйста, будьте терпеливы в процессе преобразования.

ICO — Microsoft icon

Format introduction
The ICO file format is an image file format for computer icons in Microsoft Windows. ICO files contain one or more small images at multiple sizes and color depths, such that they may be scaled appropriately. In Windows, all executables that display an icon to the user, on the desktop, in the Start Menu, or in Windows Explorer, must carry the icon in ICO format.
Technical details
An ICO file is made up of an ICONDIR («Icon directory») structure, containing an ICONDIRENTRY structure for each image in the file, followed by a contiguous block of all image bitmap data (which may be in either Windows BMP format, excluding the BITMAPFILEHEADER structure, or in PNG format, stored in its entirety).

Copyright © 2016-2022 fConvert.ru. All rights reserved.

English

Фавикон должен быть 32×32 или 16×16?

спросил 12 лет, 4 месяца назад

Изменено 1 год, 2 месяца назад

Просмотрено 804 тыс. раз

Я хочу использовать одно изображение как в качестве обычного фавикона, так и в качестве фавикона для iPhone/iPad.

Возможно ли это? Будет ли масштабироваться формат PNG 72×72, подходящий для iPad, если на него ссылаться как на обычную иконку браузера? Или мне нужно использовать отдельное изображение 16×16 или 32×32?

• фавикон

1

Обновление на 2020 год: Придерживаясь исходного вопроса о значках 16×16 против 32×32 : текущая рекомендация должна состоять в том, чтобы предоставить значок 32×32, полностью пропуская 16×16. Все современные браузеры и устройства поддерживают значки размером 32×32. Размер значка обычно увеличивается до 192×192 в зависимости от среды (при условии, что больших размеров нет или система их не распознала). Масштабирование сверхнизкого разрешения имеет заметный эффект, поэтому лучше придерживаться 32×32 в качестве наименьшего базового уровня.

---

Для IE Microsoft рекомендует 16×16, 32×32 и 48×48, упакованные в файл favicon.ico.

Для iOS Apple рекомендует определенные имена файлов и разрешения, максимум 180×180 для последних устройств с iOS 8.

Android Chrome в основном использует манифест, а также использует значок Apple Touch.

IE 10 в Windows 8.0 требует изображений PNG и цвета фона, а IE 11 в Windows 8.1 и 10 принимает несколько изображений PNG, объявленных в специальном файле XML с именем browserconfig.xml .

Safari для Mac OS X El Capitan представляет значок SVG для закрепленных вкладок.

Некоторые другие платформы ищут файлы PNG с различными разрешениями, например изображение 96×96 для Google TV или изображение 228×228 для Opera Coast.

Посмотрите на этот список изображений favicon для полной справки.

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

4

Фавикон должен представлять собой набор изображений 16×16, 32×32 и 48×48 в формате ICO. Формат ICO отличается от PNG. Неквадратные изображения не поддерживаются.

Для создания фавиконки, по многим причинам, описанным ниже, я советую вам использовать этот генератор фавиконки. Полное раскрытие: я автор этого сайта.

Фавикон должен быть квадратным. Настольные браузеры и Apple iOS не поддерживают неквадратные значки.

Фавикон поддерживается несколькими файлами:

• Значок favicon.ico .
• Некоторые другие иконки PNG.

Чтобы получить наилучшие результаты в настольных браузерах (Windows/IE, MacOS/Safari и т. д.), вам необходимо комбинировать оба типа значков.

favicon.ico

Хотя все настольные браузеры могут работать с этим значком, в первую очередь он предназначен для более старых версий IE.

Формат ICO отличается от формата PNG. Этот момент сложен, потому что некоторые браузеры достаточно умны, чтобы правильно обрабатывать изображение PNG, даже когда он был ошибочно переименован с расширением ICO.

Файл ICO может содержать несколько изображений, и Microsoft рекомендует размещать версии значка 16×16, 32×32 и 48×48 в favicon.ico . Например, IE будет использовать версию 16×16 для адресной строки и 32×32 для ярлыка на панели задач.

Объявите фавикон с помощью:

Однако рекомендуется размещать

favicon.ico в корневом каталоге веб-сайта и вообще не объявлять его, а позволить современным браузерам выбирать иконки PNG.

Значки PNG

Современные настольные браузеры (IE11, последние версии Chrome, Firefox. ..) предпочитают использовать значки PNG. Обычные ожидаемые размеры — 16×16, 32×32 и «как можно больше». Например, MacOS/Safari использует значок 196×196, если он самый большой из возможных.

Каковы рекомендуемые размеры? Выберите свои любимые платформы:

• Большинство настольных браузеров: 16×16, 32×32, «как можно больше»
• Android Chrome: 192×192
• Google TV: 96×96
• … и другие более-менее задокументированные.

Значки PNG объявлены с помощью:

 
 
...
 

Осторожно: Firefox не поддерживает атрибут размеров и использует последний найденный значок PNG. Убедитесь, что картинка 32×32 объявлена ​​последней: она достаточно хороша для Firefox, и это предотвратит загрузку большой картинки, которая ему не нужна. edit: исправлено в 2016 году.

Также обратите внимание, что Chrome не поддерживает атрибут размеров и имеет тенденцию загружать все заявленные значки. Лучше не объявлять слишком много иконок. edit: исправлено в 2018 году.

Мобильные платформы

Этот вопрос касается фавиконки на рабочем столе, поэтому нет необходимости слишком углубляться в эту тему.

Apple определяет сенсорный значок для платформы iOS. iOS не поддерживает неквадратные значки. Он просто масштабирует неквадратные изображения, чтобы сделать их квадратными (посмотрите на пример Kioskea).

Android Chrome использует значок Apple Touch, а также определяет значок PNG размером 192×192.

Microsoft определяет изображение плитки и файл browserconfig.xml .

Заключение

Создать фавиконку, которая будет работать везде, довольно сложно. Я советую вам использовать этот генератор favicon. Полное раскрытие: я автор этого сайта.

15

Я не вижу здесь актуальной информации, так что вот:

Чтобы ответить на этот вопрос сейчас, 2 фавикона не подойдут, если вы хотите, чтобы ваша иконка везде выглядела великолепно. См. размеры ниже:

16 x 16 — стандартный размер для браузеров
24 x 24 — размер закрепленного сайта IE9 для пользовательского интерфейса
32 x 32 — вкладка новой страницы IE, кнопка панели задач Windows 7+, боковая панель списка чтения Safari

48 x 48 — сайт Windows
57 x 57 — iPod touch, iPhone до 3G
60 x 60 — iPhone touch до iOS7
64 x 64 — сайт Windows, боковая панель Safari Reader List в HiDPI/Retina
70 x 70 — плитка Win 8.1 Metro
72 x 72 — iPad touch до iOS6
76 x 76 — iOS7
96 x 96 — GoogleTV
114 x 114 — iPhone retina touch до iOS6
120 x 120 — iPhone retina touch iOS7
128 x 128 — приложение Chrome Web Store, Android
144 x 144 — плитка Metro IE10 для закрепленного сайта, iPad retina до iOS6
150 x 150 — плитка Win 8.1 Metro
152 x 152 — iPad retina touch iOS7
196 x 196 — Android Chrome
310 x 150 — плитка Metro Win 8.1 шириной
310 x 310 — плитка Metro Win 8.1

4

Стандарты 2021 благодаря faviconit

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

---

Мы могли бы просто вручную загрузить фавикон на наш веб-сайт размером 16×16, и он, вероятно, будет отображаться практически в любом браузере.

Но когда вы отметите его как один из любимых на своем смартфоне или планшете, нам потребуются изображения большего размера (от 60×60 до 144×144).

Допустим, один из наших пользователей создает ярлык на рабочем столе. В таком случае 196×196 выглядит лучше!

---

Пример кода того, что выдаст вам faviconit рядом со всеми преобразованными изображениями:

 

<ссылка rel="icon" href="/favicon.ico">
<ссылка rel="icon" type="image/png" href="/favicon-192.png">
<ссылка rel="icon" type="image/png" href="/favicon-160.png">
<ссылка rel="icon" type="image/png" href="/favicon-96. png">
<ссылка rel="icon" type="image/png" href="/favicon-64.png">
<ссылка rel="icon" type="image/png" href="/favicon-32.png">
<ссылка rel="icon" type="image/png" href="/favicon-16.png">









 

---

Начиная с Windows 8

Но это еще не все. Начиная с Windows 8 мы можем создавать ярлыки для веб-сайтов с плитками!

 


 xml">
 

---

Browserconfig.xml

Загрузите файл с именем browserconfig.xml (чтобы включить плитки в окнах >8)

 <конфигурация браузера>
    
        <плитка>
            
            
            
            #FFFFFF
        
    

 

0

16×16 пикселей, формат *.ico.

6

Я не уверен, как браузеры масштабируют большие значки, но W3C предлагает следующее ¹ :

Формат выбранного вами изображения должен быть 16×16 пикселей или 32×32 пикселей с использованием 8-битных или 24-битных цветов. Формат изображения должен быть PNG (стандарт W3C), GIF или ICO.

---

¹ w3c. org: Как добавить значок сайта на свой сайт (черновик в разработке).

5

На самом деле, чтобы ваш фавикон работал корректно во всех браузерах, вам нужно будет добавить более 10 файлов в правильных размерах и форматах.

Мы с другом создали специально для этого приложение! вы можете найти его на faviconit.com

Мы сделали это, чтобы людям не приходилось создавать все эти изображения и правильные теги вручную, создавать все это раньше меня сильно раздражало!

0

Использовать одно(!) изображение SVG

Если вам не нужна поддержка Safari, вы можете использовать один значок SVG:

Используйте одно(!) PNG-изображение

Если вам нужна полная поддержка*, добавьте это в заголовок документа:

  png">


 

Последняя ссылка для Apple (главный экран), вторая для Android (главный экран) и первая для остальных.

Размер точно соответствует размеру домашнего экрана Android. Размер значка на главном экране Apple составляет 60 пикселей (3x), то есть 180 пикселей, и он будет уменьшен. Другие платформы используют значок ярлыка по умолчанию, который также будет уменьшен.

* Обратите внимание, что это решение не поддерживает «плитки» в Windows 8/10. Однако он поддерживает изображения в ярлыках, закладках и вкладках браузера.

4

Википедия говорит:

Кроме того, такие файлы значков можно размером 16×16 или 32×32 пикселя, и либо 8-битный, либо 24-битный цвет глубина (обратите внимание, что файлы GIF имеют ограничено, 256 элементов цветовой палитры).

Я думаю, что лучше всего использовать gif 32×32 и протестировать его в разных браузерах.

1

Используйте значок SVG :

• Поддерживается основными браузерами (кроме Safari в 2021 г.) и Living Standard
• Только 1 короткая строка кода и легко запомнить
• Другие атрибуты, такие как тип и размеры не нужны
• Масштабируется намного лучше при любом размере по сравнению с PNG
• Давайте покончим с безумием фавиконок с сотнями разных размеров…

1

Вы можете иметь несколько размеров значков в одном и том же файле. Я регулярно создаю значки (файл .ico ) размером 48, 32 и 16 пикселей. Вы можете добавить изображение любого размера. Вопрос в том, будет ли iPhone использовать файл ico ?

ico также поддерживает прозрачность, но я не уверен, что это альфа-канал, такой как PNG; вероятно, больше похоже на GIF, где он включен или выключен.

3

Согласно статье Википедии о Favicon, Internet Explorer поддерживает только формат ICO для favicon.

Я бы придерживался двух разных иконок.

Как я понял, ни одно из этих нескольких решений не является совершенным. Использование генератора фавиконок действительно хорошее решение, но их количество огромно и выбрать сложно. Я хотел бы добавить, что если вы хотите, чтобы ваш веб-сайт был включен PWA, вам также необходимо предоставить значок 512×512, как указано разработчиками Google:

иконки, включая версию 192px и 512px

Я не встречал много генераторов favicon, обеспечивающих соблюдение этих критериев (firebase делает, но есть много вещей, которые он не делает). Таким образом, решение должно быть смесью многих других решений.

Не знаю, на сегодня в начале 2020 если предоставление 16х16, 32х32 еще актуально. Я предполагаю, что это все еще имеет значение в определенном контексте, например, если ваши пользователи по какой-то причине все еще используют IE (это все еще происходит в некоторых частных компаниях, которые по некоторым причинам не переходят на более новый браузер)

Нет, вы не можете использовать нестандартный размер или размер, так как это нанесет ущерб браузерам людей, где бы ни отображались значки. Вы можете сделать его 12×16 (с четырьмя пикселями белого/прозрачного отступа на 12-пиксельной стороне), чтобы сохранить соотношение сторон, но вы не можете увеличить его (ну, вы можете, но браузер уменьшит его).

0

Боюсь, вам понадобятся отдельные файлы для каждого разрешения. На мониторе кампании есть действительно хорошая статья, описывающая, как они создавали и реализовывали свои иконки для каждого устройства iOS:

http://www.campaignmonitor.com/blog/post/3234/designing-campaign-monitor-ios-icons/

2

Формат фавикона должен быть квадратным, иначе браузер его растянет. К сожалению, Internet Explorer < 11 не поддерживает типы файлов .gif или .png, а только формат Microsoft .ico. Вы можете использовать какое-нибудь приложение «генератор значков», например: http://favicon-generator.org/

favicon.ico 16×16

  ico"/>
 

И я использую эти, чтобы быть красивыми на мобильных устройствах и планшетах:

Важно использовать имя «favicon.ico» в корне, потому что многие браузеры сначала попытаются найти там.

Кажется, ваш файл должен быть .ico тип.

Проверьте этот пост о фавиконках:

http://www.html-kit.com/support/favicon/image-size/

1

формат выбранного вами изображения должен быть 16×16 пикселей или 32×32 пикселя с использованием 8-битных или 24-битных цветов. Формат изображение должно быть в формате PNG (стандарт W3C), GIF или ICO. — Как добавить Favicon на свой сайт — QA @ W3C

Фавикон не обязательно должен быть размером 16×16 или 32×32. Вы можете создать значок размером 80×80 или 100×100, просто убедитесь, что оба значения имеют одинаковый размер, и, очевидно, не делайте его слишком большим или слишком маленьким, выберите разумный размер.

1

Напомню всем, что вопрос был:

Я хочу использовать одно изображение как в качестве обычного фавикона, так и в качестве фавикона для iPhone/iPad? Это возможно? Будет ли масштабироваться формат PNG 72×72 для iPad, если на него ссылаться как на обычную иконку браузера? Или мне нужно использовать отдельное изображение 16×16 или 32×32?

Ответ: ДА, это возможно! ДА, он будет масштабироваться. НЕТ, вам не нужен «обычный значок браузера». Пожалуйста, посмотрите на этот ответ: https://stackoverflow.com/a/48646940/2397550

Как создать значок для Visual Studio с помощью только MSPaint и Visual Studio

спросил 6 лет, 2 месяца назад

Изменено 4 месяца назад

Просмотрено 38 тысяч раз

Я читал много сообщений о создании значков и последующем назначении одного из этих значков в проекте Visual Studio —> Свойства —> Значок и манифест. Когда я это делаю, я получаю сообщение о том, что значок недействителен. Основным способом, которым я это делаю, является использование MSPaint.

Это когда я сохраняю 24-битную иконку в MSPaint, о которой упоминается в одном из прочитанных мной постов. Я не могу найти возможности редактирования в редакторе изображений Visual Studio 2012. Итак, как создать простой значок для приложения?

Я знаю, что есть бесплатные конвертеры. Я специально спрашиваю, есть ли способ конвертировать с помощью существующих инструментов, таких как Visual Studio, MSPaint и т. д.

• визуальная студия
• визуальная студия-2012
• визуальная студия-2017
• иконки
• редактор изображений

7

Создание значка в MSPaint работает нормально. Вот как вы должны действовать, чтобы заставить его работать.

В Visual Studio

• Откройте Resources.resx из обозревателя решений (он находится в папке «Свойства»)

• Выберите Иконки из выпадающего меню слева [Ctrl+3]

• Выберите Добавить новый значок из раскрывающегося меню Добавить ресурс

• Введите имя файла ресурсов значка

• Щелкните правой кнопкой мыши все значки на левой панели — по одному — и выберите Удалить тип изображения (Последнюю иконку удалить нельзя — оставьте пока)

В MSPaint или в любой другой программе для работы с изображениями (я предпочитаю Microsoft Paint 3D)

• Создайте/Откройте изображение, которое хотите использовать (это может быть скриншот вашей программы)

• Изменить размер изображения до 256×256 пикселей

• Выберите полное изображение [Ctrl+A], а затем скопируйте изображение [Ctrl+C]

В Visual Studio

• Щелкните правой кнопкой мыши на левой панели (панель значков) и выберите Новый тип изображения. .. [Ins]

• Выберите тип целевого изображения 256x256, 24 бита

• (Выберите новый тип цели и) Вставьте [Ctrl+V] изображение, скопированное из программы обработки изображений

В программе обработки изображений и в Visual Studio

• Повторите описанные выше процессы копирования изображения (программа обработки изображений) и целевой вставки (Visual Studio) для 24-битных значков размером 128×128, 64×64, 32×32 и 16×16 (и/или любите поддерживать)

• Не забудьте удалить последний значок, который вы не могли удалить до

В Visual Studio

• Сохраните файл значка (.ico) (закрыв его вкладку или нажав [Ctrl+S])

• Добавьте значок в свои формы

• Щелкните правой кнопкой мыши файл проекта в обозревателе решений и выберите Свойства
  (вы также найдете его в меню Visual Studio Отладка -> Свойства «Имя вашего проекта».