0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Что такое icon

Icon — перевод, произношение, транскрипция

существительное ↓

Мои примеры

Словосочетания

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

Примеры

He moved the mouse to click on the icon.

Он переместил курсор мыши,чтобы нажать на иконку. ☰

The menu pops up if you double-click on this icon.

Меню появляется, если дважды кликнуть по этой иконке. ☰

Diana was an ideal icon for a post-Christian society.

Диана была идеальным объектом для поклонения в постхристианском обществе. ☰

No icon is safe from his keyhole.

Ни один кумир не скроется от любопытных глаз. ☰

Click the square icon again to minimize the window.

Нажмите на квадратную иконку снова, чтобы свернуть окно. ☰

Click on the icon to open the file.

Чтобы открыть файл, щёлкните мышкой по иконке. ☰

To open a new file, click on the icon.

Чтобы открыть новый файл, щёлкните по иконке. ☰

Click on this icon to open the File Manager.

Нажмите на этот значок, чтобы открыть диспетчер файлов /файловый менеджер/. ☰

He has become an icon in the movie business.

Он стал иконой кинобизнеса. ☰

Click on the icon to open your e-mail program.

Нажмите на этот значок, чтобы открыть программу электронной почты. ☰

Double-click on an icon to launch an application.

Дважды нажмите на значок, чтобы запустить приложение. ☰

Enter your password, then click on the ‘proceed’ icon.

Введите пароль, а затем нажмите на кнопку «продолжить». ☰

You can launch the program by double-clicking on the icon.

Программу можно запустить двойным щелчком по иконке. ☰

The Statue of Liberty has become an American cultural icon.

Статуя Свободы стала культурным символом Америки. ☰

The house became an icon of 1860’s residential architecture.

Это здание стало символом жилого дома образца 1860-х годов. ☰

Simply click on the computer icon and follow the directions.

Просто нажмите на эту иконку и следуйте инструкциям. ☰

Drag this icon to the lower right hand corner of the screen.

Перетащите этот значок в правый нижний угол экрана. ☰

Select the printer icon and then click the left mouse button.

Выберите значок принтера, а затем щёлкните левой кнопкой мыши. ☰

Clicking on the icon will take you back to the previous web page.

Нажав на этот значок, вы вернётесь к предыдущей веб-странице. ☰

a screen icon whose ageless beauty still entrances audiences today

звезда телеэкрана, чья нестареющая красота и сегодня по-прежнему приводит в восторг зрителей ☰

To open the program, point at the icon and click the left mouse button.

Чтобы открыть программу, наведите указатель на значок и щёлкните левой кнопкой мыши. ☰

Примеры, ожидающие перевода

a singer who has become a pop icon

Click on the icon with the right mouse button.

Для того чтобы добавить вариант перевода, кликните по иконке ☰ , напротив примера.

Что такое ICO простыми словами?

ICO — это графический формат файла для значков компьютеров в Microsoft Windows. Файлы 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, но какие картинки могут быть использованы в этих файлах? Определенные изображения являются встроенными в операционную систему и предлагаются по умолчанию. Однако ввиду их однотипности возникла тенденция по созданию различных значков или даже их групп, чем занимаются независимые художники.

Favicon сегодня: форматы, поддержка, автоматизация

На сегодняшний день favicon — это не просто значок 16×16 во вкладке браузера. Он является важной составляющей интерфейса, а также играет немаловажную роль в прогрессивных веб-приложениях. Существует немало способов подключения и использования favicon, о которых я расскажу в данной статье.

В каком формате должен быть фавикон?

Раньше основным форматом фавикона был формат ICO. Его главная особенность заключалась в том, что файл такого формата мог хранить в себе несколько вариантов размеров иконки. Сейчас формат ICO считается устаревшим, на смену ему пришёл формат PNG с новыми возможностями по взаимодействию с иконкой.

Помимо PNG, поддерживается формат SVG. Но у него, к сожалению, невысокая поддержка на данный момент. Однако этот формат идеально подходит для фавиконов, его использование намного бы упростило нам жизнь. Будем надеяться, что ситуация скоро изменится.

Фавикон может быть создан ещё в нескольких форматах, например, в формате GIF или JPEG, но проблемы с поддержкой делают их использование нецелесообразным.

HTML5 и атрибут sizes

Атрибут sizes пришел в нашу жизнь с HTML5. Благодаря ему браузер или устройство может выбрать необходимый размер фавикона. Атрибут sizes указывается в формате [ширина х высота] без указания единиц. Если в файле хранится сразу несколько иконок, можно задавать их размеры через пробел. Ключевое слово any указывает, что иконка может масштабироваться до любого размера, например, если она хранится в векторном формате SVG.

Пора ли отправлять ICO на свалку?

Как я уже сказала, формат ICO сегодня уже можно считать устаревшим, но значит ли это, что от него нужно срочно избавиться? Ответ, как всегда, неоднозначный. Есть случаи, когда формат ICO ещё может сослужить вам хорошую службу. Приведу несколько примеров оправданного использования фавикона в формате ICO в разных операционных системах и поговорим об альтернативах.

Windows

Начнём, пожалуй, с Windows.

До 11 версии формат PNG в IE не поддерживался, поэтому для IE10 и более младших версий по-прежнему необходимо использовать формат ICO. А вот с IE11 смело можно переходить на PNG. Для устаревших браузеров Microsoft рекомендует размеры 16х16, 32х32 и 48х48 для фавиконов формата ICO.

Начиная с IE9, сайты получили возможность быть закрепленными в меню и панели задач, а с приходом IE11 и Windows 8.1 появилась возможность создавать закрепленные сайты в виде живых плиток. По умолчанию изображением на плитке будет фавикон, но только не для больших и широких плиток, для которых нужно задавать изображение специального размера. Сделать это можно следующими способами: добавив теги метаданных в разметку веб-страницы или файл конфигурации браузера.

Сначала давайте рассмотрим первый способ.

Определение фавикона в устройствах Windows с помощью метаданных в :

Если мы хотим указать иконки для больших плиток, это можно сделать с помощью следующих метаданных:

Можно указать цвет фона плитки:

Можно указать имя закрепленного сайта:

Если нет этих метаданных, то в качестве имени используется значение в :

square70x70logo, square150x150logo, wide310x150logo, square310x310logo — элементы, внутри которых объявляются изображения для различных размеров плитки.

Microsoft рекомендует брать больший размер изображений в целях поддержки экранов с высокой плотностью пикселей. Желательно, чтобы размер исходного изображения примерно в 1.8 раза превышал размер целевой плитки, чтобы его можно было увеличивать и уменьшать. Например, для 70х70 рекомендуемый размер 128х128, а для широкой плитки 310×150 исходное изображение имеет размер 558×270.

Если плитка сайта статическая, то вышеперечисленных элементов будет достаточно. Если же предполагается динамическая плитка, то необходимо добавить элемент . Этот элемент может включать в себя до 5 элементов

, содержащих в атрибуте src пути к соответствующим xml-файлам уведомлений. Также внутри этого тега содержится элемент , значение которого указывает в минутах интервал между обращениями к сайту за обновлением уведомлений, то есть живая плитка будет обновляться каждые, например, 30 минут. Да, значение не произвольное, а только 30, 60, 360, 720 или 1440.

Наконец, есть внутри тега еще элемент , отвечающий за способ повторения уведомлений (может принимать значения от 0 до 7). Шаблоны доступны только для средних, широких и больших плиток.

Новый интерфейс Metro предлагает несколько новых принципов дизайна, например, «белые силуэты», используемые большинством предустановленных программ.

С помощью платформы уведомлений Windows сайт может за один раз показывать на плитке до пяти текстовых сообщений или сообщений с изображениями, которые циклически сменяют друг друга. Не будем подробно останавливаться на этих xml-файлах уведомлений. Существует множество шаблонов живых плиток, вот один из них:

То, что написано в кавычках в атрибуте template — название шаблона. Этот шаблон содержит изображение и небольшой текст. Используется для больших изображений и средних названий. На самом деле, подобных шаблонов очень много: и просто c текстом, и просто с изображением, и с несколькими изображениями, и с несколькими строками текста, и так далее. Большинство шаблонов изображения или текста размещают текст на той же плитке, что и изображение. Но шаблоны с Peek в названии выполняют переключение между изображением и текстом на плитке.

Читать еще:  Как часто можно принимать найз

Подробнее о шаблонах можно узнать на официальном сайте.

Mac OS

В Mac OS особо не разгуляешься, к сожалению. Если сохранить сайт на рабочий стол в Mac OS, то значок будет отображаться как скриншот страницы с html кодом. Просто так сайт приложением в Mac OS не сделать, но и не будем.

Safari — вот где нам пригодится формат SVG. Чтобы использовать SVG, необходимо указать атрибут rel со значением mask-icon, все элементы SVG должны быть черного цвета. Но не стоит пугаться, цвет можно поменять атрибутом color. Эта SVG-иконка нужна для закрепления вкладки в Safari. А цвет при наведении будет таким, какой мы указали в атрибуте color.

Если не указывать эту иконку, то браузер будет отображать первую букву домена нашего сайта.

Вспомнила еще один случай, где нам еще может пригодиться формат ICO. Поисковик Яндекс вставляет фавикон в поисковой выдаче рядом с заголовком сайта. Что, безусловно, увеличит привлекательность сниппета и, как следствие, кликабельность.Яндекс рекомендует использовать для этих целей формат ICO.

Safari в iOS вообще не отображает favicon во вкладках, но использует их для закладок, так же как и в Mac OS. В iOS пользователи могут добавить сайт на рабочий стол, и оно будет выглядеть как нативное приложение. Эти ссылки отображаются в виде значков и называются Web Clips.

Для этого нужно добавить rel=«apple-touch-icon» и указать размер с помощью атрибута sizes. Каждое устройство нуждается в своем размере иконки. Так как iOS устройств довольно много, и каждое устройство имеет свое разрешение экрана, спецификация, разработанная Apple, поддерживает возможность указать несколько тегов с иконками разных размеров.

Если значок не соответствует рекомендуемому размеру устройства, используется самая близкая по размеру иконка большего размера, нежели рекомендуемый. Когда пользователь заходит на ваш сайт с iOS устройства, запрашиваются файл apple-touch-icon-precomposed.png, который должен быть оформлен в стиле iOS: закругленные углы, блики, и тень. Если файла с таким названием в корне проекта или rel=«apple-touch-icon-precomposed» нет, будет запрошен apple-touch-icon.png, которому разрешено быть таким, какой он есть, а все эффекты будут наложены самим iOS. Соответственно, нужна иконка под каждый размер. А вот если нет и этих файлов, то на рабочем столе iPhone или iPad будет отображаться не красивая иконка, а миниатюра страницы — ее скриншот.

Ходят слухи что Blackberry будет тоже использовать rel=«apple-touch-icon-precomposed», но возможности проверить, к сожалению, не было.

Подробнее прочитать про актуальные размеры для устройств iOS можно на официальном сайте.

Некоторые могут возразить, что все 9 изображений не очень и нужны. Однако, по крайней мере, основная Apple Touch Icon должна быть 180х180. Остальные устройства могут уменьшить изображение. Но некоторые другие платформы тоже используют Apple Touch Icon, поэтому лучше их объявить.

Как бы странно это не звучало, устройства под iOS не единственные, которые ищут Apple Touch Icon. Поскольку они популярнее и встречаются чаще других PNG иконок высоких разрешений, некоторые браузеры, вроде Android Chrome, используют их. Таким образом, лучше их объявлять, это позволит посетителю с совместимым устройством или браузером использовать одну из этих иконок.

В iOS можно указать заголовок веб-приложения. По умолчанию используется значение тега . Чтобы задать другой заголовок, добавьте метатег на веб-страницу:

Кстати, можно даже установить стиль строки состояния для веб-приложения:

Можно поменять её цвет, можно сделать полупрозрачной. Это тоже повлияет на вид нашего сайта.

Android

Устройства на Android отлично понимают формат PNG, а ещё поддерживают манифест веб-приложения manifest.json, в котором можно прописать все параметры того, как будет вести себя сайт, если его установить на домашний экран. Этот манифест пока, к сожалению, не читают устройства под IOS. А если Android не найдет этот файл, то он будет использовать apple-icon-touch.

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

Ключ name определяет подпись в приложению на домашнем столе. Если этот параметр не указан, подпись будет взята из в ;

Ключ short_name определяет укороченную подпись для приложения, если не хватает места для полного имени;

Ключ icons — определяет массив объектов иконок, может принимать три значения: sizes, src, type;

Ключ theme_color определяет цвет строки состояния. Начиная с 39 версии хрома для Android Lollipop появилась возможность менять цвет интерфейса браузера и цвет вкладки браузера.

Задать цвет можно и через , добавив следующий мета-тег:

Ключ background_color определяет цвет фона для веб-приложения на домашнем столе. Этот же параметр отвечает за то, какой цвет будет иметь фон приложения, когда он открывается, т.е. манифест загрузился, но ещё не загрузились стили;

Ключ display определяет режим отображения веб-приложения. Например, значение standalone, которое мы указали, позволило открывать нам сайт как приложение.

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

Автоматизация

В заключение нужно сказать, что все, что мы рассмотрели в рамках данной статьи, не обязательно писать руками, не забывайте про автоматизацию. Существуют сайты, на которых можно быстро сгенерировать все необходимые нам размеры и форматы favicon: realfavicongenerator.net, а при необходимости можно заодно сгенерировать код.

Есть пакеты для сборки и для Gulp, и для Grunt.

Главное помнить, что сегодня favicon — это больше, чем иконка в адресной строке и закладке браузера.

Ссылка на основную публикацию
Adblock
detector