Создание значков ico: Как создавать иконки сайтов в 2022 году — всё о favicon / Хабр

Свой значок для сайта

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

Фавиконки в 2021 году

В 2021 году мы можем использовать SVG-значки в качестве фавиконки. Минимальный код, который следует размещать в head страницы.

<meta name="theme-color" content="#ffffff">
<link rel="icon" href="favicon.svg">
<link rel="mask-icon" href="mask-icon.svg" color="#000000">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="manifest" href="manifest.json">

Первая строчка meta с именем theme-color требуется для цвета значка в Chrome и Android.

Для старых браузеров можно использовать файл favicon.ico размером 32×32 в корне веб-сайта. Описание файла ниже в старой версии статьи.

Все остальные значки необязательно размещать в корне сайта.

Файл favicon.svg (имя может быть любым) является векторным. Размер не важен. Указывать тип type=»image/svg+xml» теперь не нужно.

Одним из преимуществ SVG-значка является то, что вы можете изменить цвет с помощью CSS. При использовании медиа-запроса

prefers-color-scheme цвет вашего значка меняется в зависимости от тёмного или светлого режима пользователя. Этот метод не будет работать со mask-icon, так как цвет указан в атрибуте, но Safari добавляет белый фон, если контраста недостаточно.

<svg xmlns="http://www.w3.org/2000/svg">
    <style>
        path {
            fill: #000;
        }
        @media (prefers-color-scheme: dark) {
            path {
                fill: #fff;
            }
        }
    </style>
    <path fill-rule="evenodd" d="M0 0h26v16H0z"/>
</svg>

Файл apple-touch-icon.png с атрибутом apple-touch-icon нужен для значка на IOS-устройствах, а также для «ИзбранноеЭ на странице новой вкладки в браузере.

Вам нужен только размер 180×180, и атрибут sizes лишний.

Файл manifest.json предоставляет информацию о вашем веб-приложении или веб-сайте. Значок используется в Android и Chrome. Нужен только самый большой размер 512×512. Приблизительное содержание файла:

{
    "name": "Starter",
    "short_name": "Starter",
    "icons": [{
        "src": "google-touch-icon.png",
        "sizes": "512x512"
    }],
    "background_color": "#ffffff",
    "theme_color": "#ffffff",
    "display": "fullscreen"
}

Значок для сайта в 2017 году. Старая версия

Что такое значок веб-сайта и для чего он нужен? Для этого нам придётся вернуться в прошлое и вспомнить историю. Раньше все браузеры обозначали веб-страницы одинаковыми значками, например, в Internet Explorer это буква «e», которую опоясывает орбита на фоне листа бумаги, а у Firefox на значке изображена огненная лиса, которая обнимает земной шар. Но, каждый владелец сайта хочет использовать свой собственный значок, чтобы визуально отличаться от остальных сайтов в интернете.

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

Чтобы указать значок, соответствующий странице, достаточно прописать в разделе HEAD страницы следующее:

<link rel="shortcut icon" href="адрес значка" type="image/x-icon">

Вместо слов адрес значка необходимо указать URL-путь к файлу значка.

В данном примере тег link используется для указания отношений: ссылка указывает на значок для ярлыка страницы. Указание это обязательно, поскольку с помощью тега link могут указываться адреса не только значков, но и других объектов (например, стилевые таблицы). Регистр слов «shortcut icon» не важен; их можно записывать как строчными, так и заглавными буквами.

Слово type служит для указания MIME-типа. В данном случае «image/x-icon» означает формат файла, содержащий значок в формате Microsoft Windows. Такие значки понимают практически все браузеры, способные отображать значки сайтов. Если к странице подключён значок другого типа, и браузер не умеет отображать значки указанного типа, то он не станет и пытаться скачивать значок из Сети.

Теперь поговорим об особой роли файла favicon.ico. Слово Favicon («значок для Избранного»; происходит от слов «Favorites Icon» , обозначающих значки для папки с закладками или избранных ссылок) возникло благодаря Internet Explorer. Большинство браузеров, если не находят ни одного тега link, который соответствовал бы значку, то полагают, что у страницы нет собственного значка, и поэтому используют для неё стандартный значок страницы (свой для каждого браузера, о чем уже говорилось выше). Но Internet Explorer дополнительно пытается найти в корне сайта файл с кодовым именем

favicon.ico, чтобы использовать этот значок. Некоторые веб-мастера решили вообще отказаться от тега link, просто поместив значок favicon.ico в корень сайта.

На самом деле они совершили опрометчивый поступок, поскольку использование тега link даёт следующие преимущества:

• файл со значком можно назвать как угодно, а не только favicon.ico
• можно назначить много разных значков нескольким разделам сайта, а не только один и только всему сайту сразу
• если значок не прописан в , то его не увидят другие браузеры (Firefox, Netscape, Konqueror, Opera)

Примечание: Кстати, исходя из вышесказанного, рекомендация размещать файл с именем

favicon.ico в корне веб-сайта с последующим указанием на него в теге link выглядит опрометчивой, поскольку, если потом возникнет надобность отменить для одной из страниц указание нестандартного значка, то просто убрать соответствующий link будет недостаточно: Internet Explorer продолжит по-прежнему успешно находить favicon.ico в корне сайта. В этом случае придётся переименовывать файл favicon.ico и изменять код во всех остальных страниц веб-сайта, а не только той одной, для которой захочется отменить указание значка.

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

Теперь поговорим о формате значков ICO. ICO-файл содержит один или несколько значков, размер и цветность каждого из которых задаётся отдельно. Данные значков хранятся в несжатом виде, то есть цвет каждой точки значка кодируется независимо, и объём файла поэтому получается довольно-таки большим.

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

Значки бывают либо в естественном цвете (True Color), либо с фиксированной палитрой (из двухсот пятидесяти шести, шестнадцати, или всего из двух цветов).

Размер 16×16 является основным стандартным размером значка веб-сайта. Для браузера Internet Explorer 5.0 значок 16×16 является обязательным: если IE5 не обнаружит в файле значок 16×16, файл значка окажется проигнорирован браузером. Internet Explorer отображает значки 16×16 для ярлыков веб-сайта, создаваемых пользователм, в собственном меню «Избранное». Кроме того, благодаря интеграции Internet Explorer и Windows, перетаскиванием в другие окна ярлыки 16×16 могут быть созданы в области быстрого запуска на панели задач («Quick Launch») или в меню «Пуск > Программы». Ярлыки, созданные перетаскиванием в другие папки, тоже имеют размер 16×16 при просмотре папки в режимах «Мелкие значки», «Список» и «Таблица». После перехода по любому из этих ярлыков Internet Explorer начинает отображать значок 16×16 и в поле адреса страницы, слева от её URL. Всё вышеописанное верно только для страниц, находящихся в интернете — и не работает для локальных страниц.

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

Остальные браузеры отображают значок 16×16 в строке адреса независимо от наличия или отсутствия сайта в «избранном» или «отмеченном» списке.

Mozilla Firefox и IE8 поддерживают открытие нескольких закладок в одном окне, отображая значки веб-сайтов на корешках таких закладок. Это чрезвычайно удобно, поскольку позволяет быстро ориентироваться при выборе закладки.

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

Если стоит выбор между сохранением значка 16×16 либо в естественном цвете (True Color), либо в формате с фиксированной 256-цветной палитрой, то какой выбор следует сделать и почему? Следует выбрать естественный цвет, поскольку в данном случае именно это позволит сократить объём файла.

Наряду с основным размером значка 16×16, существует ещё пара стандартных размеров — 32×32 и 48×48. Эти крупные значки используются операционной системой Windows для представления ярлыков страниц интернета на рабочем столе, а также при просмотре папки в режиме «Крупные значки».

К сожалению, такое использование значков сайта построено на тесной интеграции браузера и операционной системы, поэтому оно начинается только в том случае, если ярлык (URL-файл) был создан перетаскиванием из Internet Explorer. Какой размер будет использован — 32×32 или 48×48? Это зависит от настроек свойств экрана — вкладка «Эффекты», группа «Параметры отображения», пункт «Использовать крупные значки». Если этот пункт включён, то 48×48, иначе 32×32. Использование значков размером 48×48 популярно на дисплеях улучшенной разрешающей способности, где значки 32×32 уже слишком мелки.

Если в файле значка отсутствует изображение, соответствующее необходимому системе размеру, то будет выбрано наиболее подходящее из них, а потом растянуто (или сжато). Такие значки выглядят размазанными, что довольно-таки некрасиво (тем более это верно для тех значков, некоторая часть изображения которых прозрачна, и сквозь неё просвечивает фон рабочего стола).

Исходя из вышеприведённых соображений, в каждом из ваших ICO-файлов должно присутствовать по крайней мере три значка: один 16×16, один 32×32, и один 48×48. Тогда и значки всех размеров будут в наличии, и вид их не окажется искажён.

Дополнительные возможности

Может ли значок быть не в формате ICO, а в каком-нибудь другом формате — например, в анимированном GIF? Да, может, если браузер поддерживает подобное. Для этого достаточно изменить MIME-тип и указать адрес GIF-файла:

<link rel="shortcut icon" href="адрес значка.gif" type="image/gif" />

Браузеры, которые понимают GIF-значки сайтов (например, Mozilla) будут демонстрировать анимацию в строке адреса, слева от URL, а также во всех остальных местах, где ими отображаются значки. Браузеры типа Internet Explorer 6 просто не станут скачивать значок этого типа. Именно поэтому следует указывать тип.

Можно ли сделать так, чтобы значок был анимированным GIF там, где это возможно, а в остальных браузерах оставался неподвижным ICO-изображением? Такой эффект будет достигнут, если указать два link-тега подряд, один за другим:

<link rel="shortcut icon" href="адрес значка. ico" type="image/x-icon" />
<link rel="shortcut icon" href="адрес значка.gif" type="image/gif" />

Браузер всегда берёт последний из указанных значков — при том условии, что понимает тип значка. Таким образом, понимающие GIF возьмут GIF, остальные возьмут ICO.

Этот трюк работает и со значками нестандартных форматов — таких, как MNG. Такие значки надо всегда указывать последними — а перед ними приводить, как минимум, ICO-версию.

ICO-версия должна указываться всегда, поскольку значки других MIME-типов не пригодны для оформления ярлыков Microsoft Windows (URL-файлов), а это необходимо и на рабочем столе, и в других папках.

Значки для iPhone, iPad

В связи с популярностью устройств от компании Apple стала актуальной создания значков для iPad и iPhone. Когда пользователь в Safari выбирает команду Добавить в «Домой» на рабочем столе устройства появляется значок. Для этой цели необходимо создать картинку в формате PNG с размерами 72×72 пикселей для iPad и 114×114 пикселей для iPhone 4. После этого необходимо прописать:

<link rel="apple-touch-icon" href="/icon.png" />

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

Если вы не хотите подобных эффектов для своего значка, то используйте другую запись:

<link rel="apple-touch-icon-precomposed" href="/icon-precomposed.png" />

HTML5

С появлением HTML5 стало возможным использовать новый атрибут sizes. И теперь можно встретить такую запись.

<link rel="icon" type="image/png" href="/favicon-32x32.png">

В этом примере используется значок размером 32 на 32. Иногда создаётся целый список подобных записей для разных размеров, которые могут использоваться разными браузерами.

В дополнение. Можно использовать разные размеры значков.

<link rel="icon" href="/favicon.ico">

Программы для создания ICO-файлов

Многие графические редакторы и специализированные редакторы значков позволяют создавать или конвертировать картинки в значки.

Не забывайте о том, что фиксированная палитра не обязана состоять из системных цветов. Поэтому значки 32×32 и 48×48 следует сохранять, по крайней мере, в 256-цветной палитре, поскольку в True Color они будут занимать слишком много места, а грамотный подбор палитры способен сделать ограниченность количества цветов практически незаметной.

Также вы можете воспользоваться различными онлайн-сервисами, которые позволяют загрузить на сайт нужный значок или PNG-файл и получить готовый значок для вашего веб-сайта:
www.favicon.cc/
www.favico.com
FavIcon Generator
Genfavicon

Дополнительная информация

Добавляем favicon в WordPress
Какие нужны фавиконки

Реклама

Выбираем правильный размер и формат иконок

Для каждой операционной системы существуют свои стандартные размеры иконок. Кликните на названии операционной системы, чтобы прокрутить страницу вниз к интересующему разделу.

Windows	16×16, 24×24, 32×32, 48×48, 256×256
Mac OS X	16×16, 32×32, 64×64, 128×128, 256×256, 512×512, 1024×1024
Linux	16×16, 24×24, 48×48, and 96×96
iOS 6	29×29, 50×50, 57×57, 58×58, 72×72, 100×100, 114×114, 144×144, 1024×1024
iOS 7	29×29, 40×40, 58×58, 60×60, 76×76, 80×80, 120×120, 152×152, 1024×1024
Android	36×36, 48×48, 72×72, 96×96, 512×512
Windows Phone	62×62, 99×99, 173×173, 200×200

 

Размеры иконок для Windows Vista, Windows 7 и Windows 8

Иконки приложений и иконки Панели управления

Иконки должны быть в формате . ico.
Полный набор должен включать следующие размеры:

• 16×16
• 32×32
• 48×48
• 256×256

Иконки для Windows 8 (Metro Design)

• Иконка приложения 30х30, 50×50, 150×150
• Иконки панели инструментов 26х26

Панель инструментов

Необходимые размеры: 16×16, 24×24, 32×32.
Помните, иконки должны быть плоскими даже в максимальном размере 32×32.

Диалоговые окна и помощники

Необходимые размеры: 32×32 и 48×48

 

Размеры иконок для Mac OS X

Иконка приложения

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

• 1024×1024
• 512×512
• 256×256
• 128×128
• 64×64
• 32×32
• 16×16

Панели инструментов

оздавайте иконки в стандартном и высоком разрешении (для мониторов с «Ретина» дисплеем). Необходимо подготовить два размера иконок:

• 32×32
• [email protected] (64×64)

Сохраняйте иконки в формате PNG.

Боковое меню

Создавайте иконки в трех размерах:

• 16×16
• 18×18
• 32×32 пиксела (если используете PDF)

Если вы сохраните иконки для бокового меню в формате PDF, что рекомендуется компаниемй Apple, OS X автоматически изменит размер вашей иконки для мониторов высокого разрешения. Если же вы сохраняете иконки в формате PNG, необходимо подготовить следующие размеры:

• 16×16
• [email protected]
• 18×18
• [email protected]
• 32×32
• [email protected]

 

Иконки для Linux

Размеры иконок согласно Руководству GNOME.

В Linux используются трехмерные иконки.

Жирным выделен основной размер для каждого типа иконок.

Объект и документ	24×24,48×48, and 96×96
Иконка приложения	24×24,48×48
Панель инструментов	24×24,48×48
Меню	16×16

 

iOS 6

iPhone и iPod Touch

Описание	Стандартное разрешение	Высокое разрешение (Ретина дисплей)
Иконка приложения	57×57	114×114
Настройки	29×29	58×58
Поиск	29×29	58×58
Иконка приложения для интернет магазина Apple	512×512	1024×1024

iPad

Описание	Стандартное разрешение	Высокое разрешение (Ретина дисплей)
Иконка приложения	72×72	144×144
Настройки	29×29	58×58
Поиск	100×100	50×50
Иконка приложения для интернет магазина Apple	512×512	1024×1024

 

iOS 7

iPhone и iPod Touch

Описание	Размер иконки
Иконка приложения	120×120
Настройки	58×58
Поиск	80×80
Иконка приложения для интернет магазина Apple	1024×1024

iPad

Описание	Стандартное разрешение	Высокое разрешение (Ретина дисплей)
Иконка приложения	76×76	152×152
Настройки	29×29	58×58
Spotlight Icon	80×80	40×40
App icon for the App Stores	1024×1024	1024×1024

 

Android

Иконка приложения

Интернет магазин Google	512×512
Очень высокое разрешение (xhdpi)	96×96
Высококе разрешение (hdpi)	72×72
Среднее разрешение (mdpi)	48×48
Низкое разрешение (ldpi)	36×36

Панель действий

Самое высокое разрешение (xhdpi)	96×96
Очень высокое разрешение (xhdpi)	64×64
Высокое разрешение (hdpi)	48×48
Среднее разрешение (mdpi)	36×36

 

Windows Phone

Минуточку внимания: советуем брать плоские иконки в нашем новом проекте Icons8. Их 35000 и ежедневно появляются новые.

Иконка приложения

Необходимые икнки в пакете XAP	Размер иконки
Иконка приложения	62×62
Плитка под иконкой приложения	173×173

Иконки для интернет магазина Windows

Icon	Size
Иконка приложения для мобильного интернет магазина Windows (маленькая)	99×99
Иконка приложения для мобильного интернет магазина Windows (маленькая)	173×173
Иконка приложения для настольного интернет магазина Windows	200×200

Как создать свои иконки для Windows?

В этой статье содержится информация по следующим темам: • Создать значок Windows из существующего изображения • Создание значков в стиле Windows с использованием объектов изображения

В этом разделе мы рассмотрим, как создавать значки Windows.

стандартная винда значки теперь включают следующие форматы изображений (серые форматы необязательны):

256×256 — RGB/A	64×64 — RGB/A	48×48 — RGB/A	32×32 — RGB/A	24×24 — RGB/A	16×16 — RGB/A
256×256 — 256с	64×64 — 256c	48×48 — 256c	32×32 — 256c	24×24 — 256c	16×16 — 256c
256×256 — 16c	64×64 — 16c	48×48 — 16с	32×32 — 16с	24×24 — 16с	16×16 — 16c

Проблема в том, что если просто сделать иконку и сохранить ее в стандартном формате Windows XP ICO, результирующий файл будет весить около 400Кб на диске. Решение состоит в том, чтобы сжать изображения. Сжимаются только изображения размером 256×256. Используемая схема сжатия — PNG (Portable Network Graphics), поскольку она имеет хороший коэффициент без потерь и поддерживает альфа-канал (прозрачность). На основании предварительных тестов размеры сжатых значков составляют от 100 до 150 КБ.

Чтобы получить больше информации о значках Windows, мы рекомендуем вам прочитать этот раздел: Знакомство с значками Vista

Создание значка Windows из существующего изображения

Ниже приведено пошаговое руководство по созданию сжатого значка Windows. с помощью Axialis IconWorkshop. Вы можете скачать 30-дневную пробную версию IconWorkshop здесь.

1. Создайте версию изображения значка размером 256×256 с помощью любого графического/векторного редактора. Сохраните свою работу с плавной прозрачностью (альфа-канал 32 BPP), используя формат файла, совместимый с Axialis IconWorkshop: BMP, PNG, JP2000, PSD.

Вы также можете перевести свою работу из Adobe Photoshop® с помощью подключаемого модуля переноса Axialis (см. этот учебник) или вы можете создать значок, собрав несколько объектов изображения (см. этот учебник).

В этой процедуре мы будем использовать этот файл: down.png (мы рекомендуем вам скачать его и сохранить на диске — щелкните правой кнопкой мыши и выберите «Сохранить объект как»). Вы также можете найти файл Librarian , папка « Objects/Pack 2 — Realistic Buttons 9″.0076 «. Если этот пакет объектов отсутствует в папке, вы можете загрузить его отсюда.

2. Запустите Axialis IconWorkshop и открыть файл изображения. Он загружается в окно документа изображения, а не в значок окно редактора, как показано ниже ():

3. Если масштаб-1:1 окно предварительного просмотра не в режиме 256×256, изображение предварительного просмотра будет обрезано. Рекомендуется переключиться в режим предварительного просмотра 256×256, если вы хотите для работы с Windows 256×256 иконки. Чтобы переключиться в этот режим, щелкните правой кнопкой мыши в окне предварительного просмотра, появится меню открывается. Выберите «Дисплей 256×256». Окно предварительного просмотра теперь выглядит, как показано выше, в плавающем режиме ().

Используйте тот же метод, чтобы вернуться к предыдущему состояние: выберите «Дисплей 128×128», удалите опцию «Плавающее окно» и используйте мышь для стыковки окно.

4. Выберите весь образ. Выберите Редактировать/Выбрать все или нажмите Ctrl+A. Анимированный выбор прямоугольник теперь рисуется вокруг изображения.

5. Выберите «Файл/Создать значок Windows® из выбранного». или нажмите «Я». Большой открывается диалоговое окно. Это диалоговое окно позволит вам создать все образы форматы, которые вы хотите включить в свою иконку, одним простым шагом:

6. Введите Имя проекта новой иконки (). По умолчанию предлагается корень файла изображения.

7. Выберите форматы изображений для включения в значок (), щелкнув значок изображений. Для создания окна значок, рекомендуется следовать инструкциям Windows спецификации, указанные выше. Не забудьте добавить винду 256×256 Форматы Vista в RGB/A (Windows® XP), 256 и 16 цветовых режимов ().

8. Создать полностью совместимая Windows icon, вам нужно будет сжать форматы 256×256 в PNG. Выберите связанный вариант ().

9. Вы можете также выберите применение параметра сглаживания к цветным изображениям 256/16, как а также добавить эффект фильтра, чтобы сгладить / повысить резкость полученных изображений в Режим RGB/А (). Просмотрите результаты на изображениях для предварительного просмотра.

10. По завершении нажмите ОК. Новый проект иконки созданный в окне документа:

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

12. Все доступные форматы отображаются в списке (). Вы можете выбрать их для редактирования () или предварительного просмотра () их. См. встроенная помощь приложения (нажмите F1) чтобы узнать, как добавлять/удалять форматы или работать с этим проектом значков.

13. Сжатый формат (только форматы 256×256 могут быть сжаты) отмечены этим наложение PNG сжатого изображения: . Вы можете добавить/удалить эту опцию, выбрав Формат рисования/сжатого изображения (Windows Виста) или через нажав «К». Ты можешь также используйте локальную панель инструментов или контекстное меню.

14. Когда закончите, сохраните значок, выбрав Изменить/Сохранить или нажав Ctrl+S.

Создание значка в стиле Windows с использованием пакетов объектов изображений Axialis

Ниже приведено пошаговое руководство по созданию сжатого значка Vista с помощью Axialis IconWorkshop и пакетов объектов изображений Axialis. Для этого руководства требуются следующие компоненты:

• Axialis IconWorkshop 6.01 или более поздней версии (загрузить 30-дневную пробную версию)

• Пакет объектов «Реалистичные кнопки» Axialis (загрузить пробный пакет)

стандартная винда значки теперь включают следующие форматы изображений (серые форматы необязательны):

256×256 — RGB/A	64×64 — RGB/A	48×48 — RGB/A	32×32 — RGB/A	24×24 — RGB/A	16×16 — RGB/A
256×256 — 256с	64×64 — 256c	48×48 — 256c	32×32 — 256c	24×24 — 256c	16×16 — 256c
256×256 — 16c	64×64 — 16c	48×48 — 16с	32×32 — 16с	24×24 — 16с	16×16 — 16c

Самый большой формат изображения 256×256 XP (т. е. RGB с альфа-каналом). Для достижения наилучших результатов мы начнем проект, используя этот новый формат, и будем работать с ним для сборки объектов. Когда закончите, мы создадим все остальные форматы, используя получившуюся графику 256×256 в качестве шаблона. Давайте создадим наш новый проект иконки:

1. Запустить Axialis IconWorkshop. Выберите File/New/Windows Icon Project или нажмите Ctrl+W . Откроется диалоговое окно:

2. Введите название проекта (): « Вниз «.

3. Теперь укажите формат первого изображения, добавляемого в проект: В Цвета выберите « XP с альфа-каналом (RGB/A 32 бита) » (). В Размер в пикселях выберите и » 256×256 (Vista) » ().

4. Поскольку мы хотим, чтобы формат 256×256 использовался в Windows, мы выберем его сжатие в виде специального файла PNG: Выберите параметр « Сжать формат Vista 256×256 » ().

5. По завершении нажмите OK . Создается новое окно проекта значка ():

6. Если окно предварительного просмотра в масштабе 1:1 не находится в режиме 256×256, изображение предварительного просмотра будет быть обрезанным. Мы рекомендуем вам переключиться в режим предварительного просмотра 256×256 для работы со значками Windows размером 256×256. Чтобы переключиться в этот режим, щелкните правой кнопкой мыши внутри окна предварительного просмотра, и откроется меню. Выберите » 256×256 Display «. Окно предварительного просмотра теперь выглядит так, как показано выше в « float mode » ().

Воспользуйтесь тем же методом, чтобы вернуться к предыдущему состоянию: выберите « 128×128 Display «, удалите « Floating» Окно » и используйте мышь, чтобы закрепить окно. Пришло время проявить творческий подход, который вы найдете легким и увлекательным с IconWorkshop. Прежде чем мы начнем, не забывайте, что каждый шаг создания может быть отменить/повторить до 16 шагов ( Ctrl+Z/Ctrl+Y ).

7. В окне Librarian (выберите View/Librarian , если оно не отображается) выберите папку » Objects/Pack 2 — Realistic Buttons/Circle » (). Если пакет еще не установлен, загрузите и установите его с этой страницы. Список доступных объектов отображается в окне содержимого ниже (). Найдите файл « Background — Green.png » и выберите его ().

8. Когда закончите, используйте мышь Перетащите , чтобы добавить его в проект, как показано выше (). Объект добавляется в проект как плавающее выделение (). Посмотрите на качество изображения в окне Масштаб 1:1 ().

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

ВАЖНО Чтобы выполнить следующие шаги, необходимо установить параметр « Сохранить прозрачность » (нажмите «T» или выберите Нарисовать/Сохранить прозрачность ). Если этот параметр не установлен, прозрачность не будет сохраняться при каждом добавлении нового объекта изображения, а уже добавленные объекты будут полностью заменены.

9. В библиотеке выберите файл « Inner Glow 2 — Black.png » и добавьте его в проект тем же способом. Результирующее изображение теперь включает эффект красного света, как показано ниже:

10. Из библиотеки добавить в проект файл « Border 01.png «:

11. 9 0076 Добавим стрелку. Выберите папку « Objects/Pack 2 — Realistic Buttons/Symbols » и добавьте в проект файл « Arrow Down.png »:

12. повысить реалистичность значка. В библиотеке выберите папку « Objects/Pack 2 — Realistic Buttons/Circle » и добавляем в проект файл « Glossy 04 .png «. Вот результат:

13. Последний штрих — тень под иконкой Добавим « Shadow Bottom 01 — Black.png «. Объект изображения по умолчанию помещается IconWorkshop на передний план. В нашем случае тень должна располагаться за иконкой. Функция позволяет сделать это в IconWorkshop: Нажмите на клавиатуре клавишу End . Теперь тень находится на заднем плане.0006

Готово! Полученное изображение должно выглядеть следующим образом:

Теперь, когда самое большое изображение готово (256×256 RGB/A), мы создадим из него все остальные форматы значков. Это делается за один шаг с помощью Axialis IconWorkshop Corporate Edition . При использовании Personal Edition вам необходимо создавать каждый формат вручную (дополнительную информацию см. в файле справки по продукту).

14. Выберите Нарисуйте/добавьте несколько форматов изображения из этого изображения или нажмите « V «. Откроется диалоговое окно:

15. Выберите форматы изображений для включения в значок ( / ), установив соответствующие флажки. Следуйте спецификациям, которые мы определили выше для значков Windows. Не забудьте сжать форматы изображений 256×256 ()

16. Вы также можете применить параметр сглаживания к цветным изображениям 256/16, а также добавить эффект фильтра для сглаживания/резкости полученных изображений в RGB. /Режим (). Просмотрите результаты на изображениях для предварительного просмотра.

17. По завершении нажмите OK . Новые форматы автоматически создаются и добавляются в проект ():

18. Полюбуйтесь своей работой 🙂 Нажмите на различные форматы () и увидите получившуюся иконку в масштабе 1:1 в окно предварительного просмотра (). Вы можете изменить яркость фона окна Масштаб 1:1, просто щелкнув в нем левой кнопкой мыши. Это позволит вам увидеть, как значок отображается на разных фонах с разными настройками яркости.

19. Сохраните значок: выберите Файл/Сохранить или нажмите Ctrl+S . Он будет сохранен в формате Windows ICO.

Создание персонализированных значков рабочего стола Windows

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

.ICO вариант №

Файл ICO содержит значок, обычно используемый для программы, файла или папки Windows. Он хранит один или больше изображений разных размеров, чтобы их можно было соответствующим образом масштабировать в зависимости от их использования. ICO-файлы аналогичен файлам .CUR, также используемым в Windows, и файлам .ICNS, используемым в macOS.

Все значки Windows (исполняемые) сохраняются в формате ICO. Они используются для всех видов компьютерных значков, таких как ярлыки, программы, каталоги или элементы в меню «Пуск». Иконки ICO могут содержать 8-битную прозрачность и цвет до 32-бит.

Какие изображения подходят для икон?

Обратите внимание, что значки представляют собой квадратные изображения различных размеров. Файлы ICO Windows обычно хранят изображения в диапазоне от от 16×16 до 256×256. Старые файлы ICO захватывают изображения только до 48×48, которые ранее были рекомендованы Windows. размеры. Однако большинство новых значков содержат изображения размером до 256×256. Рекомендуется хранить ваши иконки в самый большой возможный размер , то есть 256×256 пикселей . Таким образом, увеличивая и уменьшая рабочий стол всегда будет отображать значки с максимальным качеством.

Создайте свои собственные иконки

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

• PNG изображение (квадрат)
• Конвертер ICO

Нет необходимости загружать какое-либо дополнительное программное обеспечение на свой компьютер. Мы объясним, как легко это сделать, с помощью Img2Go — Конвертер PNG в ICO .

1. Перейти к Img2Go — PNG в файл ICO преобразователь.
2. Загрузите свое изображение или, если вы нашли его в Интернете, введите URL-адрес.
3. Укажите размер значка (Ширина, Высота). При желании примените к изображению цветовой фильтр, измените значение DPI, и т. д. 904:00
4. Нажмите «СТАРТ».

Через несколько секунд ваше изображение будет преобразовано и загружено автоматически. Это все, что вам нужно сделать. Только четыре простых шага. Без установки и сложных настроек.

НАКОНЕЧНИК PRO:

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

1. Перейти к инструменту преобразования изображений от Img2Go.
2. Перетащите файлы в область загрузки. Кроме того, используйте соответствующие кнопки для просмотра устройство, указать ссылку или использовать файлы, хранящиеся в Dropbox или Google Drive.
3. Выберите формат выходного изображения для параметров преобразования файлов и редактирования изображений.
4. Когда закончите, нажмите кнопку «Старт». Img2Go позаботится о преобразовании изображений за вас! 904:00

Как изменить значки рабочего стола Windows

Процесс изменения значков рабочего стола Windows и других программ по умолчанию одинаков во всех операционных системах Windows. 7, 8 и 10. Мы объясним, как это делается на Windows 10 .

Изменить основные значки Windows

1. Щелкните правой кнопкой мыши где-нибудь на рабочем столе и выберите «Персонализация» .