Просмотр ico. Как сохранить изображение в формате ico быстро и просто? Для чего нужен файловый формат.ICO
Наиболее часто встречаемой проблемой, из-за которой пользователи не могут открыть этот файл, является неверно назначенная программа. Чтобы исправить это в ОС Windows вам необходимо нажать правой кнопкой на файле, в контекстном меню навести мышь на пункт «Открыть с помощью», а выпадающем меню выбрать пункт «Выбрать программу…». В результате вы увидите список установленных программ на вашем компьютере, и сможете выбрать подходящую. Рекомендуем также поставить галочку напротив пункта «Использовать это приложение для всех файлов ICO».
Другая проблема, с которой наши пользователи также встречаются довольно часто — файл ICO поврежден. Такая ситуация может возникнуть в массе случаев. Например: файл был скачан не польностью в результате ошибки сервера, файл был поврежден изначально и пр. Для устранения данной проблемы воспользуйтесь одной из рекомендаций:
- Попробуйте найти нужный файл в другом источнике в сети интернет.
- Попросите прислать вам исходный файл еще раз, возможно он был поврежден при передаче;
Файлы ICO содержат одно или несколько изображений с несколькими размерами и глубиной цвета, что позволяет масштабировать их соответствующим образом. В Windows все исполняемые файлы, которые располагаются на рабочем столе, в меню «Пуск» или в проводнике «Виндовс», должны иметь значок в формате ICO. Что такое представляет собой этот файл?
Например, это значок компьютера, который можно увидеть на рабочем столе в качестве пункта «Мой компьютер», а также изображение палитры, обозначающее программу Paint. Файлы ICO тесно связаны с файлами CUR. Чем они отличаются друг от друга?
Формат файла CUR — это почти идентичный графический формат для неанимированных курсоров в Microsoft Windows. Единственными отличиями между этими двумя разновидностями файлов являются байты, используемые для их идентификации, а также добавление точки доступа в заголовок CUR.
Точка доступа определяется как смещение пикселя (в координатах x, y) из верхнего левого угла изображения курсора, где пользователь фактически указывает на мышь.
История формата: что такое ICO
Появились эти файлы еще в самых первых дистрибутивах «Виндовс». Со временем они заметно изменились.
Значки, введенные в Windows 1.0, имели размер 32×32 пикселя и были монохромными. Поддержка 16 цветов была представлена в «Виндовс 3.0».
Win32 представила поддержку до 16,7 миллионов цветов (Truecolor) и 256×256 пикселей в размерах. Windows 95 также имела новый движок Device Independent Bitmap (DIB). Тем не менее, для значков в этой версии ОС использовались только 256 цветов. Можно было включить цвета 65535 (Highcolor), изменив значение значка командной строки Shell в реестре либо купив дополнение Microsoft Plus! для Windows 95.
Настройка Shell позволяла использовать более крупные значки вместо 32×32 в файле ICO. Что такое это означало? Один файл мог хранить в себе изображение любого размера от 1×1 до 256×256 пикселей (включая неквадратные размеры) с 2 (редко используемыми), 16, 256, 65535 или 16,7 миллионами цветов.
Однако, на практике «оболочка» все равно не могла отображать значки большого цветового диапазона. Область уведомлений панели задач «Виндовс» была ограничена 16 оттенками по умолчанию до выхода Windows Me. Это означало, что независимо от настроек, иконки отображались на экране однотипно.
Последующее развитие
Windows XP добавила поддержку 32-битного цвета (16,7 миллиона цветов плюс прозрачность альфа-канала), что позволило отображать в иконке такие полупрозрачные области, как тени, сглаживание и стеклянные эффекты. Этот дистрибутив ОС по умолчанию использовал значки 48×48 пикселей в «Проводнике» «Виндовс». Windows XP могла быть настроена таким образом, что все иконки начинали отображаться в размере 256×256 (с помощью изменения значений размера в Shell), но выборочное их редактирование было недоступно. Техподдержка Microsoft рекомендовала устанавливать размеры значков до 48×48 пикселей для версии XP.
В версии «Виста»
Windows Vista добавила возможность отображения иконок 256×256 пикселей в «Проводнике», а также поддержку сжатого формата PNG.
Несмотря на то, что с технической точки зрения сжатие не требуется, поддержка Microsoft рекомендовала, чтобы все значки 256×256 в ICO-файлах сохранялись в формате PNG. Это позволяло уменьшить общий размер файла.
«Проводник» Windows Vista поддерживал плавное масштабирование иконок до нестандартных размеров, которые отображались «на лету», даже если в самом файле отсутствовало изображение. В этом дистрибутиве ОС был добавлен слайдер для «масштабирования» размеров значков в целом. При использовании режима с более высоким разрешением и DPI рекомендовалось использовать более крупные форматы иконок (например, 256×256).
Структура ресурса Icon
Формат хранения файлов значков в Microsoft Windows следующий. ICO или CUR состоит из структуры ICONDIR («Каталог значков»), содержащей набор данных ICONDIRENTRY для каждого изображения в файле, за которым следует непрерывный блок всех растровых картинок (которые могут быть в формате Windows BMP, исключая структуру BITMAPFILEHEADER, или в формате PNG, хранящуюся полностью).
Изображения с глубиной менее 32 бит соответствуют конкретному формату: картинка кодируется как одна, состоящая из цветной маски (XOR) вместе с маской непрозрачности. При этом первая должна предшествовать второй внутри данных растрового изображения. Если картинка хранится в порядке снизу вверх, маска XOR будет рисоваться ниже непрозрачной.
Размер последней составляет 1 бит на пиксель, независимо от глубины цвета, указанной в заголовке BMP. Маска непрозрачности указывает, какие пиксели полностью прозрачны, а какие нет. XOR соответствует глубине бита, обозначенной в заголовке BMP, и указывает числовое значение цвета или палитры для каждого пикселя. Вместе обе маски создают непрозрачное изображение, представляющее собой картинку с 1-битной прозрачностью; они также допускают инверсию фона. Высота изображения в структуре ICONDIRENTRY файлов ICO и CUR принимает значение предполагаемых его размеров (после компоновки масок), тогда как определение высоты в заголовке BMP определяется до их компоновки.
По этой причине маски должны иметь одинаковые размеры, а высота, указанная в заголовке BMP, должна быть в два раза выше, чем в структуре ICONDIRENTRY.
Обновленная структура
Что такое ICO-32? Этот формат представляет собой 24-битное изображение с добавлением 8-битного канала для альфа-компоновки. Таким образом, в 32-битных изображениях маски не требуются, но все равно их использование рекомендуется для лучшего рассмотрения картинки.
Windows версии XP и выше начали использовать 32-битное изображение в режиме True color, построив маску AND на основе альфа-канала в случаях, когда 24-разрядная версия не представлена в файле ICO/CUR. Однако более ранние версии Windows интерпретируют все пиксели со 100% непрозрачностью, если только соответствующая маска не снабжена изображением.
Данные ссылочных изображений
Все данные изображения, которые ссылаются на записи в каталоге, поступают непосредственно из него. Обычная практика заключается в том, чтобы хранить их в том же порядке, что и в каталоге изображений.
Так, если изображение хранится в формате BMP, оно должно исключать открытую структуру BITMAPFILEHEADER, тогда как если оно хранится в формате PNG, она должна храниться целиком.
Количество битов
Классический формат растрового изображения BITMAPINFOHEADER поддерживает его сохранение с 32 битами на пиксель. При записи в качестве автономного файла BMP его разделение не используется. Однако когда эти же данные хранятся внутри файла ICO или CUR, Windows XP (первая версия «Виндовс» для поддержки формата файлов ICO/CUR с более чем 1 бит прозрачности) и выше интерпретирует этот байт как альфа-значение.
Хотя в технической документации Microsoft указано, что это значение должно быть нулевым, кодировщик значков, встроенный в.NET (System.Drawing.Icon.Save), устанавливает его как 255. Похоже, что операционная система на практике полностью игнорирует это значение.
Настройка цветных плоскостей на 0 или 1 обрабатывается эквивалентно операционной системой, но если они установлены выше 1, это значение должно быть умножено на биты на пиксель, чтобы определить окончательную глубину цвета изображения.
Неизвестно, устойчивы ли разные версии операционной системы Windows к различным значениям цветовой плоскости.
Биты на пиксель могут быть установлены на ноль, но также могут быть выведены из других данных. В частности, если битмап не сжат PNG, тогда они могут быть рассчитаны на основе длины данных растрового изображения относительно его размера. Если битмап сжат PNG, биты на пиксель хранятся в данных этого файла.
Неизвестно, содержат ли различные версии операционной системы Windows формулу для определения глубины битов для всех возможностей, если это значение установлено на ноль.
PNG-формат
В Windows Vista появилась возможность читать изображения PNG из формата ICO и CUR. PNG может быть сохранено так же, как и стандартная иконка BMP в формате Windows Icon, за исключением того, что изображение оно должно храниться целиком вместе с его заголовком файла.
Icon library
Библиотека значков — это способ установки иконок Windows. Обычно это исполняемый 16-или 32-разрядный двоичный файл, имеющий расширение.
ICL. Он имеет файлы значков, используемые как иконки. Windows Vista и более поздние версии не поддерживают просмотр иконок ниже 16-разрядных.
Это основная информация относительно формата файлов ICO (что это такое простыми словами). Попросту говоря, это иконка любого приложения или каталога в компьютере. Она представляет собой часть графического интерфейса и может обозначать любой файл, окно, каталог, драйвер устройства, элемент ОС и так далее. При нажатии на такую иконку происходит какое-либо ожидаемое действие.
Отдельно стоит отметить значки, содержащие только ссылки на приложения или данные, известные как ярлыки. Они тоже в настоящее время обозначаются файлами формата ICO. Чем же еще примечательна эта разновидность файлов?
Выше были указаны технические характеристики такой иконки в формате ICO, но какие картинки могут быть использованы в этих файлах? Определенные изображения являются встроенными в операционную систему и предлагаются по умолчанию. Однако ввиду их однотипности возникла тенденция по созданию различных значков или даже их групп, чем занимаются независимые художники.
| ICO, Windows icon | |
|---|---|
| Расширение | .ico |
| MIME -тип | image/vnd.microsoft.icon |
| Разработчик | Майкрософт |
| Тип формата | растровая графика |
Формат ICO аналогичен формату CUR (Windows cursors), предназначенному для хранения курсоров. Отличие состоит в численном значении одного поля в заголовочной структуре и интерпретации значений двух других полей этой же структуры.
Один ICO -файл содержит один значок. Размер значка может быть любым, но наиболее употребимы квадратные значки со стороной 16, 32 и 48 пикселей. Также используются значки с размером 24, 40, 60, 72, 92, 108, 128 пикселей.
Начиная с Windows 98/2000, формат поддерживает внедрение изображений в формате JPEG и PNG , но обычно данные значков хранятся в несжатом виде.
[ ]
Значки бывают в естественном цвете (True Color , глубина цвета 24 бит), High Color (глубина цвета 16 бит), или с фиксированной палитрой (из двухсот пятидесяти шести, шестнадцати, или всего из двух цветов). В этом случае число, соответствующее каждому пикселю указывает не на цвет, а на номер цвета в палитре.
По своей структуре изображения в файле ICO наиболее близки к BMP , но принципиально отличаются от них наличием дополнительного изображения — маски , накладываемой на задний план при помощи операции побитового «И» , что позволяет реализовать (полную) прозрачность рисунка. Последующее наложение основного изображения с помощью «исключающего ИЛИ» может даже дать «инверсные» пиксели в тех местах, где задний план не был замаскирован.
Кроме того, начиная с Windows XP поддерживаются 32-битные значки — каждому пикселу соответствует 24-бита цвета и 8-битный альфа-канал , позволяющий реализовать 256 уровней частичной прозрачности . С помощью альфа-канала можно отображать значки со сглаженными (размытыми) краями и тенью, сочетающимися с любым фоном; маска в этом случае игнорируется.
Формат файла
Файл состоит из заголовка фиксированной длины, каталога информации о изображениях и непосредственно изображений.
Заголовок
Заголовок имеет размер 6 байт:
Каталог информации об изображениях
Представляет собой последовательные записи фиксированного размера (16 байт), следующие одна за другой. Количество записей определяется полем count заголовка.
| Поле | Смещение | Размер (в байтах) | Описание |
|---|---|---|---|
| width | 0 | 1 | Указывает ширину изображения в точках. Может принимать значения от 0 до 255 . Если указано 0, то изображение имеет ширину 256 точек. |
| height | 1 | 1 | Указывает высоту изображения в точках. Может принимать значения от 0 до 255 . Если указано 0, то изображение имеет высоту 256 точек. |
| colors | 2 | 1 | Указывает количество цветов в палитре изображения. |
| reserved | 3 | 1 | Зарезервировано. Должно быть 0. В технической документации Microsoft указано, что это значение всегда должно быть 0, однако значки, которые создаются встроенными средствами.NET (System.Drawing.Icon.Save) содержат в этом поле значение 255. |
| planes | 4 | 2 |
|
| bpp | 6 | 2 |
|
У вас есть проблема с открытием.ICO-файлов? Мы собираем информацию о файловых форматах и можем рассказать для чего нужны файлы ICO.
Дополнительно мы рекомендуем программы, которые больше всего подходят для открытия или конвертирования таких файлов.
Для чего нужен файловый формат.ICO?
Расширение .ico обозначает формат и тип файлов «Значок Microsoft» (Microsoft Icon, ICO). ICO является проприетарным файловым форматом, разработанным Microsoft для значков («иконок») графического интерфейса Microsoft (MS) Windows. Формат ICO очень похож на формат указателей-курсоров CUR.
Файл .ico представляет собой значок MS Windows. Значок — это небольшое пиктографическое изображение, относящееся к определенному типу файлов, системному действию, приложению и проч. В файле ICO обычно содержатся несколько растровых изображений различных размеров (16×16, 32×32, 48×48 и т.д.) и глубины цвета (начиная с Windows XP — до 32 бит с поддержкой прозрачности с альфа-каналом), и такой файл (.ico ) служит набором различных вариантов одного и того же значка для разных режимов отображения.
Формат ICO поддерживается всеми веб-браузерами в качестве стандартного формата значков веб-сайтов («favicon.
Для формата ICO существует множество автономных и онлайн-конвертеров, специальных редакторов «иконок», а также других средств. Кроме этого, этот формат поддерживается большинством универсальных просмотрщиков изображений и растровых редакторов (в т.ч., посредством плагинов). Проводник MS Windows автоматически создает и показывает миниатюры для файлов .ico .
Программы для открытия или конвертации ICO файлов
Вы можете открыть файлы ICO с помощью следующих программ: Мы надеемся, что помогли Вам решить проблему с файлом ICO. Если Вы не знаете, где можно скачать приложение из нашего списка, нажмите на ссылку (это название программы) — Вы найдете более подробную информацию относительно места, откуда загрузить безопасную установочную версию необходимого приложения.
Что еще может вызвать проблемы?Поводов того, что Вы не можете открыть файл ICO может быть больше (не только отсутствие соответствующего приложения).
Во-первых — файл ICO может быть неправильно связан (несовместим) с установленным приложением для его обслуживания. В таком случае Вам необходимо самостоятельно изменить эту связь. С этой целью нажмите правую кнопку мышки на файле ICO, который Вы хотите редактировать, нажмите опцию «Открыть с помощью» а затем выберите из списка программу, которую Вы установили. После такого действия, проблемы с открытием файла ICO должны полностью исчезнуть.
Во вторых — файл, который Вы хотите открыть может быть просто поврежден. В таком случае лучше всего будет найти новую его версию, или скачать его повторно с того же источника (возможно по какому-то поводу в предыдущей сессии скачивание файла ICO не закончилось и он не может быть правильно открыт).
Вы хотите помочь?
Если у Вас есть дополнительная информация о расширение файла ICO мы будем признательны, если Вы поделитесь ею с пользователями нашего сайта. Воспользуйтесь формуляром, находящимся и отправьте нам свою информацию о файле ICO.
ICO (формат файлов) — это… Что такое ICO (формат файлов)?
ICO (Windows icon) — формат хранения значков файлов в Microsoft Windows.
Формат ICO аналогичен формату CUR (Windows cursors), предназначенному для хранения курсоров. Отличие состоит в численном значении одного поля в заголовочной структуре, и интерпретации значений двух других полей этой же структуры.
Один ICO-файл содержит один или несколько значков, размер и цветность каждого из которых задаётся отдельно. Размер значка может быть любым, но наиболее употребимы квадратные значки со стороной 16, 32 и 48 пикселов. Также используются значки с размером 24, 40, 60, 72, 92, 108, 128 пикселов.
Начиная с Windows 98/2000, формат поддерживает внедрение изображений в формате JPEG и PNG, но обычно данные значков хранятся в несжатом виде.[источник не указан 1100 дней]
Значки бывают в естественном цвете (True Color, глубина цвета 24 бит), High Color (глубина цвета 16 бит), или с фиксированной палитрой (из двухсот пятидесяти шести, шестнадцати, или всего из двух цветов).
В этом случае число, соответствующее каждому пикселу указывает не на цвет, а на номер цвета в палитре.
По своей структуре изображения в файле ICO наиболее близки к BMP, но принципиально отличаются от них наличием дополнительного изображения — маски, накладываемой на задний план при помощи операции побитового «И», что позволяет реализовать (полную) прозрачность рисунка. Последующее наложение основного изображения с помощью «исключающего ИЛИ» может даже дать «инверсные» пиксели в тех местах, где задний план не был замаскирован.
Кроме того, начиная с Windows XP поддерживаются 32-битные значки — каждому пикселу соответствует 24-бита цвета и 8-битный альфа-канал, позволяющий реализовать 256 уровней частичной прозрачности. С помощью альфа-канала можно отображать значки со сглаженными (размытыми) краями и тенью, сочетающимися с любым фоном; маска в этом случае игнорируется.
Формат файла
Файл состоит из заголовка фиксированной длины, каталога информации о изображениях и непосредственно изображений.
Заголовок
Заголовок имеет размер 6 байт:
| Поле | Смещение | Размер (в байтах) | Описание |
|---|---|---|---|
| reserved | 0 | 2 | Зарезервировано. Всегда 0. |
type | 2 | 2 | Тип файла:
Иные значения недопустимы. |
count | 4 | 2 | Количество изображений в файле, минимум 1. |
Каталог информации об изображениях
Представляет собой последовательные записи фиксированного размера (16 байт), следующие одна за другой. Количество записей определяется полем count заголовка.
| Поле | Смещение | Размер (в байтах) | Описание |
|---|---|---|---|
| width | 0 | 1 | Указывает ширину изображения в точках. Может принимать значения от 0 до 255. Если указано 0, то изображение имеет ширину 256 точек. |
| height | 1 | 1 | Указывает высоту изображения в точках. Может принимать значения от 0 до 255. Если указано 0, то изображение имеет высоту 256 точек. |
| colors | 2 | 1 | Указывает количество цветов в палитре изображения. Для полноцветных значков должно быть 0. |
| reserved | 3 | 1 | Зарезервировано. Должно быть 0. В технической документации Microsoft указано, что это значение всегда должно быть 0, однако значки, которые создаются встроенными средствами .NET (System.Drawing.Icon.Save) содержат в этом поле значение 255. |
| planes | 4 | 2 |
|
| bpp | 6 | 2 |
|
| size | 8 | 4 | Указывает размер растра в байтах |
| offset | 12 | 4 | Указывает абсолютное смещение растра в файле. |
Примечания
См. также
Ссылки
ICO Telegram собрало заявок на $3,8 млрд
«Дайте нам знать, если получите предложения о покупке Grams», – написал в воскресенье вечером в Twitter основатель Telegram Павел Дуров.
Речь идет о криптовалюте, которую собирается выпускать Telegram в ходе ICO (initial coin offering – первичного размещения криптовалюты). Сбор заявок предварительного этапа ICO завершен, сообщили «Ведомостям» сотрудник венчурного фонда, знакомый с участниками этого ICO, и участник синдиката инвесторов, который собирается вложиться в Telegram.
Спрос ажиотажный, признают они. На предварительном этапе Telegram собирает $850 млн, а заявок подано на вчетверо большую сумму, оценивает участник синдиката инвесторов. Она близка к $3,8 млрд, знают сотрудник венчурного фонда и собеседник «Ведомостей», который безуспешно пытался инвестировать в Telegram, а теперь ведет переговоры с несколькими фондами о выкупе их доли. Его уверяют, что заявка фондов на участие в ICO подтверждена. «Вторичная» доля может обойтись на 30–40% дороже той суммы, которую продавцы заплатили сами, рассказывает собеседник «Ведомостей». Утвержденные аллокации (право на покупку определенного количества токенов. – «Ведомости») уже начали продавать, неоднократно слышал сотрудник крупного венчурного фонда: его собеседникам предлагали купить токены с премией в 20–30%.
«Ведомостям» не удалось установить, идет речь об одном продавце или о нескольких.
О намерении ранних инвесторов перепродавать купленную криптовалюту знает и участник синдиката инвесторов, но конкретные предложения ему не известны. Это хороший заработок: по его сведениям, ранние инвесторы покупали Gram за $0,3. В дальнейшем цена Gram будет расти от $1,45 до $3,5, знают он и собеседник «Ведомостей», знакомый с участниками ICO.
Происхождение фондов, предлагающих токены, и размер их инвестиций в Telegram не известны, возражает человек, близкий к Telegram: до Telegram доходила пара таких «предложений», они оказались мошенничеством.
Книга заявок на предварительное ICO была переподписана настолько, что руководство Telegram отказывалось от некоторых инвестиционных предложений, в том числе от денег из России, рассказывали два человека, знакомых с участниками переговоров.
В расчете, что организаторы уменьшат их доли, инвесторы подавали заявки на суммы большие, чем собирались вложить, объясняет участник синдиката инвесторов.
Многие изначальные заявки действительно были урезаны, уверяет несостоявшийся инвестор, ведущий переговоры о перевыкупе, и инвестор, которому удалось утвердить уменьшенную заявку через фонд, утвержденный как участник предварительного ICO. Все одобренные для предварительного ICO платежи должны быть проведены до 1 февраля, говорят несостоявшийся инвестор, планирующий перевыкуп, и человек, знакомый с участниками переговоров с Telegram.
Деньги нужны Telegram на развитие новой блокчейн-платформы Telegram Open Network (TON). В новой экономике она может конкурировать с Visa и Mastercard.
Старший инвестиционный менеджер Runa Capital Константин Виноградов перепродажу токенов Telegram считает логичной: они будут дорожать, инвесторам выгоднее заплатить комиссию участникам предварительного этапа. Но это может противоречить правилам ICO и вряд ли команда Telegram будет этому рада, думает он.
В ICO Telegram участвуют не инвесторы криптотехнологий, а традиционные, что отличает его от прочих ICO, полагает основатель блокчейн-платформы Mytime (продажа данных) Эдуард Гуринович.
Криптоинвесторы обычно рассчитывают на 10-кратный годовой возврат инвестиций, инвесторов Telegram устроит и 100% – доходность, невозможная в реальном секторе, указывает Гуринович.
Павел Дуров не ответил на вопросы «Ведомостей».
Иконка для своего приложения Windows. Стандартные размеры иконок
И как сделать ICO файл с несколькими изображениями
Спрашивали, как надо правильно делать иконку для своего Windows-приложения.
В первую очередь нужно ее нарисовать, либо найти изображение. Чем больше, тем лучше, поскольку для хорошей иконки потребуется несколько файлов разного размера.
Если изображение будет одно и маленькое, то иконка будет выглядеть некрасиво, пойдет квадратными пикселями.
То же самое касается и иконки для формы приложения, хотя на самой форме корректно будет отображаться и маленькая иконка 16×16 пикселей, при переключении по Alt+Tab уже будет заметно и некрасиво.
Рисовать, то лучше в каком-нибудь векторном редакторе, чтоб было потом проще создать несколько растровых изображений разных размеров.
Мы, например, пользуемся Inkscape, он простой, бесплатный и для простых изображений вполне подойдет.
Еще момент — изображение должно, очевидно, быть квадратным.
Стандартные размеры иконок приложенияНарисовали, теперь нужно получить несколько изображений стандартных размеров:
— 16×16
— 32×32
— 48×48
— 256×256
Где-то читал рекомендацию, что нужен значок еще 128×128, но на практике пока не заметил, чтобы его наличие было критично.
Для Windows 7 и выше обязательно нужен значок 48×48
Обратите внимание, что размер значка рабочего стола по умолчанию в XP был 32×32, а в Windows 7 — 48×48
В значки для формы, а не для иконки экзешника, лучше не включать значок 256×256 в том случае, если приложение должно работать на XP.
В остальных случаях XP игнорирует значок 256×256, но ничего плохого при этом не происходит, а вот если такой значок используется для формы, то приложение может упасть.
Известно, что в одном файле ICO могут храниться несколько изображений разных размеров.
Для сборки есть много приложений и онлайн-сервисов, но мы пользуемся простой бесплатной программкой icon sushi Копия
Пользоваться очень просто.
1. Открываем все нужные изображения
2. Выделяем их в окне программы:
3. Сохраняем иконку (File — Save as Multiple Icon)
ЗЫ. Чтоб два раза не вставать.
Кто-то просил картинки-кнопочки от XuliOrganizzer’а
Так Леша выложил картинки на Github
Руководство по FavIcon на 2020 год для почти всех и каждого браузера
Когда-то для создания значка требовалось всего лишь создать один значок размером 16 × 16 пикселей и поместить его в корневой каталог веб-сайта. Это все еще работает сегодня, хотя и с некоторыми оговорками.
В современных устройствах дисплеи, как правило, имеют дисплеи с высокой плотностью (сетчаткой). Эти устройства и дисплеи имеют больше пикселей на квадратный дюйм. Конечный результат — более четкий текст и изображения. Как правило, графику необходимо оптимизировать для дисплеев с высоким разрешением.Классический значок 16 x 16 пикселей на этих устройствах и дисплеях выглядит пиксельным; таким образом, необходимы дополнительные шаги. Что еще больше сбивает с толку, многие новые устройства, например iOS и Android, имеют предпочтительные замены значков.
Это практическое руководство по созданию значков для (почти) каждого мыслимого браузера.
Цель состоит в том, чтобы обеспечить наилучшие результаты (без пикселов) с наименьшим объемом работы и, что наиболее важно, при этом сохранить рассудок.
Изображение: NPR.org не имеет значка дисплея Retina, поэтому он выглядит пиксельным
Конкретные интересы? Вот что мы расскажем в этой статье:
- Краткая история favicon.ico
- Полный список (в основном) всех известных любимых размеров иконок
- Почему не SVG?
- Проверка работоспособности: Утилиты Photoshop / Automator
- Чего не будут делать эти утилиты
- Загрузка шаблона Photoshop / macOS Automator / Sketch
- Как установить Favicon Photoshop Action
- Использование экшена Photoshop
- Использование автомата Action
- Использование шаблона эскиза
- Оптимизация
- Поддержка IE6 — IE10 (и проблема Safari)
- Использование IconSlate для создания значка Retina Favicon
- Онлайн-генератор HTML + XML
Краткая история Favicon.ico
Favicon был первоначально представлен Microsoft в марте 1999 года вместе с новой вкладкой «Избранное» в Internet Explorer 5. В номенклатуре Microsoft закладки в Internet Explorer называются «Избранное». Закладки на вкладке избранного имеют возможность включать значок избранного рядом с каждым URL-адресом. Если веб-сайт имеет файл favicon.ico, расположенный в корневом каталоге его домена, запись избранной закладки будет включать настраиваемый значок. Вскоре после этого, в 2000 году, Консорциум World Wide Web (W3C) принял значок для HTML 4.0 (с намеренно нечеткими характеристиками).
Еще в 2001 году веб-браузеры начали использовать значок рядом с URL-адресом и вскоре стали повсеместными в Интернете, перейдя на уже знакомые вкладки браузера. Позже и Firefox, и Safari добавили поддержку PNG для Favicons, что стало первым серьезным изменением формата Favicon. В 2008 году, после запуска первого iPhone, значок значка сделал еще один важный поворот после того, как Apple представила «apple-touch-icon.png», версию значка с более высоким разрешением, используемую для закрепления на док-станции iOS.Это создало прецедент для нескольких размеров значков и помогло закрепить PNG в качестве предпочтительного формата по сравнению с форматом файлов ICO Microsoft Windows.
W3C, признавая необходимость универсальности, в HTML5 включил стандарт для нескольких размеров значка, который получил распространение благодаря дисплеям высокой плотности, новым пользовательским интерфейсам операционной системы, изменениям в браузерах и мобильным устройствам. Сегодня у нас есть персонализированные значки для всего, от телевизоров Google до плиток Microsoft Windows Metro.
Полный список (в основном) всех известных любимых размеров иконок
Ниже приведен список известных на данный момент размеров избранных значков. Этот список основан на Шпаргалке по избранным значкам.Серый цвет — это когда-то устаревшие значки, которые все еще можно использовать, но больше не поддерживаются. Из-за возраста они были исключены из проекта значков.
| Размер | Имя | Назначение |
| 32 × 32 | favicon-32.png | Стандарт для большинства настольных браузеров |
| 128 × 128 | favicon-128.png | Значок Интернет-магазина Chrome и маленький значок на экране Windows 8 Star * |
| 152 × 152 | favicon-152.png | Значок сенсорного экрана iPad (изменение для iOS 7: вместо 144 × 144) |
| 167 × 167 | favicon-167.png | Значок сенсорного экрана iPad Retina (изменение для iOS 10: вместо 152 × 152, не работает. IOS 10 будет использовать 152 × 152) |
| 180 × 180 | favicon-180.png | iPhone Retina |
| 192 × 192 | favicon-192.png | Рекомендация манифеста веб-приложений для разработчиков Google |
| 196 × 196 | favicon-196.png | Значок главного экрана Chrome для Android |
Устаревшие значки Favicons
| Размер | Имя | Назначение |
| 57 × 57 | favicon-57.png | Стандартный домашний экран iOS (iPod Touch, iPhone от первого поколения до 3G) |
| 76 × 76 | favicon-76.png | Значок главного экрана iPad |
| 96 × 96 | favicon-96.png | Значок GoogleTV * |
| 120 × 120 | favicon-120.png | Значок сенсорного экрана Retina для iPhone (изменение для iOS 7: увеличено с 114 × 114) |
| 144 × 144 | favicon-144.png | IE10 Плитка Metro для закрепленного сайта * |
| 195 × 195 | favicon-195.png | Значок быстрого набора Opera (Не работает в Opera 15 и новее) |
| 228 × 228 | favicon-228.png | Значок Opera Coast |
На момент написания этой статьи это был полный список из 14 значков, считая изменения iOS.Теперь, когда мы приближаемся к 2020 году, мы можем с уверенностью предположить, что на стороне iOS резко упала статистика, поскольку статистика Apple колеблется только на 9% устройств, использующих более раннюю, чем iOS 12. При использовании показателей приложения Аудиокнига Дэвида Смита менее 2%. пользователей используют iOS 10 ниже на момент написания этой статьи.
Итак, основываясь на более разумных принципах, мы можем удалить много шума. Google TV последний раз обновлялся в 2010 году. Apple перешла на Retina в 2010 году с iPhone 4 и с Touch и iPad в 2012 году. Opera Speed Dial исчезла в 2013 году, Opera Coast была удалена из магазина приложений Android в 2017 году.Итак, с пересмотренным списком у нас осталось семь основных значков (если у вас нет проекта с очень конкретными устаревшими требованиями). Microsoft потребовала метатеги msapplication-TileColor и msapplication-TileImage, чтобы IE10 в Windows 8 мог распознавать значки Favicons, которые также можно удалить из исходного списка.
Наконец, в манифесте веб-приложений Google отмечается, что Chrome принимает значки с шагом 48 пикселей и по умолчанию 192 или 512. Ради здравого смысла мы будем придерживаться только 192.
- 7 значков
- ссылок в теге вашего сайта для каждого размера
- Специальный XML-файл для плиток меню «Пуск» Windows (8.1 и выше) (IE11 + и Windows 10 требует browserconfig.xml.)
Почему не SVG?
Некоторые читатели, просматривающие этот список, могут задаться вопросом о масштабируемой векторной графике (SVG) как о более разумном решении вместо создания значков во всех мыслимых разрешениях, поскольку значки — один из лучших вариантов использования векторных изображений.На момент написания этой статьи только Firefox и Safari поддерживают значки SVG (с некоторыми оговорками). Дополнительные сведения см. На CanIuse.com.
(Примечание автора: во время написания этой статьи, после проверки примерно 50 основных веб-сайтов, Instagram был единственным сайтом, на котором была опция SVG-значков на своем веб-сайте)
Проверка работоспособности: Photoshop / Действия Automator / Шаблон эскиза
Я создал три разных способа создания 14 размеров значков. Три варианта следующие:
- Photoshop Action — Если у вас есть Adobe Photoshop, это позволит вам использовать экшен Photoshop для быстрого создания 14 значков из исходного файла.Действия Photoshop позволяют Photoshop выполнять автоматические задачи, такие как изменение размера и экспорт файлов.
- Automator — macOS / OS X предоставляет утилиту создания сценариев на уровне ОС, которая позволяет автоматизировать такие задачи, как перемещение / переименование файлов или использование различных функций приложения, таких как предварительный просмотр. Я создал сценарий автомата, который будет выполнять те же функции, что и экшен Photoshop. Преимущество в том, что для этого не требуется Photoshop, но требуется Mac.
- Шаблон эскиза — Это наименее автоматизированная функция.Это пустой шаблон со всеми экспортными настройками 14 отдельных размеров. Просто вставьте значок в направляющие и нажмите «Экспорт», и все 14 размеров значков будут экспортированы как PNG.
Что вам абсолютно необходимо:
- Квадратное изображение PNG размером 228 x 228 или больше.
- Photoshop (Win / Mac) или macOS / OS X или Sketch
Приятно иметь:
- Изображение с альфа-слоем (прозрачный фон)
Поддерживаемые браузеры:
IE11, Edge, Chrome 4+, Firefox 2+, Opera 10.1+, Safari 3.1+, iOS Safari 6+, Google TV, Android Browser 2.1+, Chrome для Android, Firefox для Android, UC Browser для Android, Samsung Internet, QQ Browser, Chrome Store, закрепленные сайты для Windows 8+.
Чего не будут делать эти утилиты:
К сожалению, эта утилита не создает классический файл favicon.ico. У Photoshop по-прежнему нет возможности создать ICO-файл, как и у Automator или Sketch. См .: Поддержка IE6 — IE10 (и проблема Safari) в этом сообщении для получения более подробной информации.
Кроме того, это не «лечит» значки.Для значков 32 x 32 пикселей и 16 x 16 пикселей может потребоваться ручная корректировка в графической программе. Помните, что создавать отдельные версии значков в зависимости от разрешения более чем возможно. Эта утилита представляет собой дробовик, который позволит вам улучшить базовый минимум после того, как будут созданы все значки. Для получения наиболее красивых значков с низким разрешением я настоятельно рекомендую рассмотреть возможность ручной подкраски значка 16 x 16 пикселей и значка 32 x 32 пикселя.
Загрузка шаблона Photoshop / macOS Automator / Sketch
Вы можете либо перейти к проекту github, найденному здесь, либо щелкнуть прямую ссылку для скачивания.
Как установить Favicon Photoshop Action
- Загрузите Photoshop Action и дважды щелкните, чтобы распаковать
- В Photoshop в меню действий щелкните гамбургер-меню и выберите действия загрузки
- Найдите создателя Favicon
Использование Photoshop Action
Изображение по умолчанию должно быть квадратным и иметь размер более 228 x 228 пикселей (я рекомендую использовать исходное изображение с более высоким разрешением). Откройте изображение, которое хотите использовать для своего значка.Нажмите кнопку воспроизведения, и действие создаст 14 размеров значков в формате PNG.
Использование скрипта Automator
Перетащите файл в скрипт Automator. Изображение по умолчанию должно быть квадратным и иметь размер более 228 x 228 пикселей (я рекомендую использовать исходное изображение с более высоким разрешением). Нажмите кнопку «Играть», и Automator создаст 14 размеров значков в PNG.
Использование шаблона эскиза
Откройте файл эскиза. Вставьте графику в направляющие, нажмите «Экспорт» и выберите экспорт «favicon».
Оптимизация
Неоптимизированные PNG из Photoshop, как правило, довольно большие. Я настоятельно рекомендую пользователям macOS использовать бесплатное приложение ImageOptim для сжатия PNG без потерь, а пользователи Linux используют Trimage. Оба удобны в использовании. Перетащите все недавно созданные PNG, чтобы сэкономить ценные килобайты изображений без какого-либо снижения качества. Пользователи macOS / Linux также могут использовать PNGOUT, утилиту интерфейса командной строки для оптимизации PNG.
Для более технически подкованных пользователей macOS утилита оптимизации PNG ImageAlpha (работает в тандеме с ImageOptim) позволяет пользователям еще больше использовать проиндексированные цветовые профили для уменьшения размеров файлов.
Наконец, PNGquant изначально работает в Photoshop для Windows / OS X, а TinyPNG предоставляет бесплатный сервис, который можно использовать из вашего веб-браузера на любой платформе.
Поддержка IE6 — IE10 (и проблема Safari)
Для действительно одержимых, IE10 и ниже не поддерживают значки PNG, только ICO. В зависимости от источника, IE10 и ниже по-прежнему составляют примерно 0,2–1,4% пользователей Интернета в Северной Америке в апреле 2017 года. К счастью, месяц за месяцем эта цифра продолжает уменьшаться, но различается в зависимости от регионов земного шара и даже от страны. / языковая основа.IE10 был выпущен 4 сентября 2012 года в качестве браузера по умолчанию в Windows 8 и включен в Windows 7 SP1, но поскольку Windows 10 постепенно заменяет Windows 8, пользователи Internet Explorer все чаще переходят на замену Microsoft IE, Edge.
Если вы решите включить favicon.ico для старых пользователей IE, существует серьезное предупреждение Safari. На момент написания, если в ваш HTML включены и ICO, и PNG, настольная версия Safari будет использовать файл ICO вместо PNG. Это проблема, поскольку большинство генераторов значков создают только значки размером 16 x 16 пикселей.Дисплеи Retina будут отображать менее привлекательный значок 16 x 16 вместо красивого PNG 32 x 32. Однако, без каких-либо затрат для пользователей IE, формат файла MS .ico может поддерживать как значок размером 16 x 16 пикселей, так и значок 32 x 32 пикселя в одном файле. Пользователи IE10 и ниже будут видеть значок 16 x 16, тогда как пользователи Retina Safari могут наслаждаться значком с гораздо более высоким разрешением 32 x 32 пикселя.
Для создания значков, совместимых с сетчаткой, требуется несколько дополнительных шагов. Ниже представлена адаптированная версия книги Джона Грубера «DaringFireball.com: Создание значков Retina Calibre Favicons ». Этот метод требует покупки IconSlate (5 долларов США).
Использование IconSlate для создания значка сетчатки (метод DaringFireball)
- Откройте IconSlate и создайте новый проект. Выберите только формат .ico, щелкните стрелку рядом с ico и установите только флажки 32 и 16.
- Назовите значок «favicon» (без кавычек)
- Выделите квадрат 32 и вставьте свой значок 32 x 32 пикселя
- Выделите квадрат 16 и вставьте в него значок 32 x 32 пикселя или, если у вас есть нестандартный размер 16 x 16 пикселей, вставьте в него этот файл.
- Щелкните значок Build (если по какой-либо причине значок Build неактивен, перейдите в File -> Build
Онлайн-генератор HTML + XML
Ниже я написал быстрый онлайн-генератор кода. Он сгенерирует необходимый HTML и XML для использования ваших значков.
- Введите путь к вашим любимым значкам. (если вы решили создать favicon.ico, поместите его в корень своего домена независимо от других ваших значков).
- Выберите цвет фона для значка для плиток Windows.
- Прокрутите вниз до кода и скопируйте и вставьте его или загрузите файлы.
- Поместите XML-файл в тот же каталог, что и ваши любимые значки.
См. Pen Favicon HTML / Browser XML Generator от Грега Ганта (@fuzzywalrus) на CodePen.
Манифест веб-приложения
Манифест веб-приложения — это простой файл JSON, в котором подробно описывается, как веб-приложение должно работать, когда оно «установлено» (ссылка на него находится на панели приложений Chrome). Этот файл JSON включает объявления для значков Favicons.Для получения дополнительной информации см. Манифест веб-приложения
.Поздравляю! Готово!
Хороший способ проверить свои новые любимые значки — использовать мобильное устройство или мобильный симулятор и закрепить свой веб-сайт на док-станции / главном экране. Вы должны увидеть свой новый значок фавикона на док-станции / главном экране.
Присоединяйтесь к веселью: внесите свой вклад в проект github здесь: https://github.com/fuzzywalrus/Photoshop-FavIcon-Action
[Обновлено 28.10.2019 на 2020 год со значительно уменьшенным набором иконок для здравомыслия]
Все значки для всех устройств и размеров
Введение
Сайт не кажется законченным без значка.По какой-то причине я обычно сразу замечаю, что на сайте его нет. Это заставляет меня сомневаться в легитимности или качестве сайта из-за чего-то, что, на первый взгляд, не имеет отношения к делу.
Favicons превратились не просто в «любимую иконку» для закладок. Теперь они еще более актуальны благодаря адаптивному дизайну и мобильным устройствам. Теперь пользователь может «прикрепить» любой веб-сайт или веб-приложение к своему домашнему экрану (или рабочему столу), чтобы создать у него ощущение нативного приложения с быстрым доступом. В Windows 8 Microsoft зашла так далеко, что разрешила любому старому веб-сайту или приложению даже отправлять уведомления на значок (в данном случае «плитку»).
Мои мысли
Думаю, определенно стоит настроить значки для как можно большего количества устройств. Вы никогда не знаете, кто захочет закрепить или добавить в избранное на любом устройстве, которое у них есть. Эти дополнительные усилия могут иметь большое значение, как и многие другие вещи, находящиеся в разработке. Проблема , стандарт для фавиконов сейчас ужасный . Между всеми различными устройствами, операционными системами, браузерами и разрешениями экрана поддержка каждого является огромной проблемой, и она загрязняет заголовок вашего HTML-документа многочисленными строками тегов link .Чтобы быть идеальным каждый раз, требуется много исследований и испытаний.
Мне нравится концепция файла .ico , поддерживающего несколько размеров в одном файле, но мне действительно нужна векторная поддержка значков (например, изображения SVG). Таким образом, я мог бы сделать это один раз и знать, что поддерживаю потребности каждого, но этого, вероятно, никогда не произойдет.
Примечание. Вероятно, стоит сказать, что в некоторых случаях изображения значков должны быть индивидуализированы. Например, вам может понадобиться другое изображение в зависимости от размера.Так что, даже если бы векторное изображение было возможно, оно могло быть не идеальным.
Ниже вы найдете мой стандарт для настройки значков. В Интернете есть масса информации, и многие генераторы значков, кажется, генерируют разные размеры, которые, по их мнению, соответствуют стандартам. Перейдите к концу этой статьи, если хотите ознакомиться с этими ресурсами и ссылками, чтобы создать свои собственные.
Создание файла .ico с несколькими размерами
Если вы не знали, .Файл ico может содержать несколько изображений .png или .bmp . Это замечательно, потому что теперь вы можете поддерживать значки разных размеров с помощью одного файла и строки кода в заголовке вашего документа . Вот что мы будем создавать:
В этом единственном файле есть пять разных изображений. На самом деле довольно легко преобразовать несколько изображений в формате PNG в один файл значка.Вероятно, вы можете загрузить массу приложений, чтобы сделать это за вас, но я покажу вам, как это сделать бесплатно из командной строки.
Первое, что вам нужно сделать, это установить ImageMagick. Для пользователей Mac, которые используют диспетчер пакетов Homebrew, вы можете просто ввести это со своего терминала:
Если у вас не установлен Homebrew или он не работает, есть этот установщик. Наконец, если вы серьезно настроены или у вас все еще возникают проблемы, попробуйте следовать этим инструкциям.
Если все прошло успешно, вы должны увидеть огромный список инструкций из командной строки, когда наберете:
Теперь, чтобы преобразовать несколько файлов .png в один файл .ico , просто следуйте этому формату с терминала:
- преобразовать путь к первому файлу путь к второму файлу путь к третьему файлу [...] outputname.ico
Вот пример преобразования пяти файлов favicon .png в один файл .ico файл:
- convert favicon-16.png favicon-24.png favicon-32.png favicon-48.png favicon-64.png favicon.ico
Последнее, что я считаю важным, это убедиться, что вы поместили только что созданный файл favicon.ico в корень вашего сайта и убедитесь, что вы ссылаетесь на него с полным абсолютным URL-адресом. Это:
Не это:
А не это:
Для пользователей Windows вы можете установить ImageMagick здесь. Он должен работать аналогичным образом.
Favicons для Android, iPhone и др.
Опять же, это то, что вам следует изучить в себе, чтобы убедиться, что оно соответствует вашим потребностям и работает на вас, но, тем не менее, это хорошая отправная точка.
Вы также можете добавить это в свой документ:
Favicon для Windows 8 Tile
Это просто самый простой значок. Однако недавно они добавили поддержку еще большего количества размеров.
и все вместе
Дополнительные ресурсы и ссылки
Сообщений в блоге / предоставлено пользователями
Документация
Генераторы
Извлечение значка определенного размера из файла.ico файл
Вот кое-что, что я недавно обнаружил после долгих поисков и некоторых экспериментов. В своих надстройках я предпочитаю использовать файлы .ico для значков кнопок. У значков есть некоторые преимущества перед файлами .bmp в том, что вы можете определить прозрачный фон и сохранить несколько изображений в одном файле .ico. Это удобно, потому что для полной поддержки интерфейса Inventor у вас должно быть три размера значков, как указано ниже.
16×16 пикселей — используется для небольших значков как в классическом, так и в ленточном интерфейсах.
24×24 пикселей — используется для больших значков в интерфейсе класса.
32×32 пикселя — используется для больших значков в интерфейсе ленты.
Используя редактор значков, довольно легко создать значки различных размеров, а затем использовать этот ICO-файл в моей программе. Чего я не мог понять, так это того, как извлечь значок определенного размера из файла .ico. Мои поиски просто приводят к сообщениям от других пользователей, у которых был такой же вопрос, но нет ответов. Наконец я начал экспериментировать и нашел то, что работает.
В моем проекте надстройки я добавляю каждый из файлов .ico в качестве ресурса в свой проект. В VB.Net вы можете получить доступ к любому элементу в ваших ресурсах по имени. Имя моего значка в приведенном ниже примере — «MyCommand1». Приведенный ниже код считывает значок указанного размера из ресурса и в конечном итоге содержит ссылку на объект Icon.
Dim smallIcon As System.Drawing.Icon
smallIcon = New System.Drawing.Icon (My.Resources.MyCommand1, 16, 16)
Приведенный ниже код считывает большой файл значка из того же ресурса значка.
Уменьшить размер largeIcon как Sytem.Drawing.Icon
largeIcon = New System.Drawing.Icon (My.Resources.MyCommand1, 32, 32)
Невозможно напрямую использовать объект Icon с Inventor API, поскольку он ожидает объект IPictureDisp. В приведенном ниже коде показано, как преобразовать значок в IPictureDisp. Сначала вам нужно указать в проекте ссылки на библиотеки Microsoft.VisualBasic.Compatibility и stdole.
Dim smallPic As stdole.IPictureDisp
smallPic = Microsoft.VisualBasic.Compatibility.VB6.IconToIPicture (_
smallIcon)
Иконка | Форматы файлов Wiki
| В Википедии есть статья, связанная с: |
Формат файла ICO — это формат файла изображения, используемый для значков в Microsoft Windows. Формат файла CUR для курсоров практически идентичен, поскольку единственными отличиями являются байт идентификации и указание точки доступа в заголовке.
Файлы ICO содержат одно или несколько небольших изображений разного размера и разной глубины цвета.
Официальным зарегистрированным IANA типом Интернет-носителя для файлов ico является image / vnd.microsoft.icon . До того, как это было зарегистрировано, image / x-icon был принятым вариантом, который соответствовал правилам использования x- для незарегистрированных токенов. Однако видны многие другие, в том числе изображение / ico , изображение / значок , текст / ico и приложение / ico .Многие веб-серверы не настроены с настройкой типа Интернет-носителя для файлов .ico и могут отправлять свой тип Интернет-носителя по умолчанию, который может быть text / html или text / plain .
Размеры значков, глубина цвета и данные о прозрачности []
Первоначально квадрат 32 × 32 пикселя и использование 16 цветов, более поздние версии Microsoft Windows поддерживают значки разных размеров и глубины цвета. До Windows XP изображения значков могли быть любого размера от 1 × 1 до 255 × 255 пикселей (включая неквадратные размеры) и иметь 4-, 8-, 16- или 24-битную глубину цвета.Обычно файл значков может содержать как 16×16, так и 32×32 (для меню «Пуск» и «большие значки» папки) и 16×16 (для строк заголовков окон, подменю меню «Пуск» и небольших значков папок, списков и подробностей).
Данные изображения значка всегда состояли из двух растровых изображений: растрового изображения И и растрового изображения XOR. Растровое изображение AND составляет 1 бит на пиксель и применяется первым, чтобы решить, какие области изображения затронуты фоном. Затем применяется растровое изображение XOR с использованием XOR. Это позволяет делать прозрачные области на изображении, но также позволяет инвертировать фон и другие трюки.
Windows XP добавляет поддержку изображений значков с 32-битной глубиной цвета с прозрачностью, взятой из альфа-канала изображения, что позволяет создавать полупрозрачные области, такие как тени и сглаженные края. Поскольку растровое изображение AND больше не используется, эти изображения значков содержат только данные растрового изображения XOR. Windows XP также добавляет возможность отображать значки с разрешением до 96 × 96 пикселей в графической оболочке; однако Microsoft рекомендовала только значки размером до 48 × 48 пикселей, поэтому большие размеры значков встречаются нечасто.
Windows Vista добавила поддержку изображений значков размером 256 × 256 пикселей и поддерживает (но не требует) сжатый формат PNG для этого размера.Формат PNG кодирует данные прозрачности изображения напрямую; он не содержит ни данных XOR, ни данных растрового изображения AND других форматов изображений значков. Рекомендуется, чтобы все значки размером 256 × 256 были сохранены в файле ICO в формате PNG, чтобы уменьшить общий размер файла. Графическая оболочка Windows Vista поддерживает «увеличение и уменьшение масштаба» дисплея; в результате рекомендуется использовать больше форматов значков (включая более крупный формат 256 × 256).
Файлы ICO можно редактировать или экспортировать с помощью ряда графических программ.
Файловая структура []
Все значения представлены в формате с прямым порядком байтов (стандарт Intel).
| Заголовок значка | Хранит общую информацию о файле ICO. |
| Справочник [1..n] | Хранит общую информацию о каждом изображении в файле. |
| Значок № 1 | Фактические «данные» для первого изображения в старом формате AND / XOR DIB или более новом PNG |
| … | |
| Значок №n | Данные для последнего изображения значка |
[]
| Смещение | Размер | Описание |
|---|---|---|
| 0 (0) | 2 | Зарезервировано. Всегда должно быть 0. |
| 2 (2) | 2 | Тип: 1 для значка, 2 для курсора. |
| 4 (4) | 2 | Количество изображений в файле. |
Справочник []
| Смещение | Размер | Описание |
|---|---|---|
| 0 (0) | 1 | Ширина, должно быть 0, если 256 пикселей |
| 1 (1) | 1 | Высота, должно быть 0, если 256 пикселей |
| 2 (2) | 1 | Количество цветов, должно быть 0, если цветов больше 256 |
| 3 (3) | 1 | Зарезервировано, должно быть 0 [1] |
| 4 (4) | 2 | Цветные плоскости в.Формат ICO должен быть 0 или 1 [2] , или точка доступа X в формате .CUR. |
| 6 (6) | 2 | бит на пиксель в формате .ICO [3] или точка доступа Y в формате .CUR |
| 8 (8) | 4 | Размер данных растрового изображения в байтах. |
| 12 (К) | 4 | Смещение в файле. |
Рекомендуемые размеры значков для совместимости с Windows Vista []
Полный набор стандартных размеров значков, который должен быть предоставлен для полной совместимости с Windows Vista:
- 256 × 256, 32-битный цвет, сжатый PNG
- 48 × 48, 32-битный цвет, без сжатия
- 48 × 48, 8-битный цвет, без сжатия
- 48 × 48, 4-битный цвет, без сжатия
- 32 × 32, 32-битный цвет, без сжатия
- 32 × 32, 8-битный цвет, без сжатия
- 32 × 32, 4-битный цвет, без сжатия
- 16 × 16, 32-битный цвет, без сжатия
- 16 × 16, 8-битный цвет, без сжатия
- 16 × 16, 4-битный цвет, без сжатия
Ссылки []
- ↑ Примечание. Хотя в технической документации Microsoft указано, что это значение должно быть нулевым, кодировщик значков встроен в.NET (System.Drawing.Icon.Save) устанавливает это значение равным 255. Похоже, что операционная система полностью игнорирует это значение.
- ↑ Примечание: установка цветовых плоскостей на 0 или 1 обрабатывается операционной системой эквивалентно, но если цветовые плоскости установлены выше 1, это значение следует умножить на количество битов на пиксель, чтобы определить окончательную глубину цвета изображения. . Неизвестно, устойчивы ли различные версии операционной системы Windows к разным значениям цветовой плоскости.
- ↑ Примечание: биты на пиксель могут быть установлены на ноль, но могут быть выведены из других данных; в частности, если битовая карта не является сжатой PNG, то количество битов на пиксель может быть вычислено на основе длины данных битовой карты относительно размера изображения.Если растровое изображение сжато PNG, биты на пиксель сохраняются в данных PNG. Неизвестно, содержат ли различные версии операционной системы Windows логику для вывода битовой глубины для всех возможностей, если это значение установлено на ноль.
См. Также []
- Растровое изображение Windows, очень похожий формат файла
- Apple Icon Image, формат значков, используемый в Mac OS X.
- Favicon, формат значков, используемый для веб-сайтов
- Редактор иконок
Внешние ссылки []
Что, зачем и как создавать фавикон для вашего веб-сайта
В любое время дня у меня открыто около 20 вкладок в Chrome.Что помогает мне отслеживать, какие вкладки представляют собой маленькие значки, показанные ниже.
Я знаю, что мои Документы Google — это вкладки с синим блокнотом. Моя доска Trello — это вкладка с мини-доской Trello. Блоги HubSpot, о которых я говорю, — это вкладки со звездочками и так далее.
Эти значки известны как значки. Они не только могут помочь улучшить вашу видимость в браузере, полном открытых вкладок, но и укрепить узнаваемость вашего бренда.
Давайте подробнее рассмотрим, какие значки расположены ниже.Затем мы рассмотрим, как сделать его с помощью генератора значков и добавить на свой сайт с помощью HTML.
Что такое фавикон?
Значок — это значок браузера, представляющий бренд или веб-сайт. Значки, которые чаще всего встречаются рядом с заголовком веб-страницы на вкладках браузера, также можно найти в адресных строках, списках закладок, страницах результатов поиска, панелях инструментов, истории браузера и других местах в Интернете.
У Google один из самых узнаваемых значков. Вы можете увидеть разноцветную букву G в адресной строке моего браузера ниже.
Вы также можете увидеть значки Gmail, Google Таблиц, Wiki HubSpot, Редактора Хемингуэя и других в моем списке закладок.
Favicons теперь даже появляются в результатах мобильного поиска Google. Вы можете увидеть результаты моего последнего поиска — «как часто следует поливать суккуленты» — ниже.
Почему значки значков имеют значение?
Favicons не только влияют на пользовательский опыт и узнаваемость бренда, но и могут сделать ваш сайт более профессиональным.
Обратите внимание в мобильной поисковой выдаче, что на веб-сайтах для Joy Us Garden и Easy to Grow Bulbs есть значки цветов, а на сайте The Succulent Source есть серый земной шар.Это не имеет особого смысла для сайта о суккулентах, не так ли? Это потому, что глобус — это значок по умолчанию, который Google Chrome устанавливает для веб-сайтов, для которых нет настраиваемого значка.
Если я быстро просматриваю страницу результатов, я, вероятно, решу изучить Joy Us Garden и Easy to Grow Bulbs вместо The Succulent Source по нескольким причинам. Они не только появляются первыми в поисковой выдаче, но и их значки, URL-адреса, заголовки страниц и мета-описания указывают на то, что они являются веб-сайтами, посвященными всем растениям и имеющими ответ на мой вопрос.
Теперь изобразите эти три веб-сайта во вкладках браузера на рабочем столе. Было бы намного проще запомнить пользовательские значки для Joy Us Garden и Easy to Grow Bulbs , чем значок по умолчанию для The Succulent Source . В море открытых вкладок я с большей вероятностью вернусь к вкладкам с настраиваемыми значками и проведу на этих сайтах больше времени.
Наконец, допустим, я нажимаю на каждый из этих сайтов. При посещении Joy Us Garden и Easy to Grow Bulbs я сразу замечаю, что пользовательские значки созданы на основе логотипов веб-сайта.Цветной логотип последнего показан ниже. Вы узнаете тюльпан как их значок.
Это помогает укрепить идентичность их бренда и сделать их сайт более запоминающимся. С другой стороны, при посещении The Succulent Source я впервые увижу их логотип. Они могли бы улучшить последовательность своего бренда, сопоставив свой логотип и значок.
Какой размер у фавикона?
Оптимальный размер значков — 16×16 пикселей.Так они отображаются на вкладках браузера, адресных строках и списках закладок. Однако в идеале вы должны создать свой значок в нескольких размерах. Таким образом, вы будете видеть правильно масштабированные версии на больших экранах, а не растянутую версию 16×16.
Ниже приведены некоторые из наиболее распространенных размеров значков и их уникальное назначение.
- 16×16 : Размер значков браузера.
- 32×32 : размер значков ярлыков на панели задач.
- 96×96 : размер значков ярлыков на рабочем столе.
- 180×180 : размер значков Apple Touch.
- 300×300 : размер, требуемый Squarespace.
- 512×512 : размер, требуемый WordPress.
Теперь, когда мы понимаем, что такое значок, его назначение и разные размеры, давайте посмотрим, как его создать.
Как сделать фавикон
Вы хотите, чтобы ваш значок был узнаваемым и соответствовал идентичности вашего бренда. Поэтому вместо того, чтобы начинать с нуля, вы должны основывать его на логотипе своей компании.
Если у вас нет логотипа, начните с него. Вы можете нанять дизайнера, который создаст его для вас, или вы можете использовать такие инструменты, как Logo Crisp, для разработки высококачественного логотипа за небольшую часть стоимости.
Когда вы будете довольны своим логотипом, вы можете приступить к созданию своего значка. К сожалению, это не так просто, как сжать ваш логотип в квадрат 16×16 и прекратить работу. Например, на вашем логотипе может быть текст, который не будет разборчивым в уменьшенном виде.
Вот почему вы хотите взять наиболее узнаваемую часть своего логотипа и сделать ее своим значком. Easy to Grow Bulbs сделал именно это, взяв тюльпан из своего логотипа и сделав его своим любимым значком.
Чтобы внести подобные изменения, вам может потребоваться программное обеспечение для редактирования значков, такое как IconEdit2. В большинстве программ для редактирования значков вы можете добавить несколько размеров к одному файлу значка. Если вас устраивают изображение и размеры значка, вы можете сохранить файл в формате PNG или JPG, а затем загрузить его в генератор значков.
Однако для небольших изменений, таких как обрезка изображения, вы можете завершить весь процесс с помощью генератора значков.Давайте подробнее рассмотрим эти онлайн-инструменты ниже.
Генераторы Favicon
Ниже приведены некоторые из лучших генераторов значков в сети. С помощью этих инструментов вы просто загружаете свое изображение значка, оно преобразует изображение в соответствующие форматы значка и делает его доступным для загрузки. Этот процесс займет всего несколько минут.
Стандартные форматы значков — ICO и PNG. ICO совместим со всеми браузерами, включая Internet Explorer. PNG — еще один распространенный формат.Единственный недостаток — Internet Explorer не поддерживает файлы PNG. В идеале выбранный вами генератор позволит вам загружать значок в обоих форматах.
Favikon
Создать фавикон в Favikon очень просто. Вы просто загружаете изображение, обрезаете его, а затем загружаете получившийся значок в формате ICO или PNG. Ниже я загрузил значок ламы из The Noun Project .
Обратной стороной является то, что Favikon поддерживает только один размер: 16×16 пикселей. Чтобы узнать больше о размерах, воспользуйтесь инструментами ниже.
Favicon.io
С Favicon.io вы можете создать значок с нуля или из изображения, логотипа или эмодзи. Вы можете предварительно просмотреть его в трех разных размерах перед загрузкой.
Вы можете скачать результат в форматах ICO и PNG и в нескольких размерах. Возможные варианты перечислены ниже:
- android-chrome-192×192.png
- android-chrome-512×512.png
- apple-touch-icon.png
- favicon-16×16.png
- favicon-32×32.png
- Фавикон.ico
Favicon.ico и генератор значков приложений
С помощью этого бесплатного инструмента вы можете загрузить изображение PNG или JPG и преобразовать его в форматы ICO и PNG еще большего размера.
Варианты загрузки перечислены ниже:
- apple-icon-57×57.png
- apple-icon-60×60.png
- яблоко-значок-72×72.pnf
- apple-icon-76×76.png
- apple-icon-114×114.png
- apple-icon-120×120.png
- apple-icon-144×144.png
- яблоко-значок-152×152.png
- apple-icon-180×180.png
- android-icon-192×192.png
- favicon-32×32.png
- favicon-96×96.png
- favicon-16×16.png
Создав свой значок в желаемом формате, вы сохраните его в корневом каталоге своего сайта. Затем вы можете создать ссылку на файл в формате HTML, чтобы разместить значок на своем сайте.
Прежде чем мы рассмотрим этот процесс ниже, важно отметить, что это применимо к владельцам сайтов, которые создали свой сайт с нуля или с помощью фреймворка разработки, такого как Bootstrap CSS.Если вы использовали конструктор веб-сайтов или CMS, например, WordPress или альтернативы WordPress, то процесс будет немного отличаться.
Как добавить значок в HTML
После того, как вы создали свой значок, вы должны указать браузерам и другим веб-приложениям, где его найти. Для этого вам нужно добавить строку кода в раздел
вашего HTML-файла.Допустим, вы сохранили свой файл PNG как «favicon.ico». Затем вы должны добавить следующий фрагмент кода в любое место между тегами
:
Обратите внимание на : ваш значок не обязательно должен быть помещен в корневой каталог вашего сайта — это обычно так. Если вы сохранили его в другом месте, просто убедитесь, что атрибут href указан правильно. Поэтому, если вы сохранили его во вложенной папке с именем «images», вы должны ввести
Теперь предположим, что вы создали несколько размеров значков. Вы можете загрузить их все на свой сайт, добавив строку кода для каждого размера в раздел
вашего HTML-файла.Если вы создали, например, версию 16 x 16, 32 x 32, 48 x 48 и 180 x 180, вы должны добавить следующий фрагмент кода:
Создание вашего Favicon
Фавиконы — важный элемент веб-дизайна.Они могут улучшить впечатления посетителей, укрепить идентичность вашего бренда и сделать ваш сайт более авторитетным. Не упустите их из виду, особенно если их легко создать и добавить на свой сайт. Вам просто нужен бесплатный генератор значков и некоторое знакомство с HTML.
Как сделать фавикон в 2021 году
Я всегда благодарен тем, кто изучает и переоценивает лучшие практики в том, что необходимо буквально каждому веб-сайту и имеет сложный набор требований.Андрей Ситник сделал это здесь с помощью значков.
Последнее предложение:
{
"icons": [
{"src": "/192.png", "type": "image / png", "sizes": "192x192"},
{"src": "/ 512.png "," type ":" image / png "," sizes ":" 512x512 "}
]
} Было хорошее время сделать это здесь, на CSS-Tricks, поэтому я попытался последовать совету буквально, и пока он отлично работает. Думаю, мне надоело, насколько это было сложно, в какой-то момент я стал ультра-минималистичным, и только имел файл favicon.ico . Теперь у меня есть все вышеперечисленное.
Чем я отличался…
- У меня не установлен GIMP или Inkscape, которые могут экспортировать
.ico, поэтому я использовал этот генератор значков (я скармливал ему свой «основной» SVG) только для этого значка. - Я нашел Figma полезной для изменения размера фреймов и экспорта нужных размеров.
- Я использовал ImageOptim для оптимизации всех изображений.
- Я нервничал по поводу добавления «манифеста», потому что у меня нет других шагов, подобных PWA, и это похоже на дополнительный веб-запрос за небольшую ценность. Но я все равно это сделал.
- У меня есть цвет темы (
Мне нравится концепция SVG в темном режиме:
Но я здесь не обошелся, так как считаю, что мой значок в любом случае выглядит нормально без изменений:
Я также не удосужился снова создать специальный значок, предназначенный только для разработки, но я сделаю это, потому что считаю его чрезвычайно удобным.
Прямая ссылка →
Выбор правильного размера и формата значков
Выбор правильного размера значка для различных операционных систем (iOS, Microsoft, Android) важен, но он также может вызвать головную боль, депрессию и другие неприятные побочные эффекты. Это может негативно сказаться на стоимости дизайна и качестве продукта в целом. Итак, мы решили вам помочь и подвести итоги.
Вы можете прокрутить страницу вниз до конкретной операционной системы, щелкнув ссылки.
| iOS 9 | 58 × 58, 80 × 80, 120 × 120, 152 × 152, 180 × 180, 1024 × 1024 |
| Windows 10 | 16 × 16, 24 × 24, 32 × 32, 48 × 48, 256 × 256 |
| Android Lollipop, Marshmallow, Nougat, Oreo | 24 × 24, 48 × 48, 192 × 192 |
| macOS X | 16 × 16, 32 × 32, 64 × 64, 128 × 128, 256 × 256, 512 × 512, 1024 × 1024 |
| Операционные системы Unix | 16 × 16, 24 × 24, 48 × 48, 96 × 96 |
| Windows Phone | 62 × 62, 99 × 99, 173 × 173, 200 × 200 |
iOS 9
Рекомендации по человеческому интерфейсуiOS ясны и довольно кратки.Они рекомендуют формат PNG и следующие размеры иконок:
Значок приложения
| Требуемые размеры | |
|---|---|
| iPhone 6s Plus и iPhone 6 Plus | 180 × 180 |
| iPhone 6s, iPhone 6 и iPhone SE | 120 × 120 |
| iPhone 5 и iPhone 4s | 120 × 120 |
| iPad Pro | 167 × 167 |
| iPad и iPad mini | 152 × 152 |
Значок приложения для App Store
Требуемый размер:
Значок результатов поиска Spotlight
| Требуемые размеры | |
|---|---|
| iPhone 6s Plus и iPhone 6 Plus | 120 × 120 |
| iPhone 6s, iPhone 6 и iPhone SE | 80 × 80 |
| iPhone 5 и iPhone 4s | 80 × 80 |
| iPad Pro | 80 × 80 |
| iPad и iPad mini | 80 × 80 |
Значок настроек
| Требуемые размеры | |
|---|---|
| iPhone 6s Plus и iPhone 6 Plus | 87 × 87 |
| iPhone 6s, iPhone 6 и iPhone SE | 58 × 58 |
| iPhone 5 и iPhone 4s | 58 × 58 |
| iPad Pro | 58 × 58 |
| iPad и iPad mini | 58 × 58 |
Значок панели инструментов и панели навигации
| Требуемые размеры | |
|---|---|
| iPhone 6s Plus и iPhone 6 Plus | Около 66 × 66 |
| iPhone 6s, iPhone 6 и iPhone SE | Около 44 × 44 |
| iPhone 5 и iPhone 4s | Около 44 × 44 |
| iPad Pro | Около 44 × 44 |
| iPad и iPad mini | Около 44 × 44 |
Значок панели вкладок
| Требуемые размеры | |
|---|---|
| iPhone 6s Plus и iPhone 6 Plus | Около 75 × 75 |
| iPhone 6s, iPhone 6 и iPhone SE | Примерно 50 × 50 |
| iPhone 5 и iPhone 4s | Примерно 50 × 50 |
| iPad Pro | Примерно 50 × 50 |
| iPad и iPad mini | Примерно 50 × 50 |
[link_button link = ”https: // icons8.com / free-ios-7-icons-in-vector / # / web ”text =” Загрузить значки iOS 9 ”align =” middle ”]
macOS X
Значки приложений
Необходимые размеры:
- 16 × 16
- 32 × 32
- 64 × 64
- 128 × 128
- 256 × 256
- 512 × 512
- 1024 × 1024
Значок панели инструментов PNG (рекомендуется)
Необходимые размеры:
- 32 × 32
- 32 × 32 @ 2x (64 × 64)
Значок боковой панели в PDF (рекомендуется)
Необходимые размеры:
Значок боковой панели в PNG
Необходимые размеры:
- 16 × 16
- 16 × 16 @ 2x
- 18 × 18
- 18 × 18 при 2х
- 32 × 32
- 32 × 32 при 2х
Windows 10
Microsoft не публиковала никаких рекомендаций, поэтому нам пришлось прочитать его в чайных листах, следовать образцам значков в бета-версиях ОС Windows и шрифтам значков, представленным Microsoft.
Мы даже создали собственное руководство по стилю для значков Windows 10. Вот что мы выяснили:
Значки приложений и элементы панели управления
Значки должны быть в формате ICO.
В полный набор должны входить значки следующих размеров:
- 16 × 16
- 32 × 32
- 48 × 48
- 256 × 256
Значки панели инструментов
Обратите внимание, что значки на панели инструментов всегда должны быть плоскими.
- Windows 10: 32 × 32
- Windows 8: 16 × 16, 24 × 24, 32 × 32
Диалоги и мастера
Требуемые размеры:
[link_button link = ”https: // icons8.com / windows-8-icons / # / web ”text =” Загрузить значки Windows 8 ”]
[link_button link = »https://icons8.com/download-huge-windows8-set/#/web» text = «Загрузить значки Windows 10»]
Android Lollipop, Marshmallow, Nougat, Oreo
Android, начиная с версии 5 Lollipop, использует спецификации дизайна материалов для значков.
И приз за самое подробное руководство по стилю значков получает… Google! Они терпеливо описали все: от формы углов до размеров теней и непрозрачности.Вот лишь несколько основных идей.
Значки приложений
Android ожидает, что значки продуктов будут предоставлены с разрешением 48dp , с краями при 1dp . При создании значка сохраните размер в 48 единиц, но масштабирует его до 400% при 192x192dp, (край становится 4dp).
Системные значки
Эти значки обозначают команду, файл, устройство, каталог или обычное действие, например, удаление, печать и сохранение.
Системные значки отображаются на 24dp .При создании значков важно использовать масштаб 100% для точности в пикселях и увеличивать масштаб для большей точности.
[link_button link = ”https://icons8.com/android-icons/” text = ”Загрузить значки материалов”]
Unix-подобные операционные системы
Стоит упомянуть спецификации значков из рабочих сред Unix-подобных операционных систем: GNOME и KDE. Они применимы к Linux, FreeBSD и другим.
Иконки GNOME
GNOME выглядит мягко и трехмерно.Этот стиль достигается за счет использования техник сглаживания, затенения и выделения. Поддерживаемые форматы файлов изображений: PNG, XPM и SVG.
Полужирный шрифт обозначает основной размер значков Linux.
| Значок объекта и документа | 24 × 24, 48 × 48 , 96 × 96 |
| Значок приложения | 24 × 24, 48 × 48 |
| Значок панели инструментов | 24 × 24 , 48 × 48 |
| Значок меню | 16 × 16 |
Иконки KDE
KDE — это рабочая среда по умолчанию во многих дистрибутивах Linux.У них нет официальных рекомендаций по иконкам, но вот то, что мы нашли на различных форумах KDE.
| Значок на рабочем столе | 16 × 16,22 × 22,32 × 32,48 × 48,64 × 64,128 × 128,256 × 256 |
| Значок панели инструментов | 16 × 16,22 × 22,32 × 32,48 × 48 |
| Значок главной панели инструментов | 16 × 16,22 × 22,32 × 32,48 × 48 |
| Значок панели | 16 × 16,22 × 22,32 × 32,48 × 48,64 × 64,128 × 128,256 × 256 |
| Значок диалога | 16 × 16,22 × 22,32 × 32,48 × 48,64 × 64,128 × 128,256 × 256 |
Windows Phone
Это размеры необходимых значков в пакете XAP и Windows Phone Store.
