Иконка сайта. В чем отличие формата ICO и PNG?
Верстка, HTML, CSS
Salomoon Залишити коментар
О favicon стало известно уже давно. Сайт выглядит лучше в окне браузера, если у него есть иконка, которая отображается первой на вкладке, далее идет описание сайта title.
С самого начала задумали использовать специальный формат изображения ICO, размер картинки которого составляет 16 х 16 пикселей. Для того чтобы прописать в HTML коде, что иконка для сайта есть применяется специальный код, который я приведу ниже. К тому же следует отметить, что инициализация favicon и сейчас, в конце 2019 года прекрасно поддерживается всеми браузерами. Не смотря на поддержку ico технология считается устаревшей. Вот код, который инициализирует технологию favicon посредством файта *. ico:
<link rel="shortcut icon" href="https://example.com/img/favicon.ico"> <link rel="icon" type="image/ico" href="https://example.com/img/favicon.ico">
Всего эти 2 строчки в блоке head и правильно подобранная иконка давали приличный результат.
К сожалению формат ико уже не поддерживается некоторыми современными браузерами для мобильных устройств. Например Google Chrome for Android
Как видите, здесь сайт про ремонт и строительство имеет картинку – она в формате png. А вот другие сайты иконки не показывают – хотя она там имеется в старом формате ICO.
Почему стоит всё еще поддерживать формат ICO
В основном для поддержки старых браузеров, таких как Mircosoft Internet Explorer. До 11 версии формат PNG в Internet Explorer не поддерживался.
Формат PNG начал активно использоваться при появлении HTML5. в нём есть атрибут sizes, который указывает, какие есть размеры картинок в формате png. Браузер или устройство смотрит, какие есть картинки и подбирает наиболее подходящее для своей платформы.
Использование формата PNG
Для подключения формата PNG тоже нужно прописать в коде всего пару строчек.
Выглядять они вот так”
<link rel="icon" href="https://salomoon.pp.ua/wp-content/uploads/2019/07/cropped-blog-32x32.png" /> <link rel="icon" href="https://salomoon.pp.ua/wp-content/uploads/2019/07/cropped-blog-192x192.png" /> <link rel="apple-touch-icon-precomposed" href="https://salomoon.pp.ua/wp-content/uploads/2019/07/cropped-blog-180x180.png" /> <meta name="msapplication-TileImage" content="https://salomoon.pp.ua/wp-content/uploads/2019/07/cropped-blog-270x270.png" />
Если вы успользуете популярную систему управления сайтом, например Вордпресс – то эти строчки создаются автоматически, вам всего лишь нужно выбрать в определённом месте картинку правьльных размером. Остальные размеры изображения будут созданы автоматически.
Так же иконки сайта используются для изображения в плитках – такие возможности появились в новых версиях Microsoft Windows. Для фона плитки в коде тоже можно указать цвет <meta name="msapplication-TileColor" content="#009900">
Вывод
Если вы создаёте сайт – позаботьтесь о иконке для него.
В совремённом мире информационных технологий принято использовать иконку в формате PNG. Формат ICO является устаревшим.
Веселые картинки
Веселые картинки
|
Это было нарисовано еще в прошлом веке по случаю соответствующих праздников:
При работе над дизайном сайта, посвященного оформлению заграничных паспортов сам собой образовался такой паспорт:
Немножко графики для сотовых телефонов с монохромным экраном в формате 101×46
Немного самодельных значков (пиктограммок, иконок, ico) православной тематики
Подражание Андрею Кузнецову:
Принимая вызов некоего «НАПРАВЛЕНИЯ.
РУ», не по делу гордящегося невесть чем, сверстал картинку таблицей , т.е. сделал небольшую картинку без графики, токмо окрашенными ячейками.
А вот примерно такими картинками (только во весь экран) начинается и завершается работа моих девяносто восьми Windows:
Просматривая статистику вижу, что на сайт часто попадают случайные посетители, ищущие информации не об иконах, а об «иконках» («пиктограммах», «значках», файлах *.ICO). Дабы не разочаровывать их, могу предложить и комплект значков:
Итак, имеется библиотека полноцветных (256 цветов) иконок, каждая в двух форматах (32×32 и 16×16). Риовалась для собственных нужд (однажды захотелось сделать Windows чуть пожелтее). В библиотеке больше сотни значков, пригодных для подмены стандартных иконок (вот только не спрашивайте меня как это можно сделать, на это существуют и специалисты, и специальные инструменты).
Еще одна самодельная библиотека иконок-значков. Все иконки в двух форматах: 32 x 32 — полноцветный и 16 x 16. Разрабатывалась для Windows-98, поэтому не имеет больших (48×48 и более) значков, а также новомодного альфа-канала (понимаемого в Windows-xp). Тем не менее, довольно веселенькая, местами полупрозрачная, такая помесь оформлений XP и mac-OS.
Предпросмотр формата 32×32, предпросмотр формата 16×16. По набору и порядку следования значков библиотека повторяет стандартную для оболочки Windows библиотеку Shell32.dll, не нужные лично мне значки оставлены пустыми, но зато добавлено довольно много нужных (опять-таки лично мне) иконок. Давайте скачаем библиотеку (формат *.icl в архиве ZIP). Возможно, в библиотеке еще будут добавления и изменения. Планируется добавить новые значки для многих специализированных папок, а также для популярных типов файлов.
И еще один не вполне удачный набор значков: однажды захотелось посмотреть как будет выглядеть Windows с с синими папками. Довольно быстро надоел, далее не поддерживается и не развивается. Предпросмотр . Скачать библиотеку (формат *.icl в архиве ZIP).
По просьбам посетителей создан маленький раздел с изображениями икон, которые можно использовать в качестве «обоев» для «рабочего стола» («wallpapers»).
Графические файлы в формате JPEG размером 800×600.
Поделюсь впечатлениями от использования наладонного компьютера (PDA) под Palm-OS.
Иконки изображений в формате Ico скачать бесплатно 15 464 .svg .png .ai .eps файлы
Сортировать по: По умолчанию В тренде Новейшие Рекомендовать Релевантные Популярные Непопулярные Запросить дизайн
значки сплошной fontawesome svg удивительная геометрия круг круглая форма приложение геометрический геометрический объект инструмент линии изображение приложение знак гора фото приложение линия в форме луны жетон контрастные стрелки крест кнопка стрелка
[иконки] изображения знак шаблон плоский контраст черный белый геометрический гора луна контур (. ай .png .svg 282,58 КБ ) All-free-download.com [Значки] изображение файла значок кнопки плоский черный белый контрастный круг линии эскиз ( .
ai .png .svg 182.50KB ) All-free-download.com [Значки] Шаблон знака удостоверения личности плоский контрастный черно-белый эскиз ( .ai .png .svg 272.42KB )
com [ Иконы ] церковный знак значок плоский черный белый геометрический эскиз ( .ai .png .svg 225.08KB ) All-free-download.com [Значки] перо альтернативный силуэт плоский значок ( .ai .png .svg 343.65KB ) All-free-download.com [Иконки] значок горного знака черный белый геометрический плоский эскиз ( .ai .png .svg 338.73KB ) All-free-download.com устройство закрученный интерфейсы кривые значок приложения движущийся музыка значок приложение кнопка файл изображение объекты граница треугольник идентичность рамка отметка медицинская контур солнце облако чавкание благотворительность формула погода клиника математика погода элементы человек бар паб логотип тип напиток диск стекло напиток электростанция автомобильный шахматный диск люди здания облачно архитектура архитектурный человек спорт наклейка значок солнечный навигация фотография слово молния
[иконки] изображение знак значок плоский черный белый контраст горы луна символы эскиз ( .
com [Значки] значок булавки карты плоский силуэт контрастный округлой формы ( .ai .png .svg 301.52KB ) All-free-download.com [Иконки] значок знака зуба плоский силуэт эскиз ( .ai .png .svg 143.96 КБ) All-free-download.com [ Иконки ] шахматный рыцарь знак значок плоский силуэт эскиз ( .ai .png .svg 306.20KB ) All-free-download.com [Значки] раз отметьте значок знака симметричный плоский контур силуэта ( .ai .png .svg 299.96KB ) All-free-download.com [ Иконки ] Знак АЗС плоский силуэт эскиз ( .ai .png .svg 317.86KB ) All-free-download.com [ Иконки ] изображение файла знак значок плоский контрастный геометрический эскиз ( .ai .png .svg 275.53KB ) All-free-download.com [Значки] ползунки h знак значок плоский силуэт круги линии эскиз ( .ai .png .svg 278.
00KB ) All-free-download.com [Значки] значок молнии значок плоский силуэт эскиз ( .ai .png .svg 281.10KB ) All-free-download.com [Значки] проверить двойной знак значок плоский контраст черный белый геометрический эскиз ( .ai .png .svg 349.13KB ) All-free-download.com [Значки] облако солнце прогноз погоды знак плоский черный белый контур ( .ai .png .svg 351.68KB ) All-free-download.com [ Иконки ] значок знака метлы плоский контур контура ( .ai .png .svg 346.77KB ) All-free-download.com [Иконки] запись винилового знака значок плоский контрастный черно-белый эскиз ( .ai .png .svg 601.92KB ) All-free-download.com [иконки] деньги купюра волна альтернативный знак значок плоский контраст черный белый контур (.ai .png .svg 187.80KB) All-free-download.com [Значки] значок элемента прогноза погоды облака солнце ( .
ai .png .svg 304.73KB ) All-free-download.com [Значки] стакан виски знак значок плоский черный белый эскиз ( .ai .png .svg 360.07KB ) All-free-download.com [ Иконки ] значок ретвита симметричное вращение стрелки форма линий ( .ai .png .svg 206.97KB ) All-free-download.com [Значки] отвертка гаечный ключ инструменты знак значок плоский силуэт контур (.ai .png .svg 199,63 КБ) All-free-download.com [ Иконки ] портретное изображение знак значок плоский контраст человек значок контур ( .ai .png .svg 266.31KB ) All-free-download.com [ Иконки ] сжать стрелки Alt знак значок плоский силуэт симметричный дизайн ( .ai .png .svg 352.50KB ) All-free-download.com [ Иконки ] развернуть знак значок черный симметричный эскиз с прямыми углами ( .ai .png .svg 270.35KB ) All-free-download.
com [Значки] знак равенства знак значок плоский черный белый эскиз горизонтальных линий ( .ai .png .svg 238.03KB ) All-free-download.com [Иконки] хранить значок альтернативного знака, эскиз плоского силуэта ( .ai .png .svg 197,61 КБ ) All-free-download.com [Значки] стрелка местоположения плоская черная симметричная заточка значок (.ai .png .svg 196,76 КБ) All-free-download.com [Значки] коктейльный бокал знак значок плоский черный белый эскиз ( .ai .png .svg 330.31KB ) All-free-download.com [Значки] волейбольный мяч знак значок плоский черный белый эскиз (.ai .png .svg 396.93KB) All-free-download.com [Значки] барабан стилпэн знак значок контраст черный белый эскиз ( .ai .png .svg 669.29 КБ) All-free-download.com [Значки] значок ключа плоский контрастный черно-белый эскиз силуэта ( .
ai .png .svg 251.61KB ) All-free-download.com [иконки] драгоценный камень алмаз знак значок симметричный силуэт геометрия эскиз ( .ai .png .svg 320.68KB ) All-free-download.com формат ico формат ico ico изображение изображение формат jpeg футбольное поле изображения перерабатывать значок ico волна изображения формы изображение дом музыка скачать нет изображения ipod силуэт изображения для загрузки изображение рыбы изображение перспективы изображение изображение изображение изображение папка изображение подсолнуха изображение изображение pan tar формат файла
[ Иконки ] изображение файла знак кнопки плоский черный белый луна гора контур ( .ai .png .svg 188.36KB ) All-free-download.com [Значки] знак камеры значок ретро плоский контрастный черный белый контур ( .ai .png .svg 320.53KB ) All-free-download.com [Значки] значок знака урожая плоский черный контур силуэта ( .
ai .png .svg 265.67KB ) All-free-download.com [Значки] значок звезды жизни знак плоский силуэт контур ( .ai .png .svg 142.22KB ) All-free-download.com [Значки] значок косой черты глаза плоский черный белый контур ( .ai .png .svg 426.51KB ) All-free-download.com [Значки] корзина знак значок плоский силуэт эскиз ( .ai .png .svg 156.50KB ) All-free-download.com [ Иконки ] шаблон знака инь янь контраст симметричные кривые круги эскиз ( .ai .png .svg 294.83KB ) All-free-download.com [ Иконки ] проверить интерфейс знак шаблон силуэт геометрический эскиз ( .ai .png .svg 199.50KB ) All-free-download.com [Значки] шестеренки знак иконки плоский силуэт контур (.ai .png .svg 369.22 КБ) All-free-download.com [ Иконки ] Знак зарядной станции плоский силуэт эскиз ( .
ai .png .svg 307.86KB ) All-free-download.com [ Иконки ] Значок знака ДНК плоские симметричные черные белые кривые линии контур ( .ai .png .svg 287.32KB ) All-free-download.com Загрузка дополнительных элементов, пожалуйста, подождите…
Загрузка дополнительных элементов, подождите…
Критерий поиска: Тип поиска:Совпадение с любымСовпадение со всеми
Искать в:ВекторыИконкиФотоШрифтыШаблоны сайтовPSD
Лицензия:Все лицензииРазрешить коммерческое использование
Результат сортировки:Сначала лучшее совпадениеСначала новыеСначала много загрузокСначала меньше загрузок
- Дом
- Лицензии
- Срок
- Конфиденциальность
- О
- Связаться с
ICO (формат файла) | Энциклопедия MDPI
Формат файла ICO представляет собой формат файла изображения для компьютерных значков в Microsoft Windows.
Файлы ICO содержат одно или несколько небольших изображений разного размера и глубины цвета, чтобы их можно было соответствующим образом масштабировать. В Windows все исполняемые файлы, отображающие значок для пользователя на рабочем столе, в меню «Пуск» или в проводнике Windows, должны иметь значок в формате ICO. Формат файла CUR почти идентичен формату файла изображения для неанимированных курсоров в Microsoft Windows. Единственным различием между этими двумя форматами файлов являются байты, используемые для их идентификации, и добавление точки доступа в заголовке формата CUR; точка доступа определяется как смещение в пикселях (в координатах x, y) от верхнего левого угла изображения курсора, куда пользователь фактически указывает мышь.
1. История
Значки, появившиеся в Windows 1.0, имели размер 32×32 пикселя и были монохромными. [1] Поддержка 16 цветов появилась в Windows 3.0.
В Win32 появилась поддержка хранения изображений значков до 16,7 миллионов цветов (TrueColor) и размером до 256×256 пикселей.
[2] В Windows 95 также представлен новый механизм Device Independent Bitmap (DIB). [3] Однако 256 цветов были глубиной цвета значков по умолчанию в Windows 95. Можно было включить 65535 цветных значков (Highcolor), либо изменив0519 Shell Icon BPP Значение в реестре [2] [4] или при покупке Microsoft Plus! для Windows 95. Значение Shell Icon Size позволяет использовать более крупные значки вместо значков 32×32, а значение Shell Small Icon Size позволяет использовать пользовательские размеры вместо значков 16×16. [2] Таким образом, один файл значка может хранить изображения любого размера от 1×1 пикселя до 256×256 пикселей (включая неквадратные размеры) с 2 (редко используется), 16, 256, 65535 или 16,7. миллион цветов; но оболочка не могла отображать значки очень большого размера. Область уведомлений на панели задач Windows по умолчанию была ограничена 16 цветными значками до тех пор, пока Windows Me не была обновлена для поддержки цветных значков.
В Windows XP добавлена поддержка изображений значков с 32-битным цветом (16,7 миллиона цветов плюс прозрачность альфа-канала), что позволяет отображать на значке полупрозрачные области, такие как тени, сглаживание и эффекты, подобные стеклу. Windows XP по умолчанию использует значки размером 48×48 пикселей в проводнике Windows. В Windows XP можно заставить использовать значки размером до 256×256, изменив значение размера значка оболочки , но это приведет к увеличению масштаба всех значков размером 32×32 во всей оболочке. [2] Microsoft рекомендует размеры значков до 48×48 пикселей только для Windows XP. [5] Windows XP может уменьшать значки размером 256×256 и больше, если нет более близкого размера изображения. [2]
Windows Vista добавила вид значков размером 256×256 пикселей в проводник Windows, а также поддержку сжатого формата PNG. Хотя сжатие не требуется, Microsoft рекомендует хранить все значки размером 256×256 в файлах ICO в формате PNG, чтобы уменьшить общий размер файла.
[6] Проводник Windows Vista поддерживает плавное масштабирование значков до нестандартных размеров, которые отображаются на лету, даже если в файле значка нет изображения такого размера. В оболочке Windows Vista добавлен ползунок для «увеличения» размеров значков. Пользователям, использующим более высокие разрешения и режимы с высоким DPI, рекомендуются более крупные форматы значков (например, 256 × 256). [6]
2. Тип MIME
Несмотря на то, что тип MIME, зарегистрированный в IANA для файлов ICO, имеет вид image/vnd.microsoft.icon , [7] , он был представлен в IANA в 2003 г. третьей стороной. и не распознается программным обеспечением Microsoft, которое вместо этого использует изображение /x-icon . [8] Ошибочные типы image/ico , image/icon , text/ico и application/ico также использовались. [7]
3. Структура ресурсов значков
Файл ICO или CUR состоит из структуры ICONDIR («Каталог значков»), содержащей структуру ICONDIRENTRY для каждого изображения в файле, за которой следует непрерывный блок всех растровых данных изображения (который может быть либо в формате Windows BMP, исключая структуру BITMAPFILEHEADER, либо в формате PNG, сохраненном полностью).
[2]
Изображения с глубиной цвета менее 32 бит имеют определенный формат: изображение кодируется как единое изображение, состоящее из цветовой маски («маска XOR») вместе с маской непрозрачности («И» маска»). [5] Маска XOR должна предшествовать маске AND внутри растровых данных; если изображение хранится в восходящем порядке (что, скорее всего, так и есть), маска XOR будет отображаться под маской AND. Маска И составляет 1 бит на пиксель, независимо от глубины цвета, указанной в заголовке BMP, и указывает, какие пиксели полностью прозрачны, а какие полностью непрозрачны. Маска XOR соответствует битовой глубине, указанной в заголовке BMP, и определяет числовое значение цвета или палитры для каждого пикселя. Вместе маска AND и маска XOR создают непрозрачное изображение, представляющее изображение с 1-битной прозрачностью; они также позволяют инвертировать фон. Высота изображения в структуре ICONDIRENTRY файла ICO/CUR соответствует предполагаемым размерам изображения (после составления масок), тогда как высота в заголовке BMP соответствует высоте двух объединенных изображений масок (до того, как они будут объединены).
являются составными). Следовательно, маски должны иметь одинаковые размеры, а высота, указанная в заголовке BMP, должна точно в два раза превышать высоту, указанную в структуре ICONDIRENTRY.
32-битные изображения (включая 32-битные BMP-изображения в формате BITMAPINFOHEADER [9] ) представляют собой 24-битное изображение с добавлением 8-битного канала для альфа-компоновки. Таким образом, в 32-битных изображениях маска И не требуется, но рекомендуется к рассмотрению. Windows XP и более поздние версии будут использовать 32-битное изображение в режиме меньшего, чем True color, создавая маску И на основе альфа-канала (если он еще не находится с изображением), если 24-битная версия изображения не предоставляется в файл ICO/CUR. Однако более ранние версии Windows интерпретируют все пиксели со 100-процентной непрозрачностью, если с изображением не поставляется маска И. Предоставление пользовательской маски AND также позволит автору значка настроить и подсказать. Даже если маска AND не указана, если изображение находится в формате Windows BMP, в заголовке BMP все равно должна быть указана двойная высота.
3.1. Outline
Все значения в файлах ICO/CUR представлены в порядке следования байтов.
Коллектор
| Смещение# | Размер (в байтах) | Назначение |
|---|---|---|
| 0 | 2 | Зарезервировано. Всегда должно быть 0, |
| 2 | 2 | Указывает тип изображения: 1 для изображения значка (.ICO), 2 для изображения курсора (.CUR). Другие значения недействительны. |
| 4 | 2 | Указывает количество изображений в файле. |
Структура каталога изображений
| Изображение #1 | Запись для первого изображения |
| Изображение #2 | Запись для второго изображения |
| … | |
| Изображение #n | Запись для последнего изображения |
Ввод изображения
| Смещение# | Размер (в байтах) | Назначение |
|---|---|---|
| 0 | 1 | Задает ширину изображения в пикселях. Может быть любым числом от 0 до 255. Значение 0 означает, что ширина изображения составляет 256 пикселей. |
| 1 | 1 | Задает высоту изображения в пикселях. Может быть любым числом от 0 до 255. Значение 0 означает, что высота изображения составляет 256 пикселей. |
| 2 | 1 | Указывает количество цветов в цветовой палитре. Должно быть 0, если изображение не использует цветовую палитру. |
| 3 | 1 | Зарезервировано. Должно быть 0, [10] |
| 4 | 2 | В формате ICO: Определяет цветовые плоскости. Должно быть 0 или 1. [11] В формате CUR: Указывает горизонтальные координаты точки доступа в количестве пикселей слева. |
| 6 | 2 | В формате ICO: Количество бит на пиксель. [12] В формате CUR: Задает вертикальные координаты точки доступа в пикселях сверху. |
| 8 | 4 | Указывает размер данных изображения в байтах |
| 12 | 4 | Указывает смещение данных BMP или PNG от начала файла ICO/CUR |
Ссылочные данные изображения
Все данные изображения, на которые ссылаются записи в каталоге изображений, идут непосредственно после каталога изображений. Обычной практикой является их хранение в том же порядке, что и в каталоге изображений.
Напомним, что если изображение хранится в формате BMP, оно должно исключать открывающую структуру BITMAPFILEHEADER, а если оно хранится в формате PNG, оно должно храниться целиком.
3.2. Формат PNG
Возможность чтения изображений PNG из изображений в формате ICO и CUR была представлена в Windows Vista. [6] Изображение PNG может храниться в изображении так же, как это делается для изображения в стандартном формате Windows BMP, за исключением того, что изображение PNG должно храниться целиком, с заголовком файла.