Как называется файл иконки
Обновлено: 04.07.2024
С понятием ярлыка хорошо знакомы все пользователи Windows. Ярлык — это небольшой графический объект файловой системы, содержащий ссылку на некий файл или папку. Также ярлык может содержать различную служебную информацию — тип, аргументы, горячие клавиши, путь к целевому объекту и значку, начальное состояние окна и тому подобное. В Windows ярлыки обычно используются для запуска программ с рабочего стола.
Также ярлыки могут создавать сами пользователи путем перетаскивания целевого объекта в нужное расположение с зажатой Alt или указанием пути либо команды в окошке мастера создания ярлыка.
LNK-ярлыки
Если вы внимательно читали первый абзац, то, наверное, обратили внимание на упомянутом нами некоем типе. Да, в Windows существует несколько типов ярлыков. Ярлыки, традиционно расположенные на рабочем столе и используемые для запуска установленных программ, являются самыми распространенными. Они имеют расширение LNK и используют интерфейс IShellLink — особый механизм для работы с данным типом объектов файловой системы. Область применения LNK -ярлыков обычно ограничивается созданием ссылок на файлы, каталоги, реже апплеты классической панели управления.
URL-ярлыки
Данный тип ярлыков используется для открытия определенных веб-ресурсов в интернете. URL -ярлыки имеют простую структуру, а их содержимое обычно ограничивается определяющим тегом InternetShortcut и полным адресом ресурса. Дополнительно URL -ярлыки могут содержать путь к иконке или содержащему иконку файлу, горячие клавиши и метаинформацию. Расширение ярлыки интернета имеют URL , гораздо реже встречаются ярлыки с расширением WEBSITE . Двойной клик по таким объектам запускает браузер по умолчанию.
PIF-ярлыки
Ярлык, используемый для запуска программ MS-DOS. По назначению PIF -ярлыки близки к ярлыкам LNK , но в отличие от последних не нуждаются в посредниках вроде интерфейса IShellLink, а запускаются напрямую. Их содержимое представлено путем к исполняемому файлу, инструкциями для исполнения DOS-приложения в среде Windows и различными метаданными — сведениями об используемых шрифтах, дату создания и модификации и прочее. PIF -ярлыки пользовались популярностью в ранних версиях Windows, сегодня встречаются редко, иногда под ярлыки PIF маскируются вирусы, так что будьте осторожны, если встретите такой файл в интернете.
Ярлыки APPREF-MS
Шанс столкнуться с ярлыком, имеющим расширение APPREF-MS , у рядового пользователя весьма невелик. Создаются такие ярлыки для приложений ClickOnce и служат для подключения к серверу, на котором располагается приложение. Содержат адрес сервера и токен для запуска удаленной программы.
SHB-ярлыки
Так называемый ярлык документа, разработанный Microsoft и используемый для открытия файлов документов в Windows с помощью библиотеки shscrap.dll . По структуре и назначению близок к LNK , но встречается намного реже. Содержимое представлено путем к целевому объекту и метаданными.
XNK-ярлыки
Этот тип ярлыков используется для быстрого открытия каталога или другого элемента в программе Microsoft Outlook. Создаются XNK -ярлыки путем перетаскивания объекта из почтового клиента на рабочий стол. Использовались XNK -ярлыки в старых версиях Outlook, шанс встретить их сегодня невелик.
Как включить отображение расширений ярлыков
В Windows, даже если вы включите отображение расширений файлов, расширения ярлыков останутся скрытыми. Это сделано для вашего удобства пользования ярлыками, но это же является потенциальной угрозой безопасности, поскольку под вполне невинным текстовым файлом может скрываться вредонос с «невидимым» расширением ярлыка.
Есть, однако, способ, позволяющий включить показ расширений ярлыков, хотя и не столь очевидный.
За скрытие расширений ярлыков в реестре отвечает текстовый параметр NeverShowExt с пустым значением. Если его удалить, соответствующее расширение станет видным. Единственная трудность в том, что вам придется найти экземпляры NeverShowExt вручную и удалить их.
Откройте редактор реестра, выделите мышкой раздел HKEY_CLASSES_ROOT (искать параметр нужно в нём) и нажмите F3 , чтобы вызвать окошко поиска. Поскольку другие элементы нам не нужны, отмечаем галочкой только пункт «Имена параметров» и запускаем процедуру поиска.
Удаляем параметры NeverShowExt в найденных ключах.
Предварительно создав резервную копию ключа (экспортировать).
А если что не удаляется, то и не трогаем.
Какой экземпляр за какой тип ярлыка отвечает, догадаетесь по названию. Например, параметр в ключе HKCR/lnkfile отключает показ расширений LNK -ярлыков, а тот же параметр в ключе HKEY_CLASSES_ROOT/piffile — за показ расширения ярлыков типа PIF .
Новые настройки должны вступить в силу после перезапуска Проводника, но может понадобится и перезагрузка компьютера.
Если вы хотите изменить значок по умолчанию для определенной папки или ярлык, который вы создали, вы можете спросить, где можно найти новые значки. Хотя существует множество веб-сайтов, предлагающих пользовательские наборы значков, вы, тем не менее, можете предпочесть использовать значки, которые уже найдены на вашем компьютере или устройстве с Windows 10. В этой статье мы покажем вам, где значки хранятся в Windows 10. Если вы хотите найти все файлы значков Windows 10 по умолчанию, читайте дальше.
Как хранятся значки Windows 10?
Иконки обычно хранятся внутри файлов ICO. Однако файлы ICO имеют большой недостаток: они могут содержать только один значок. В Windows 10 множество приложений, папок, файлов и ярлыков, и многие из них имеют свои уникальные значки. Если бы у Windows был файл ICO для каждого используемого значка, это привело бы к значительному числу файлов значков.
Чтобы решить эту проблему, вместо использования файлов ICO для хранения значков, Windows использует файлы DLL. Основным преимуществом DLL- файла является тот факт, что он может содержать несколько значков внутри. На самом деле, вы можете сравнить DLL- файл значков с библиотекой значков. Если вы хотите изменить значок определенного файла, папки или ярлыка, вы можете просто установить его расположение значка, чтобы оно указывало на определенный файл DLL и конкретный значок из него.
Большинство значков из Windows 10 хранятся в файлах DLL. В следующем разделе мы покажем, где находятся эти библиотеки DLL со значками в Windows 10.
Где расположены значки Windows 10 по умолчанию?
Мы попытались упорядочить наш список значков Windows 10 по умолчанию как по расположению их файлов DLL, так и с учетом основного назначения значков, найденных внутри файлов DLL. Далее вы можете увидеть наш список мест из Windows 10, где вы найдете файлы .DLL, содержащие значки:
1. %systemroot%\system32\imageres.dll
Файл imageres.dll содержит много значков, используемых практически везде в Windows 10. Он содержит значки для различных типов папок, аппаратных устройств, периферийных устройств, действий и так далее.
2. %systemroot%\system32\shell32.dll
Файл shell32.dll также содержит множество значков, используемых в различных частях Windows 10. Вместе с imageres.dll , shell32.dll содержит одну из самых больших коллекций значков. Внутри вы можете найти значки для Интернета, устройств, сетей, периферийных устройств, папок и так далее.
3. %systemroot%\system32\pifmgr.dll
Pifmgr.dll содержит некоторые значки в старом стиле, которые были найдены в более старых версиях Windows, таких как Windows 95 и Windows 98. В нем вы можете найти забавные значки, которые изображают такие вещи, как окно, труба, шар, шляпа волшебника, и другие. 🙂
4. %systemroot%\explorer.exe
5. %systemroot%\system32\accessibilitycpl.dll
Accessibilitycpl.dll имеет набор значков, которые используются в основном для специальных возможностей в Windows 10. Он имеет значки с людьми, курсорами мыши, увеличительным стеклом, мышью и клавиатурой и так далее.
6. %systemroot%\system32\ddores.dll
Ddores.dll содержит значки для аппаратных устройств и ресурсов, таких как динамики, наушники, экраны, компьютеры, пульты дистанционного управления и игровые планшеты, мыши и клавиатуры, камеры, принтеры и так далее.
7. %systemroot%\system32\moricons.dll
8. %systemroot%\system32\mmcndmgr.dll
9. %systemroot%\system32\mmres.dll
Mmres.dll имеет несколько значков с различными аудио ресурсами, такими как динамики, наушники, микрофоны и веб-камера.
10. %systemroot%\system32\netcenter.dll
Netcenter.dll имеет несколько значков для сетевых настроек и функций.
11. %systemroot%\system32\netshell.dll
Netshell.dll содержит значки для всех видов сетевых подключений и соответствующего оборудования или технологий.
Например, внутри него вы можете найти значки для Bluetooth, беспроводных маршрутизаторов и сетевых подключений.
12. %systemroot%\system32\networkexplorer.dll
13. %systemroot%\system32\pnidui.dll
Pnidui.dll имеет значки для настроек, связанных с сетью (состояние Ethernet или беспроводной сети, расположение в сети и т.д.). Большинство значков здесь прозрачного белого цвета, поэтому вы должны выбрать их, чтобы увидеть, как они выглядят.
14. %systemroot%\system32\sensorscpl.dll
Sensorscpl.dll имеет несколько значков для разных типов датчиков. Хотя большинство из них выглядят одинаково, их детали указывают на такие вещи, как температура, мощность, ветер и т.д.
15. %systemroot%\system32\setupapi.dll
Setupapi.dll имеет значки, используемые для мастеров установки различных аппаратных устройств. Он имеет экраны, периферийные устройства, аппаратные компоненты, разъемы и разъемы, игровые панели и другие.
16. %systemroot%\system32\wmploc.dll
Wmploc.dll содержит мультимедийные значки, используемые для мультимедийных устройств, музыкальные и видеофайлы, папки, CD и DVD диски и так далее.
17. %systemroot%\system32\wpdshext.dll
Wpdshext.dll имеет значки для некоторых портативных устройств, таких как камеры, телефоны или mp3-плееры, и несколько индикаторов батареи.
18. %systemroot%\system32\compstui.dll
Comstui.dll включает в себя различные классические иконки из более старых версий Windows.
На нем есть иконки с лампочками, почтой, принтерами, документами, телефонами, факсимильными аппаратами и так далее.
19. %systemroot%\system32\ieframe.dll
Ieframe.dll содержит значки, используемые Internet Explorer для его ярлыков, кнопок и меню.
20. %systemroot%\system32\dmdskres.dll
Dmdskres.dll содержит значки, используемые только для управления дисками.
21. %systemroot%\system32\dsuiext.dll
Dsuiext.dll включает в себя значки для сетевых служб. Он имеет значки с серверами, людьми, принтерами, офисными зданиями, службами аутентификации и так далее.
22. %systemroot%\system32\mstscax.dll
Mstscax.dll хранит только несколько значков, используемых для подключений к удаленному рабочему столу, с компьютерами, уведомлениями и сертификатами безопасности.
23. %systemroot%\system32\wiashext.dll
Wiashext.dll имеет несколько значков для различных устройств обработки изображений, таких как сканеры, камеры, фото и видеокамеры, и несколько похожих значков.
24. %systemroot%\system32\comres.dll
Comres.dll содержит несколько значков, которые изображают пользователя, папку, карандаш и некоторые действия.
25. %systemroot%\system32\mstsc.exe
Mstsc.exe содержит несколько других значков, связанных с сетью, но также включает в себя другие значки, такие как динамик, микрофон и логотип Windows 8.
26. actioncentercpl.dll, aclui.dll, autoplay.dll, comctl32.dll, xwizards.dll, ncpa.cpl, url.dll (все в %systemroot%\system32\)
Все эти файлы содержат значки; однако у многих есть только одна иконка внутри или только несколько, поэтому мы решили упомянуть их все вместе. У них есть значки, используемые в Центре действий Windows 10 , некоторые значки ошибок и информации, значки автозапуска, некоторые значки пользователей и значки веб-сайтов.
Как использовать значки, хранящиеся в файле .DLL
Значки, хранящиеся в файлах .DLL, не могут быть скопированы и сохранены в другом месте, по крайней мере, если вы не используете специальное приложение, которое может извлекать значки из файлов .DLL. Однако вы можете использовать любой значок, хранящийся в таком файле, чтобы установить его в качестве значка, используемого папкой, библиотекой или ярлыком. Просто скопируйте и вставьте путь, который мы указали для интересующей вас DLL, в поле «Искать значки в этом файле».
Если Вы хотите использовать одну из иконок (значков) Windows 7, то большую их часть Вы можете найти в следующих файлах:
C:\Windows\System32\shell32.dll
C:\Windows\System32\imageres.dll
C:\Windows\System32\ddores.dll
Для извлечения необходимой Вам иконки:
__rotator_param_f
Службы Windows 7. Отключаем…
Внимание: данное действо подразумевает что Вы имеете хотя бы некоторое представление о том что делаете! Полное описание служб, а также название и…
Установка пользовательского разрешения…
У некоторых мониторов разрешение экрана может не соответствовать ни одному из предлагаемых Windows. Если у Вас установлена видеокарта Nvidia Вы…
Cкачать d3dx* файлы для Windows 7
Довольно часто Windows 7 во время запуска программ, особенно игр, выдает окно с ошибкой "Запусе программы невозможен так как на компьтере отсутствует…
Как в Windows 7 включить отображение…
Для того чтобы увидеть скрытые папки и файлы Вам необходимо сделать следующее: 1. Откройте диалоговое окно «Свойства папки», нажав кнопку…
Как удалить значок Центра поддержки с…
Все пользователи видели этот надоедливый флажок в нижней правой части своего монитора. Он постоянно отвлекает назойливыми оповещениями о всяких…
Как удалить обновление Windows
При обновлении Windows бывают ситуации когда обновка не убирает проблемы, а наоборот добавляет(Здесь подробнее). В таких случаях помогает удаление не…
Переменные windows
Переменные Windows при грамотном использовании могут значительно с экономить время и нервы пользователю компьютера. Для получения полного списка…
Как удалить текст под ярлыком или файлом
Фишка для эстетов windows. Или для тех кто просто хочет пошутить. Удаляем название файла или ярлыка. 1 Правой кнопкой - Переименовать 2 Затем…
Автоматическое VPN подключение к…
1. Создайте ваше VPN подключение, но не подключайтесь к интернету или если подключились, то не отключайтесь от интернета до окончания описанных ниже…
Знаете, с тех пор как я начал делать иконки для игр, я заметил одну вещь. Геймеры любят компьютерные игры, подписываются на паблики посвященные им, ищут моды, статьи, прохождения и все, что с ними связано. Но одну вещь я никак не могу понять, почему геймеры не интересуются игровыми иконками. Как-никак, они связаны с играми и хоть кто-то должен ими интересоваться, но как оказывается, тема иконок в какой-то параллельной реальности и интересуются ими единицы.
В общем, я тут подумал и решил популяризировать иконки, ну или попытаться. В этой статье я расскажу вам: кто такие эти иконки, зачем они нужны и в чем их отличие от значков и ярлыков. Как оказывается, эти термины путают 90% тех, кто ищет иконки. И это не удивительно, ведь все эти термины +- значат одно и тоже, но не совсем.
Что такое ярлык, значок и иконка:
Я не буду вставлять здесь статью из википедии с заумными фразами и расскажу все своими словами. В интернете есть куча статей на тему того, что есть что, но они только создают большую путаницу и объединяют эти понятия. И так давайте разбираться.
Ярлык: В операционной системе Windows почти все программы и игры запускаются с файла, который заканчивается расширением .exe . Этот файл может быть с любым названием, но заканчиваться он должен именно .exe . Такие файлы называются «исполняемыми». Функция этих файлов заключается в запуске программ (игр)
Это исполняемый файл и именно он запускает игру
Так вот ярлык — это, грубо говоря, телепорт к этому файлу, ну или ссылка. Никому ведь не хочется искать файл с запуском GTAV.exe по всему компьютеру, что бы поиграть в пятую гташечку. Именно поэтому при установке игры или программы в большинстве случаев автоматически создается ярлык на вашем рабочем столе.
Ярлык — это копия файла .exe и их разница в том, что при взаимодействии с ярлыком он обращается к файлу .exe (отличий конечно больше, но это уже совсем другая история)
Так и работаем
Отличить ярлык от исполняемого файла можно, как уже писалось выше, расширением .exe, но беда в том, что по умолчанию в Windows расширения скрыты. Второй способ намного проще, на ярлыке всегда отображается маленькая стрелочка в левом нижнем углу значка (Смотри картинку выше)
Ну, и как вы уже поняли, ярлык — это далеко не иконка, но на ярлык можно поставить иконку.
Иконка: У многих при слове иконка воображение сходу выдает церковные иконы, но мы сегодня говорим не про них. Итак, в каждом исполняемом файле (это тот что заканчивается на .exe если кто забыл) содержится иконка. Иконка — это файл с расширением .ico, а ico — это сокращение от слова Icon, то есть иконка в переводе на Русский. В общем, это все, что нам нужно знать о том почему иконка так называется.
На вопрос, «что такое иконка?» многие отвечают банально — это значок. Нет, батенька, иконка — это не значок, иконка — это картинка (изображение), а еще точнее — это группа изображений. В одном файле .ico может содержаться куча изображений. Разница этих изображений в размере и используемом количестве цветов. Например: самые используемые размеры иконок в Windows 16x16 32x32 48x48 и 256x256 пикселей, но встречаются и совершенно другие.
Так выглядит файл Ico (иконка)
Это было необходимо для того, чтобы при смене вида (например в папке) с «список» на «крупные значки» вы видели не мелкие бздюльки, а крупную красивую картинку
В новых версиях операционной системы отпала необходимость создавать иконки всех возможных размеров. Теперь достаточно одной картинки большего размера и система сама подгонит ее под нужный размер.
Сейчас самый популярный размер иконок это 512x512 пикселей. Как многие пишут, в Windows 10 максимальный размер иконки 256x256, но на больших экранах размер 512x512 будет выглядеть лучше. Так же не стоит забывать про сторонние программы, которые используют иконки. Для смены иконок в сторонних программах используется формат .PNG
Значок: Ну и давайте попробуем разобраться, что такое значок. Как вы уже поняли, многие ошибочно называют значком иконку, а иконку значком.
В интернете нет точного определения, что такое значок, но есть куча статей, вводящих в заблуждение и рассказывающих все так, будто значок и иконка — это одно и то же. Но как значок может быть иконкой, если иконка — это файл Ico? Даже иконку в формате PNG не совсем корректно называть иконкой, так как файл содержит всего одно изображение. Но с иконкой в формате PNG это еще хоть как-то вяжется с логикой, а со значком, ну никак.
В моем понимании, значок — это все вместе. Картинка, которая отображается и надпись под ней + информация о файле при виде «таблица, плитка и содержимое». Почему именно так? При нажатии на ярлык, папку или любой файл вокруг картинки и текста мы видим рамку. Так вот, рамка -это и есть границы нашего значка.
Обратите внимание на границы значков
Значок может существовать как без картинки (иконки), так и без текста, но без рамки, никак.
И такое бывает
Это дает нам право говорить, что значок — это все вместе и называть только отображаемую картинку значком неправильно. Так же можно заметить, что значок необязательно должен быть квадратной формы. Какое бы отображение значков мы не выбрали на вашем компуктере: что список, что крупные значки, что любой другой, у всех разная форма, а как мы знаем, иконка должна быть квадратной формы. Даже, если холст иконки будет прямоугольным, то Windows сама растянет иконку до квадрата.
Как мы видим, есть очень много нюансов, которые не позволяют нам называть значки иконками, но все эти термины ходят вокруг да около. Вот и получается путаница, но по сути это разные вещи. В тех же поисковиках, ища иконки, люди вбивают слово значок или ярлык (и это еще в лучшем случае), а потом удивляются, что не нашли то, что искали. Да и сама Microsoft грешит путаницей и предлагает заменить значок, а не иконку.
Давайте подведем итог:
Ярлык — это тот же .exe файл, но работающий удаленно (прим. с рабочего стола), но при выполнении операций, обращающийся к основному файлу (прим. в папке с игрой).
Иконка — это картинка или набор картинок разного размера, содержащиеся в файле .ico
Значок — это папка, ярлык или любой другой файл, которые могут содержать изображения (иконку),текст и информацию о файле.
Почему иконки нужны, почему иконки важны:
Надеюсь с терминами мне удалось все разъяснить и сейчас я объясню почему иконки важнее, чем может показаться.
Многие скажут, мол, сколько пользуюсь компудахтером, даже не обращаю внимания на то, какие в системе иконки и вообще мне со стандартными норм, и будут от части правы. С виду, действительно, неважно какая у вас иконка, ведь программа или игра будет работать одинаково, что со стандартной, что с новой.
Но есть все-таки у качественных иконок пару не совсем очевидных плюсов. Все мы знаем, что человек любит глазами. При взгляде на то что нам нравится, у нас невольно поднимается настроение или мы получаем удовольствие. Нам нравятся клевые тачки, красивые девушки, картины, природа, крутые и стильные девайсы и куча чего еще.
Почему многие так восхищаются айфонами? Можно услышать такие ответы как: он как продолжение твоей руки, в нем все на своих местах, отлично работает, стильно выглядит и им просто хочется пользоваться. На ютуб канале
Как тебе такой интерфейс Илон Маск
Что то не айс да? И куда тянется ваш палец? первым делом на значек однокласников, даже если вы ими не пользуетесь. Понимаете в чем разница?
А теперь взгляните на картинку ниже.
Я думаю все согласятся, что новые иконки выглядят куда приятнее и запускать такие игры вы будете явно чаще.
Есть куча программ для систематизации и сортировки ваших значков, упрощение запуска или просто для стильного отображения.
К примеру, всем известную и работающую с незапамятных времен легендарную RocketDock. Эта небольшая программка, которая зарекомендовала себя только с лучшей стороны. Она позволяет создать на рабочем столе панель для быстрого запуска игр и программ. Стильно компактно и нетребовательно к системе.
Нестареющая классика RocketDock
Есть у нее отличный клон ObjectDock, для тех кому мало одной панели. Можно сделать одну сверху, а вторую снизу (для игр и программ)
Также расскажу вам про одну программу под названием XLaunchPad. Эта программа, по моему скромному мнению, лучшая вещь для стилизации значков вашего рабочего стола. Удобная, красивая, многофункциональная. Она позволяет двойным кликом по рабочему столу открыть окно, в котором будут все ваши значки с играми и программами. В сочетании с качественными иконками это выглядит просто божественно. Особенно, когда иконки всех игр выглядят в одном стиле, это похоже на вашу полку с дисками на столе только в 1000 раз красивее и удобнее (еще и пыль не собирает). Программу даже можно приобрести в Steam
Вот такая красота появляется по двойному клику
А вот так бы она выглядела со стандартными иконками
Уже не так приятно, да?
К сожалению, есть у этой программы и один недостаток. Недостаток в том, что разработчики плевать хотели на свой продукт и готовы только грести с него деньги. Есть в программе баг, из-за которого после перезапуска, рандомно слетает иконка, которую вы ранее установили. Я даже как-то писал разработчикам о проблеме, но вместо решения ее, меня просто забанили. В общем пользоваться или нет решайте сами.
Вообще, за время существования операционных систем Windows вышло огромное множество программ для организации ваших значков, но даже эти 3 могут изменить ваш опыт в использовании своего компьютера.
Ну и под конец, для тех, кто захотел изменить свой рабочий стол в лучшую сторону, но не знает где брать иконки.
Favicon – это значок (иконка), который отображается во вкладке браузера, закладках, а также в сниппетах результатов поиска.
Favicon играет важную роль в веб-приложениях. Он может улучшить внешний вид сайта в выдаче, повышает узнаваемость вашего сайта, помогает пользователю быстро найти необходимую страницу в закладках и вкладках.
Кроме того, пользователь может добавить страницу вашего сайта на главный экран телефона или сохранить как веб-приложение. В таком случае с помощью favicon можно быстро найти сайт среди большого количества других приложений.
Какой формат использовать для favicon?
Раньше в качестве основного формата использовали ICO. Особенность данного формата – мульти-размерность. Данный файл может хранить в себе несколько размеров иконки. На смену ICO пришел формат PNG. ICO все еще поддерживаемый, но большинство современных браузеров выбирают PNG формат иконки, который легче. Некоторые браузеры не могут выбрать правильный значок в файле ICO, что приводит к неправильному использования значка с низким разрешением.
О каких платформах пойдет речь в этой статье?
- Десктопные браузеры
- Chrome на Android
- Иконка закладки в iOS (PWA)
- macOS
- Windows
Десктопные браузеры
Начнем, пожалуй, с классического десктопа.
Как было упомянуто ранее, формат ICO сегодня является устаревшим, но это не значит, что про него нужно забыть. Формат ICO может спасти вашу иконку и корректно отображать favicon в некоторых случаях. Например, до 11 версии IE PNG-формат не поддерживается. Поэтому для IE10 и младших версий нужно использовать старый формат ICO. В таком случае желательно использовать следующую комбинацию ICO и PNG форматов:
Для создания мульти-размерной иконки ICO можно использовать сервис-конвертер icoconvert. При генерации иконки необходимо выбрать следующие размеры: 16х16, 32х32, 48х48 (highest resolution icon).
Иконки PNG имеют следующие размеры: 16х16, 32х32, 96х96, 120х120. Зачем иконка 120х120? Яндекс Справка сообщает, что может воспользоваться иконкой данного размера.
Если обратить внимание на значение rel (тип ресурса), то icon – учитывается большинством браузеров, а shortcut icon – учитывается браузером IE.
Chrome на Android
Android ожидает увидеть значок 192х192 в формате PNG, alpha-канал (прозрачность) приветствуется.
Android Chrome полагается на манифест веб-приложения. Любой сайт может использовать манифест для того, чтобы ссылаться на некоторые значки.
Сам файл манифеста формата json и объявляется следующей строкой:
Файл манифеста для Android Chrome можно сгенерировать с помощью сервиса RealFaviconGenerator.
Иконки должны иметь следующие размеры: 72х72, 96х96, 144х144, 192х192, 512х512 в формате PNG, прозрачность приветствуется. Так как иконка может иметь прозрачный фон, то в манифесте можно указать цвет с помощью background_color.
Стоит отметить, что на телефоне пользователь имеет возможность сохранить страницу браузера на главный экран. Это будет просто ссылка на страницу вашего сайта, подтянется иконка с названием android-icon-192x192.jpg, которая объявлена у вас в коде.
Если же подключить к сайту манифест, то при открытии страницы пользователю может быть предложено сохранить сайт в качестве приложения. В данном случае вы имеет возможность объявить визуально ту же иконку (android-icon-192x192.jpg) или переделать дизайн иконки для приложения под свои нужды и объявить в манифесте с соответствующими размерами.
Иконка закладки в iOS (PWA)
iOS Safari ожидает увидеть apple touch icon. Это иконка PNG формата 180х180, без alpha-канала (без прозрачности). Углы иконки будут автоматически скруглены, что упрощает создание apple touch icon.
Пользователи iOS также могут добавить сайт на главный экран, и он будет выглядеть как приложение. Такая ссылка отображается в виде значка и называется Web Clip.
Нижеперечисленные размеры иконок предназначены для поддержки различных устройств, например, для iPhone и iPad:
В коде нужно добавить атрибут rel=«apple-touch-icon» и указать размер с помощью sizes.
Если на сайте нет значка, размер которого является рекомендованным для устройства, то будет использована сама близкая по размеру иконка большего размера. Основная apple touch icon это иконка размером – 180х180. Остальные устройства могут уменьшать иконку.
При создании иконки не забывайте об отступах. Они должны быть не менее 4px со всех сторон. Это необходимо, чтобы ваша иконка не обрезалась, так как значок приложения в iOS имеет скругленные углы.
Следует отметить, что устройства под iOS не единственные, которые ищут apple touch icon. Некоторые браузеры, вроде Android Chrome, могут использовать apple touch иконки, так как они встречаются чаще других PNG иконок высоких разрешений.
macOS
В Mac OS дела обстоят совершенно иначе. Если пользователь попробует сохранить сайт на рабочий стол, то вместо иконки сайта будет отображен скриншот страницы.
Чтобы добавить иконку необходимо использовать формат SVG, который позволит сделать маску иконки. Данная иконка будет отображена при закреплении вкладки в Safari.
SVG-иконка используется в закрепленной вкладке (pinned tab – no focus) в монохромном виде. При наведении (pinned tab – focus) иконка будет закрашена в цвет, который имеет атрибут «color». В touch bar также передается цвет атрибута «color».
При создании иконки необходимо убрать все имеющиеся тени, сделать ее плоской и простой. Упростить иконку до одного объекта можно с помощью операций «Union» и «Flatten». Данные операции легко применить в программе Figma.
Если закрыть глаза на создание иконки-маски, то браузер просто отобразит первую букву домена вашего сайта.
Windows
С Windows нужно немного запариться, чтобы сделать хорошо.
Для IE10 и более младших версий необходимо использовать формат ICO, так как до IE11 формат PNG не поддерживался.
С приходом IE11 и Windows 8.1 появилась возможность закреплять сайты в виде живых плиток. Для маленьких плиток используется по умолчанию favicon, а для больших и широких плиток необходимо задавать изображение конкретного размера. Это можно сделать с помощью добавления тегов метаданных в разметку сайта или создать browserconfig.xml (файл конфигурации браузера).
Пример добавление тегов метаданных в разметку веб-сайта для больших плиток:
Данной строкой мы указываем цвет фона плитки:
Можно указать имя вашего веб-сайта:
Что такое browserconfig? Это XML-документ, в котором перечислены различные значки, соответствующие пользовательскому интерфейсу Metro UI.
Чтобы подключить файл browserconfig в разметке необходимо добавить следующую строку в head:
Сам файл будет выглядеть следующим образом:
В browserconfig файле определены изображения для различных размеров плитки.
Microsoft рекомендует брать больший размер изображений в целях поддержки экранов с высокой плотностью пикселей.
В следующем списке приведены некоторые рекомендации по использованию различных размеров:
- Small — 70x70 (Рекомендуемый размер: 128x128)
- Medium — 150x150 (Рекомендуемый размер: 270x270)
- Wide — 310x150 (Рекомендуемый размер: 558x270)
- Large — 310x310 (Рекомендуемый размер: 558x558)
Подготовка favicons
Перед тем как добавлять ваши иконку в корневую папку сайта необходимо их подготовить. Исходные размеры иконок не очень большие, но можно их сжать с наименьшей потерей качества.
Например, в моем случае вес всех изображений был 200кб, после сжатия 50кб. Качество изображений практически не изменилось. Вы можете воспользоваться любым удобным сервисом для сжатия картинок. Я использовала iloveimg.
Заключение
Последовательность подключения в разметке веб-сайта:
С помощью последней строки кода «theme-color» можно закрасить адресную строку и строку уведомлений в любой цвет. В значении content задается цвет.
Для проверки иконок вашего сайта воспользуйтесь RealFaviconGenerator. Данный сервис покажет, как отображаются ваши иконки на разных платформах, подскажет где и какие могут быть проблемы.
Кроме того, данный сервис может сгенерировать необходимые размеры, форматы иконок и код. Но необходимо проверять исходники на наличие всех рекомендуемых размеров для корректного отображения на различных устройствах.
Читайте также: