Icon ico что это

О формате ICO

Графический формат ICO применяется в Windows для системных значков, которыми тот или иной файл или формат файла обозначается в графическом интерфейсе. Обозначение ICO – сокращение от Icon (иконка, значок).

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

Формат ICO включает в себя не один файл значка, а целый набор. Дело в том, что в разных видах отображения показываются разные размерные варианты значка. Уменьшенный автоматически большой вариант может оказаться неразборчивым, а увеличенный маленький – размытым. Поэтому ICO – это файл, включающий в себя несколько размеров иконки.

Даже если размещать иконку на рабочем столе, при разном разрешении монитора одни и те же иконки могут казаться очень большими или недопустимо маленькими. При выборе оптимального стиля изображения Windows выбирает подходящие иконки из библиотеки.

Стандартная иконка имеет «квадратное» соотношение сторон. В файле ICO предполагаются следующие размеры: 16х16, 32х32 и 48х48 пикселей. Существуют и менее употребительные варианты, со стороной от 24 до 128 пикселей. Теоретически предельное допустимое значение стороны квадрата – 256 пикселей, однако на практике такие иконки употребляются редко. Некоторые файловые менеджеры способны масштабировать иконки (например, Total Commander). Пользователь компьютера обычно довольствуется стандартными иконками, которые поставляются с каждой программой. Но можно и украсить свой компьютер и упростить нахождение нужных файлов и папок, если сопоставить им отличающиеся иконки. Часто в файловых менеджерах есть собственный набор стандартных иконок, но можно и создать собственные.

Существует такая разновидность файла ICO, как Favicon. Она отображается в браузере как «иконка» веб-сайта. Для favicon установлен стандартный минимальный размер – 16х16 пикселей. Более подробно о иконке для сайта читайте в статье «Иконка сайта».

Конвертация

Бесплатный онлайн-конвертер поможет вам создать многовариантные иконки на основании ваших графических файлов. Убедитесь, что в вашем исходном файле выдерживается «квадратное» соотношение сторон. Если нет, его можно обрезать до нужного стандарта, размер изображения в этом случае не обязательно должен совпадать с размером желаемой иконки. Онлайн конвертер сам изменит размер по указанным настройкам.

Исходный файл может иметь практически любой формат (список поддерживаемых форматов). Рекомендуем позаботиться о том, чтобы исходный файл был максимально качественным. Это могут быть PSD, TIFF и другие файлы. Если ваша иконка – результат дизайнерских усилий в профессиональном графическом редакторе, рекомендуем использовать в качестве исходного файла непосредственно файл «родного» формата редактора.

Установите максимальное значение стороны иконки. Если вы её не установите, конвертер автоматически уменьшит файл до максимально допустимого значения – 256х256 пикселей.

Наш конвертер предлагает автоматически сгенерировать наиболее популярные варианты размера значка. При конвертации файла в формат ICO вы можете выбрать не только размеры значков, представленные в конечном файле, но и глубину цвета. Для иконок размера 256х256 пикселей она может составлять 32 бита, для меньших иконок она автоматически будет составлять 8 бит.

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

Добавление иконок для сайта в мультибраузерном и мультипплатформенном мире

От автора: раньше иконки для сайта были такими легкими. Простой растровый favicon.ico 16х16 пикселей. Это как знак препинания в конце проекта. Для разработчика это эквивалент завершения предложения с восклицательным знаком или точкой. Так было раньше. Но за прошедшие 20 лет все изменилось.

Что такое favicon?

Favicon – это маленький значок, помогающий идентифицировать страницу. Это часто забываемая концепция бренда для сайта. Они дополняют UX просмотра в нескольких ключевых местах. В зависимости от браузера и контекста они могут отображаться:

Рядом с именем сайта во вкладке браузера

В списке закладок

Как иконка запуска на домашнем экране устройства и десктопа

В самой адресной строке (я не уверен, но современные браузеры так не делают. Они отображают иконку во вкладке браузера)

Firefox показывает большие favicon на стартовом экране и маленькие во вкладке

Favicon традиционно ассоциировался с сайтом, но так как он добавляется через разметку, то на каждой странице можно поставить свой favicon, если хотите. Можно даже поставить отдельный favicon для всех запросов страницы.

Как правило, браузеры кэшируют favicon. Поэтому если вы планируете делать что-то забавное с несколькими favicon на сайте, кэширование нужно отключить. Один из способов – добавить временную метку в URL favicon.

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

Что такое формат favicon .ico (ICO)?

Прежде чем переходить к подробностям, давайте быстро разберем формат ICO.

ICO – формат изображений для отображения иконок. Он берет свои корни из первой версии Windows — Microsoft Windows 1.0 – выпущенной в 1985. По факту, это формат-контейнер для хранения одного и более файлов растровых изображений. Изначально файлы должны были быть в формате BMP. Позже появилась поддержка PNG.

В 1999 Microsoft добавила формат ICO в IE5, как способ создавать закладки и определять сайт – так родился favicon.

Изначально favicon в вебе был размером 16х16 пикселей, но со временем появилась поддержка разных размеров в ICO файле (32×32, 24×24, 48×48, 64×64, 128×128 и 256×256).

Возникает вопрос: если favicon.ico может хранить несколько размеров, то какие из них нужно использовать? Вернемся к этому скоро.

Как подключить favicon?

Зачастую термины favicon и иконка взаимозаменяемы. Однако favicon не обязательно должен быть формата ICO. Часто встречаются форматы GIF, PNG, JPG.

Начнем с самого старого и базового способа добавления favicon на сайт.

Размещение favicon.ico в корне сайта

Изначально Microsoft для Internet Explorer 5 разработала способ добавления favicon на сайт. Для этого нужно было сохранить файл иконки в корневой папке сайта с именем favicon.ico. Это все что требовалось, никакого HTML. Большинство браузеров до сих пор проверяют корневую папку на наличие файла favicon.ico.

Позже когда favicon стал частью стандартов HTML 4.01 и XHTML 1.0, рекомендовали использовать тег link для размещения favicon. Рассмотрим этот способ.

Подключение favicon через тег link

После добавления favicon в стандарты HTML, появился новый способ подключения через тег <link rel=»…»> в head документа. Favicon перестал ограничиваться корневой папкой сайта, теперь можно было указать любой путь.

Даже у такого простого предложения есть сложности. Атрибуты rel и type принимают разные значения. Например, все строки ниже будут работать:

Information about favicon.ico

The favicon.ico is a small icon found in the URL (uniform resource locator) address bar and on bookmarks created by web browsers.

For example, in the image above, there’s a small icon () in the front of the Computer Hope URL.

How can I create a favicon?

The favicon can be created using any free icon generator or in a free online favicon generator such as favicon.cc. The file favicon.ico must be 16×16 in dimension, set to 16 colors, and saved as a .ico file.

Finally, the file favicon.ico should be uploaded into the root directory on the server hosting your web page.

The favicon.ico file is the bare minimum every website and web page should have. However, having multiple versions of the favicon in different sizes and formats help make your icon look good on all devices and displays. Use the favicon.io free website to create, convert, a

Can the icon be animated?

Yes, if the icon generator you’re using to create the icon supports animation and the browser you’re using to view the web page supports it, this icon can be animated.

Can the file be named something else, other than favicon.ico?

Yes, in your HTML (hypertext markup language) code, add the tag below in the <head></head> section of your code.

This example would cause the browser to look for the favicon2.ico file and use it instead of the favicon.ico. If an older browser or a browser that does not support this feature is used, the tag is ignored.

The favicon can also be pulled from another website. For example, to use the Computer Hope favicon on your site, you could add the tag below in your <head></head> section.

Иконки

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

Пройдите тест из 10 вопросов и узнайте, какая дизайн-профессия подходит лично вам

Содержание

1. Зачем используют иконки в дизайне
2. Виды иконок
3. Форматы иконок для сайтов и приложений
4. Основные правила создания иконок для веб-дизайна
5. 5 лайфхаков по созданию дизайна иконок
6. Где скачать бесплатные иконки

Пример различного оформления одного и того же набора иконок. Автор — Liubov Osipenko. Источник

Узнайте, какой вы дизайнер, на бесплатном профориентационном проекте «Искра»

Зачем используют иконки в дизайне

Иконки в дизайне — это важный элемент, который выполняет разные задачи в зависимости от местоположения и замысла автора. Вот некоторые из них.

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

Узнайте, какой вы дизайнер, на бесплатном профориентационном проекте «Искра»

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

• Повышают конверсию. Они могут влиять на поведение и решения пользователей, увеличивая их доверие, лояльность и удовлетворенность. Например, иконки могут подтверждать успешное выполнение действия или давать положительный отзыв.

Главные тренды веб-дизайна в 2023 году

Виды иконок

Кажется, что эти маленькие картинки очень просты, незамысловаты и похожи друг на друга. Но на самом деле существует множество видов иконок. Их можно классифицировать по нескольким критериями, самыми важными из которых являются два — выполняемая функция и стилистика. Рассмотрим основные виды иконок с примерами.

Типы иконок по функции

• Информационные. Это иконки, которые передают какую-то информацию или сообщение пользователю. Например, иконка звездочки может означать, что поле обязательно для заполнения, а иконка восклицательного знака — что есть какое-то предупреждение или ошибка.
• Навигационные. Это иконки, которые помогают пользователю перемещаться по сайту или приложению. Например, иконка гамбургера может открывать меню навигации, а иконка стрелки — возвращать на предыдущую страницу или экран.
• Интерактивные. Это иконки, которые запускают какое-то действие или функцию при нажатии или наведении. Например, иконка корзины может добавлять товар в список покупок, а иконка сердечка — ставить лайк или добавлять в избранное.
• Брендовые. Это иконки, которые представляют какой-то бренд, компанию или продукт. Они могут быть частью логотипа или фирменного знака. Например, иконка яблока — это символ компании Apple.
• Иллюстративные. Это иконки, которые изображают какой-то объект, сцену или персонажа. Они могут быть детализированными или стилизованными. Например, иконка домика может иллюстрировать раздел о недвижимости, а иконка смайлика — раздел о настроении.

Кто такой коммерческий иллюстратор и чем он занимается

• Метафорические. Это иконки, которые используют какую-то метафору или ассоциацию для передачи смысла или эмоции. Они могут быть абстрактными или символическими. Например, иконка лампочки может означать идею или творчество, а иконка сердца — любовь или здоровье.
• Декоративные. Это иконки, которые не несут в себе какого-то смысла или функции, а просто украшают дизайн или подчеркивают стиль. Например, рекламный баннер может быть украшен иконками цветка, но на них не акцентируется внимание, они просто украшают фон.

Типы иконок по стилю

• Плоские иконки. Это иконки, которые не имеют объема, теней, градиентов или других эффектов. Они состоят из простых геометрических форм и однотонных цветов. Они выглядят минималистично и современно.

• Линейные иконки. Это иконки, которые состоят только из контуров без заливки. Они могут быть одноцветными или многоцветными. Они выглядят легко и элегантно.
• 3D-иконки. Это иконки, которые имитируют трехмерный объем с помощью теней, света, перспективы и других эффектов. Они могут быть реалистичными или карикатурными. Они выглядят динамично и привлекательно.

• Фотореалистичные. Это иконки, которые стремятся к максимальному соответствию реальности с помощью деталей, текстур, света и тени. Они могут быть созданы с помощью фотографии или 3D-моделирования. Они выглядят реалистично и импрессионистично.
• Рисованные от руки. Это иконки, которые создаются с помощью ручных инструментов, таких как карандаш, кисть или маркер. Они могут быть аккуратными или небрежными. Они выглядят творчески и оригинально.

• Минималистические. Это иконки, которые стремятся к минимальному использованию элементов дизайна, таких как формы, цвета и линии. Они могут быть плоскими или линейными. Они выглядят чисто и современно.
• Ретро-иконки. Это иконки, которые имитируют стиль прошлых эпох или культур. Они могут использовать винтажные цвета, шрифты, узоры или формы. Они выглядят ностальгически и эклектично.

Конечно, это далеко не весь перечень видов этих маленьких картинок. Например, еще их можно классифицировать по тематике пака:

• социальные сети;
• бизнес;
• интернет-маркетинг;
• аналитика;
• наука;
• инновации;
• животные;
• бытовая техника;
• детские товары и т.д.

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

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

Растровые форматы, такие как PNG или JPG, не рекомендуются для иконок для сайтов, так как они теряют качество при масштабировании и не поддерживают прозрачность. Однако, если вы все же хотите использовать растровые иконки, то убедитесь, что они имеют достаточное разрешение и сжаты для уменьшения размера файла.Единственным исключением является favicon — маленькая иконка, которая отображается рядом с адресом сайта в браузере. Для favicon обычно используется формат ICO, который поддерживает разные размеры и глубину цвета в одном файле. Вы можете создать favicon из любого изображения с помощью специальных генераторов или конвертеров.

Основные правила создания иконок для веб-дизайна

• Иконки должны соответствовать цели и контексту применения. Перед началом работы четко определите, на каком ресурсе будут использоваться иконки (какова тематика сайта или приложения, цветовая схема), а также в каких блоках они будут находиться и с какой целью (например, в блоке преимуществ с целью убедить пользователя обратиться в компанию). Исходя из этого, выбирайте стилистику, настроение и цвет иконок.
• Иконки должны быть простыми, читаемыми и узнаваемыми. Избегайте излишних деталей, сложных форм и неоднозначных символов. Используйте привычные образы, которые соответствуют теме и функции иконок. Чтобы не создавать образы с нуля, вы можете вдохновиться работами других дизайнеров на одной из площадок, где они их демонстрируют, например Behance или Dribble.
• Иконки в наборе должны быть согласованными и гармоничными. Следуйте одному стилю, цветовой схеме, типу линий и теней для всех иконок. Например, если вы решили использовать тонкую прерывистую линию для изображения границ значков, то все значки в вашем наборе должны иметь такие границы, то есть не добавляйте экземпляры с толстыми сплошными линиями. Также учитывайте пропорции, углы и отступы между элементами иконки. Используйте сетку для выравнивания и масштабирования иконок, чтобы они были симметричными.

• Иконки должны быть адаптивными и оптимизированными. Проверяйте, как ваши иконки выглядят на разных устройствах, разрешениях и платформах. Используйте векторный формат (например, SVG), который позволяет изменять размер иконок без потери качества. Сжимайте файлы иконок для ускорения загрузки сайта.
• Иконки должны быть информативными и функциональными. Подумайте, какую цель вы хотите достичь с помощью иконок: привлечь внимание, упростить навигацию, повысить конверсию или что-то еще. Добавляйте подписи или подсказки к иконкам, если это необходимо для понимания.
• Тестируйте и получайте обратную связь. Проверяйте свои иконки на разных устройствах и в разных ситуациях, чтобы убедиться в их качестве и эффективности. Спрашивайте мнение других людей, особенно потенциальных пользователей, о том, как они воспринимают и понимают ваши иконки.

5 лайфхаков по созданию дизайна иконок

Дизайн иконок — это творческий процесс, в котором есть свои хитрости, которые помогают выполнить работу быстрее и качественнее. Делимся некоторыми из них ниже.

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

• Используйте копирование и отражение. Копирование и отражение — это простой способ создавать симметричные и сложные формы без лишних усилий. Вы можете копировать и отражать части иконок по горизонтали или вертикали, а также комбинировать разные формы для создания новых.
• Используйте операции с фигурами. Операции с фигурами — это функция, которая позволяет вам объединять, вычитать, пересекать или разделять разные фигуры для создания новых в графических редакторах, например Adobe Illustrator. Вы можете использовать эту функцию для создания сложных или оригинальных форм из простых.
• Используйте цветовые палитры и градиенты. Цветовые палитры и градиенты помогут вам подобрать гармоничные и модные цвета для ваших иконок, а также создать объем и настроение. Вы можете использовать готовые цветовые палитры или градиенты из библиотек или ресурсов, или создавать свои собственные.

Как изменить цвет объекта в Photoshop

Где скачать бесплатные иконки

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

Flaticon — самая большая база бесплатных иконок для любого проекта. Вы можете скачать иконки в форматах PNG, SVG, EPS, PSD и CSS. Вы также можете редактировать цвет и размер иконок, создавать коллекции и использовать плагин для Google Workspace.

Freepik — сайт с более 900 тысячами бесплатных иконок в форматах PNG, EPS и SVG. Вы можете найти иконки по разным категориям, таким как еда, бизнес, спорт и т.д.Icons8 — сайт с более 1,2 миллионами бесплатных векторных иконок в форматах SVG и PNG. Вы можете выбрать стиль иконок, такой как плоский, линейный или 3D, а также настроить цвет и размер.

Каталог иконок на сайте Icons8. Источник

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

Станьте тем, кто делает интернет-серфинг приятнее. Научитесь придумывать крутые сайты, отличающиеся от однотипных конструкторов — от стильных иконок до продуманного UX/UI. И получите опыт, который поможет начать карьеру.