Ico иконки 256х256: Иконки в формате ICO и PNG для Windows 7/8/10

— Как создать свои собственные значки Windows?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Начало страницы

Создайте иконку в стиле Windows с помощью Axialis Image Object Packs

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

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

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

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

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

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

2. Введите имя проекта (): « Down ».

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

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

5. Когда закончите, нажмите OK .Создано новое окно проекта значка ():

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

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

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

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

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

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

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

11. Добавим стрелку. Выберите папку « 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 на клавиатуре. Тень теперь помещена на задний план.

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

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

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

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

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

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

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

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

Начало страницы

Извлечь значок / курсор из файлов EXE, DLL, OCX, CPL

— Как преобразовать .PNG в .ICO?

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

Вот как это делается вручную. Вы можете использовать GIMP, альтернативу Photoshop с открытым исходным кодом, которую можно загрузить с веб-сайта проекта. Никаких дополнительных плагинов не потребуется. Возьмите PNG, который хотите преобразовать. Размер должен быть не менее 128 пикселей, но лучше 256+.

Открыть сказал png в GIMP. Вы собираетесь сделать изображение из нескольких слоев.Когда вы закончите, каждый слой будет разного размера в готовой иконке. Вот макет слоя, который я обычно использую 256 пикселей (необязательно), 128 пикселей, 96 пикселей, 64 пикселей, 48 пикселей, 40 пикселей, 32 пикселей и 24 пикселей. Вы хотите иметь такое разнообразие размеров, потому что вам нужно учитывать все различные увеличения, которые пользователь будет иметь при просмотре в проводнике. 256 — это перебор, но почему бы не сделать иконку пригодной для будущего?

Шаг 1: импортируйте png в gimp. Обычно я делаю это, используя «Открыть с помощью» в окнах png и выбирая gimp.После этого GIMP сделает все остальное. убедитесь, что это единственный слой на данный момент (удалите все фоновые слои, если gimp сделал таковые).

Шаг 2: Измените размер изображения до 256×256 (или 128×128, если вы не хотите использовать 256), щелкнув меню Изображение и выбрав Масштаб изображения . Если изображение, с которым вы работаете, не квадратное, вам придется обрезать его перед масштабированием, иначе оно будет выглядеть странно. Вы можете обрезать, используя инструмент выделения прямоугольником (убедитесь, что вы делаете квадратное выделение, нажимая Shift во время выделения).Когда вы закончите выбор, щелкните меню Image и выберите Crop to Selection .

Шаг 3: Дублируйте текущий слой, выбрав меню Layer и выбрав Duplicate Layer . Снова нажмите меню Layer и выберите Scale Layer и измените размер дублированного слоя на новый размер, например 128 или 96 и т. Д.

Шаг 4: промойте и повторяйте, пока не сделаете все слои до 24 пикселей.

, шаг 5: экспортируйте текущий рисунок как значок, щелкнув меню Файл и выбрав Экспортировать как .Когда вы получите диалоговое окно, убедитесь, что вы ввели правильное расширение (.Ico), а все остальное сделает gimp.

Добавление значков в многоплатформенном мире с несколькими браузерами

Значки значков: раньше это было так просто. Простое растровое изображение favicon.ico размером 16 × 16 пикселей, используемое для решения этой задачи. Это было похоже на знак препинания в конце проекта; эквивалент веб-разработчика завершению предложения восклицательным знаком или точкой. Так было раньше. Но за последние 20 лет все изменилось.

Что такое значки?

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

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

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

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

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

Здесь нас не беспокоит кеширование браузера; мы будем делать это просто или как можно проще. Оказывается, по мере того, как количество веб-платформ и клиентов со временем увеличивалось, возникла и сложность добавления этого небольшого ярлыка таким образом, чтобы он удовлетворял требованиям каждой платформы, чтобы он отображался правильно.

Что такое формат значка .ico (ICO)?

Прежде чем мы углубимся, давайте кратко рассмотрим сам формат ICO.

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

Позже, в 1999 году, Microsoft перенесла формат ICO в Internet Explorer 5 в качестве способа создания закладок и идентификации сайта, и появился значок «favicon».

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

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

Как добавить фавикон?

Хотя термины favicon и ярлык часто используются как синонимы, значки не обязательно должны быть в формате ICO.Действительно, форматы GIF, PNG, JPG широко распространены.

Давайте начнем с самого старого и самого простого способа добавить значок на ваш сайт.

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

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

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

Использование тега

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

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

Допустимы и другие форматы изображений, поскольку значок больше не ограничивается форматом ICO:

Включение ярлыков в манифест веб-приложения: manifest.json

Вы часто будете слышать, как файл manifest.json упоминается одновременно с прогрессивными веб-приложениями (PWA). Файл manifest.json — это файл JSON, который позволяет настраивать внешний вид и поведение при запуске веб-приложения, отмеченного закладкой, или Добавлен на рабочий стол устройства.

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

Чтобы узнать больше о manifest.json и его возможности, пожалуйста, прочтите нашу статью manifest.json .

Значок, отображаемый на главном экране устройства Android

Манифест содержит свойство массива, значков , которое можно использовать для указания списка объектов изображения, каждый из которых может иметь свойства src , размеров и типа , которые описывают значок.

Таким образом, файл manifest.json с двумя значками может выглядеть так:

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

Использование файла browserconfig.xml для включения значков

browserconfig.xml — это файл XML, который можно использовать для определения значков плиток для Microsoft Windows. Он также находится в корне веб-сайта и выглядит так:

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

Так много способов добавить значок ярлыка — какой из них я должен использовать?

При таком большом количестве способов добавить значок, вы можете спросить, какой из них вам следует использовать. А вот и самое интересное: все они! Хорошо, так весело? Не так много.

Почему существует так много способов добавить значок?

Ранее мы говорили, что большинство браузеров будет поддерживать форматы favicon.ico размером 16 × 16 и 32 × 32 в корневом каталоге. Так почему бы нам просто не остановиться на этом? Это вопрос поддержки множества платформ и плотностей пикселей экрана, так что значок ярлыка всегда будет хорошо выглядеть в различных размерах и контекстах.

Во-первых, поскольку значок ярлыка представляет собой точку запуска веб-сайта или приложения, он всегда должен выглядеть хорошо, то есть четким и четким, без пикселов, а размер и качество должны соответствовать разрешению экрана устройства. Иконки размером 16 × 16 и 32 × 32 представляют собой хороший запасной вариант, но они не будут сокращаться на экранах с высоким разрешением.

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

Какие размеры фавикона использовать?

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

Во-первых, с момента введения атрибута sizes в HTML5, теперь мы можем указывать исходный значок по-новому, используя файлы PNG:

Рекомендации по использованию Chrome

На сайте разработчиков Google есть рекомендация по максимальному размеру 192 × 192 пикселей для Chrome.

Будет автоматически уменьшен до необходимого размера.

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

Это дает нам размеры:

• 48 × 48
• 96 × 96
• 144 × 144
• 192 × 192

Другие источники Google для разработчиков рекомендуют еще более высокое разрешение для использования на Добавить на рабочий стол заставку. Таким образом, мы можем добавить 256, 384 и 512:

• 256 × 256
• 384 × 384
• 512 × 512

Таким образом, разметка для включения всех этих изображений значков будет:

Рекомендации Safari

Apple рекомендует следующие размеры значков:

• 120 × 120: iPhone
• 152 × 152: iPad
• 167 × 167: iPad Retina
• 180 × 180: iPhone Retina

Их можно включить с помощью тега link .Итак, это даст нам:

Оптимальные размеры для старых устройств iOS:

• 57 × 57
• 60 × 60
• 72 × 72
• 76 × 76
• 114 × 114

Их также можно поместить в корневую папку с такими именами файлов, как apple-touch-icon-180x180.png и apple-touch-icon.png , и Safari iOS автоматически найдет нужный значок.

Однако, поскольку другие платформы также могут использовать значки iOS, лучше раскрывать их явно с помощью тегов link .

Закрепленные вкладки Safari

Safari также использует значок SVG для отображения с закрепленными вкладками. Для этого используются изображения SVG (поэтому размер пикселя не важен):

Плитка Microsoft Windows

Даже если вас не волнует мобильная ОС Windows Phone — есть веские причины не делать этого, поскольку ее судьба предрешена — вам все равно следует заботиться о значках плиток Windows, поскольку они используются в версиях Windows 8 и выше, на планшетах, ноутбуки и ПК.

Плитки Microsoft Windows (Источник: Microsoft)

Версии Windows 8 и более поздние используют формат плитки для отображения значков ярлыков.Руководства по проектированию этих плиток достаточно сложны; мы просто рассмотрим здесь требуемые размеры.

Основные размеры плитки, определенные Microsoft:

• 70 × 70 (маленькая плитка)
• 150 × 150 (средняя плитка)
• 310 × 150 (широкая плитка)
• 310 × 310 (большая плитка)

В Windows 8.0 и IE 10 плитка 144 × 144 может быть определена в разметке следующим образом:

Но начиная с 8.1 мы можем использовать файл browserconfig.xml и сохранить заголовок нашей страницы более чистым.

Чтобы несколько запутать ситуацию, Microsoft рекомендует для охватывать широкий спектр устройств, использовать изображение в 1,8 раза больше стандартного размера плитки, чтобы изображение можно было масштабировать вверх или вниз по мере необходимости .

В результате получится следующий файл browserconfig.xml , который ссылается на изображения плитки, масштабированные на 1.8:

Edge и IE11 автоматически запросят файл browserconfig.xml . Однако вы можете явно открыть файл конфигурации следующим образом, что позволит вам изменить его имя и путь:

Собираем все вместе

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

• favicon.ico
• favicon-16.png
• favicon-32.png
• icon-48.png
• icon-96.png
• icon-144.png
• icon-192.png
• Икона-256.png
• icon-384.png
• icon-512.png
• apple-touch-icon-57.png
• apple-touch-icon-60.png
• apple-touch-icon-72.png
• apple-touch-icon-76.png
• apple-touch-icon-114.png
• apple-touch-icon-120.png
• apple-touch-icon-152.png
• apple-touch-icon-167.png
• apple-touch-icon-180.png
• ms-tile-144.png
• ms-tile-126.png
• ms-tile-270.png
• мс-плитка-558 × 270.png
• ms-tile-558.png

И два файла конфигурации:

• manifest.json
• browserconfig.xml

Разметка Favicon

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

Прозрачность и обрезка: не все значки обрабатываются одинаково

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

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

Например, прозрачность подходит для Android, но для iOS прозрачность будет преобразована в черный цвет. Очевидно, что во многих случаях это не подойдет.

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

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

Неужели нам нужны все эти значки?

Все это кажется большим трудом для такой маленькой иконки.

С этим согласен Филипп Бернар , автор RealFaviconGenerator.Он протестировал несколько вариантов уменьшения количества требуемых файлов.

Он предполагает, что более минимальный подход обеспечивает достаточную совместимость для подавляющего большинства случаев.

Уменьшение масштаба браузера

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

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

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

Набор минимальных ярлыков

1. Следующие файлы изображений в корневой папке

   • значок.ico (с размерами значков 16 × 16, 32 × 32)
   • favicon-16x16.png : Современный эквивалент оригинального формата ICO
   • favicon-32x32.png : Safari
   • apple-touch-icon-180.png : Значок Apple touch
   • icon-192.png : Chrome / Android
   • safari-pinned-tab.svg : закрепленная вкладка Safari SVG
   • mstile-150x150.png : плитка MS

2. Файл manifest.json, в котором используется изображение Chrome:

   { «name»: «», «short_name»: «», «icons»: [ { «src»: «/ icon-192.png «, » sizes «:» 192×192 «, » type «:» image / png « } ], » theme_color «:» #ffffff «, » background_color «:» # ffffff «, » дисплей «:» автономный « }

3. Файл browserconfig.xml, в котором используется образ mstile

   .

   # / TileColor>

4. Следующая разметка

Есть некоторые тонкости в том, как появился этот набор иконок и разметки.Я призываю вас прочитать обоснование некоторых решений.

Например, мы можем сбросить следующие

, поскольку мы все равно используем файл manifest.json для Android, и Chrome будет использовать его, если он объявлен.

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

Будущее фавиконов

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

SVG значки

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

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

Для использования значка SVG атрибут sizes принимает значение any :

Ресурсы

Два очень полезных ресурса значков:

1. The Favicon Cheatsheet, ресурс github, в котором перечислены наиболее широко используемые форматы на различных платформах
2. RealFaviconGenerator, авторство вышеупомянутого Филиппа Бернара

Дополнительные ресурсы включают:

3. Рекомендации Apple UI,
4. Разработчики Google: значки и цвета браузера
5. Рекомендации Microsoft по активам плиток и значков
6. Apple Develop: создание закрепленных значков вкладок

иконок в Интернете

18 декабря 2013 г. : Проект Nmap рад представить наш новый и улучшенный проект иконок в Интернете ! Поскольку наше бесплатное программное обеспечение Nmap Security Scanner с открытым исходным кодом предназначено для исследования сетей в массовом масштабе, мы начали со сканирования миллиона лучших веб-сайтов за 2013 год (согласно рейтингу аналитической компании Alexa).Затем мы загрузили значок каждого сайта — маленький значок, отображаемый рядом с названием сайта в закладках и вкладках браузера.

Мы масштабировали значки пропорционально ежемесячному охвату (популярности) каждого сайта и поместили их в гигантский коллаж. Самые маленькие значки — для сайтов, которые ежемесячно посещает всего 0,00004% интернет-пользователей — имеют квадрат 256 пикселей (16×16). Самый большой значок (Google) — 394 миллиона пикселей. Весь коллаж 5 гигапикселей.

Это обновление аналогичного проекта, который мы выполняли в 2010 году.Это издание оказалось очень популярным. Об этом написали в New York Times и на других сайтах, выставили в Newseum в Вашингтоне, округ Колумбия, и даже попали в Книгу рекордов Гиннеса (подробнее см. В разделе для прессы). Интересно сравнить новые данные со старыми, чтобы увидеть, как Интернет развивался в последние годы.

Поскольку ваш веб-браузер, скорее всего, захлебнется 5-гигапиксельным изображением, мы создали интерактивную программу просмотра, представленную ниже. Он разделен на 813 200 небольших файлов, которые загружаются только по мере необходимости в зависимости от вашего местоположения и уровня масштабирования.Щелкните и перетащите, чтобы панорамировать, и используйте колесо мыши (или панель инструментов) для увеличения. Для увеличения с помощью колеса мыши вам может потребоваться сначала взаимодействовать со зрителем (например, перетащить что-нибудь). Новая функция этого года позволяет вам навести указатель мыши на значок, чтобы увидеть название сайта. Вы также можете нажимать на значки, чтобы посещать реальные сайты, но будьте осторожны с этим! Даже сайты с симпатичными иконками (как мультик хомячок) могут быть порнографическими или хуже. Мы также добавили возможность просмотра в полноэкранном режиме.

Чтобы найти свой любимый сайт (или свой собственный), введите имя домена (пример: reddit.com) и нажмите поиск.

Наш проект Favicon 2010 имел огромный успех, и эти данные по-прежнему полностью доступны для просмотра здесь. Конкурентоспособная экосистема Интернета постоянно развивается, и за эти три года произошли кардинальные изменения. В мире социальных сетей и блогов Myspace, Orkut и Hi5 рухнули почти до нуля, в то время как Facebook, LinkedIn и Twitter набрали обороты. Pinterest, Tumblr, Sina Weibo и Instagram быстро превратился из ничего в доминирующую силу. В поисках, Google, а также Спросите лучше, пока Yahoo пострадала.Китайская поисковая система Baidu / Hao123 значительно выросла после того, как Google закрыл свой китайский сервис. В СМИ Youtube завоевал популярность, а пиратские сайты Megaupload, MegaVideo и Rapidshare вскочил с доски. Наконец, в электронной коммерции Амазонка eBay и Китайский Tmall / TaoBao набирает обороты. Почти все лидеры роста оказались американскими или китайскими компаниями. В следующих таблицах показаны самые большие победители и проигравшие. Запись об изменении, такая как «от 6,9 до 20,6%», означает, что сайт (Yahoo) упал на 6,9 процентных пункта с 27.Охват от 5% до 20,6%.

Фавиконы и сенсорные иконки | Webflow University

Используйте значки и сенсорные значки на своих веб-сайтах Webflow.

В этом видео используется старый интерфейс. Скоро выйдет обновленная версия!

В этом видео используется старый интерфейс. Скоро выйдет обновленная версия!

В этом видео используется старый интерфейс. Скоро выйдет обновленная версия!

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

В этом уроке:

1. Favicon
2. Сенсорные значки
3. Ресурсы изображений
4. Загрузите свои значки

Большинство браузеров используют значки значков для представления вашего веб-сайта на вкладках браузера и в закладках.

Сенсорные значки

Сенсорные значки или веб-клипы используются в таких местах, как закладки Safari.

Они также появляются, когда ссылка на ваш веб-сайт сохраняется на главном экране вашего смартфона.

При подготовке ресурсов изображений веб-значков для загрузки создайте изображение 32×32 пикселя для использования в качестве значка и изображение размером 256×256 пикселей для значка Webclip или Touch.

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

Загрузите свои значки

Когда вы закончите подготовку своих изображений:

1. Перейдите в настройки проекта > Общие вкладка > Значки
2. Загрузите изображения, которые вы подготовили
3. Опубликуйте свой сайт, чтобы изменения вступили в силу
4. Обновите свой действующий сайт в браузере, чтобы увидеть обновленный значок

Клонировать этот проект

Попробуйте Webflow — это бесплатно

Производство для этого урока

Что-то пошло не так при отправке формы.