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

Каковы лучшие практики при создании значка (с точки зрения размеров и т. Д., У меня уже есть дизайн)? Я хотел бы приспособить для каждого возможного устройства, будь то мобильное устройство, планшеты, дисплеи сетчатки и т. Д. Также я не хочу, чтобы оно получилось размытым, поэтому мне нужно знать, какую плотность пикселей использовать, и все.

Если есть некоторые приложения для Mac или онлайн-инструменты, которые сделают это для вас (и сделают это правильно), это было бы также хорошо. В противном случае я знаю, как найти путь к Illustrator и Photoshop.

Основы Favicons - лучшая практика на 2013 год :

ICO favicon.ico (32x32)

PNG favicon.png (96x96)

Tile Icon tileicon.png (144x144)

Apple Touch Icon apple-touch-icon-precomposed.png (152x152)

И "мучительно навязчивый" шпаргалка для размеров / типов favicon на GitHub.

Всегда стоит прочитать: http://www.jonathantneal.com/blog/understand-the-favicon/

Что включить?

Минимум

<!-- Desktop browsers (including 16x6, 32x32 & 48x48 PNGs) -->
<link rel="shortcut icon" href="/favicon.ico">

<!-- Modern browsers (196x196 should cover all modern browsers) -->
<link rel="icon" type="image/png" href="/favicon.png">

<!-- iOS & other mobile devices (ideally 180x180, at least 120x120) -->
<link rel="apple-touch-icon" href="touch-icon-iphone.png">

Для навязчивых

<!-- Desktop browsers (including 16x6, 32x32 & 48x48 PNGs)  -->
<link rel="shortcut icon" href="/favicon.ico">

<!-- Modern browsers & Devices -->
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-48x48.png" sizes="48x48">
<link rel="icon" type="image/png" href="/favicon-64x64.png" sizes="64x64">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-128x128.png" sizes="128x128">
<link rel="icon" type="image/png" href="/favicon-196x196.png" sizes="196x196">

<!-- iOS & other mobile devices -->
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6plus.png">

<!-- Windows Tiles (optionally omitted and replaced with browserconfig.xml in root directory) -->
<meta name="msapplication-TileColor" content="#582686" />
<meta name="application-name" content="Your Website" />
<meta name="msapplication-square70x70logo" content="tile-small.png" />
<meta name="msapplication-square150x150logo" content="tile-medium.png" />
<meta name="msapplication-wide310x150logo" content="tile-wide.png" />
<meta name="msapplication-square310x310logo" content="tile-large.png" />

favicon.ico

favicon.ico - самый старый из favicon, он работал с тех пор, как много людей, читающих это, родились и до сих пор работают отлично.

Microsoft рекомендует включать изображения размером 16x16, 32x32 и 48x48.

Стандартный способ определения вашего значка:

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

Браузеры будут искать корневой каталог вашего сайта, favicon.icoчтобы вы могли опустить ссылку. В некоторых старых браузерах по умолчанию используется объявленный формат, favicon.icoдаже если объявлен PNG более подходящего размера, поэтому оставить ICO необъявленным в корне и объявить PNG другого размера может быть хорошей идеей.

favicon.png

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

<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">

• www.w3.org - HTML5 - Тип ссылки "icon"

Размеры, которые вы объявляете, зависят от устройств, которые вы хотите поддерживать. Некоторые общие и не очень распространенные размеры:

• 32х32
• 48x48
• 64x64
• 96x96
• 128x128 Интернет-магазин Chrome icon
• 160x160 Chrome для Android
• 192x192 Chrome для Android
• Значок быстрого набора 195x195 Opera
• 196x196 Chrome для Android
• 228x228 Opera Coast icon

Значок Apple Touch

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

Если никакие значки не указаны с использованием элемента ссылки, iOS будет искать в корневом каталоге значки с apple-touch-iconпрефиксом. Устройства iOS не являются (как ни странно) единственными устройствами, использующими эти значки (например, Android Chrome), поэтому их объявление является более безопасным вариантом.

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6plus.png">

• Руководство по интерфейсу пользователя iOS - Размеры значков

• Библиотека разработчиков iOS - Указание значка веб-страницы для веб-клипа

Плитка Windows

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

<meta name="msapplication-square70x70logo" content="tile-small.png" />
<meta name="msapplication-square150x150logo" content="tile-medium.png" />
<meta name="msapplication-wide310x150logo" content="tile-wide.png" />
<meta name="msapplication-square310x310logo" content="tile-large.png" />

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

                   | Minimum   | Recommended
Small  | 70 x 70   | 56 x 56   | 128 x 128
Medium | 150 x 150 | 120 x 120 | 270 x 270
Wide   | 310 x 150 | 248 x 120 | 558 x 270
Large  | 310 x 310 | 248 x 248 | 558 x 558

Цвет плитки и название

Поведение плиток по умолчанию состоит в том, чтобы брать заголовок плитки из <title>тега и уважать любую прозрачность в изображениях плиток, показывая цвет фона. Вы можете настроить цвет и заголовок, используя следующие метатеги:

<meta name="msapplication-TileColor" content="#582686" />
<meta name="application-name" content="Your Website" />

browserconfig.xml

Все msapplicationметатеги могут быть удалены и заменены XML-файлом в корневой папке с именем browserconfig.xml. Файл XML должен выглядеть так:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="images/tile-small.png"/>
      <square150x150logo src="images/tile-medium.png"/>
      <wide310x150logo src="images/tile-wide.png"/>
      <square310x310logo src="images/tile-large.png"/>
      <TileColor>#582686</TileColor>
    </tile>
  </msapplication>
</browserconfig>

Дальнейшее чтение и ресурсы

• Шпаргалка Фавикон

• Фавиконы, сенсорные иконки, значки плиток и т. Д. Что вам нужно? - Написано как тест, но содержит много полезной информации (и вы можете просто прочитать ее как статью, забудьте, что это тест)

• Справочник по иконам

• ImageMagick - Полезный инструмент командной строки для преобразования изображений.

• RealFaviconGenerator.net - Комплексный генератор favicon.

• FAVIC-O-MATIC - Комплексный генератор favicon с легко настраиваемыми форматами вывода.

Этот инструмент супер экономит время. Попробуйте! Он позаботится обо всем для вас.

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

http://realfavicongenerator.net/

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

<meta name="apple-mobile-web-app-title" content="Website Name">

Надеюсь, это поможет!

Используйте эту задачу GRUNT для генерации всех возможных вариантов:

https://github.com/gleero/grunt-favicons

Создает все известные типы и размеры иконок из PNG изображения. Использует ImageMagick.

Вход: квадратный логотип в png. Вы также можете хранить рядом с исходными файлами префикс разрешения, например, source.16x16.png.

Выход:

favicon.ico (16x16, 32x32, 48x48) — desktop browsers, address bar, tabs, safari reading list, non-retina iPhone, windows 7+ taskbar, windows desktop;
favicon.png (64x64) — modern browsers;
apple-touch-icon.png (57x57) — iPhone non-retina, Android 2.1+;
apple-touch-icon-60x60.png (60x60) — iPhone iOS7+;
apple-touch-icon-72x72.png (72x72) — iPad non-retina;
apple-touch-icon-76x76.png (76x76) — iPad non-retina iOS 7;
apple-touch-icon-114x114.png (114x114) — iPhone retina, iOS 6 and lower;
apple-touch-icon-120x120.png (120x120) — iPhone retina, iOS 7 and higher;
apple-touch-icon-144x144.png (144x144) — iPad retina;
apple-touch-icon-152x152.png (152x152) — iPad retina iOS 7;
windows-tile-144x144.png (144x144) — Windows 8 tile;
coast-icon-228x228.png (228x228) - Coast browser;
firefox-icon-16x16.png (16x16) - Firefox on Android / Windows;
firefox-icon-30x30.png (30x30) - Firefox OS;
firefox-icon-32x32.png (32x32) - Firefox on Android / Windows;
firefox-icon-48x48.png (48x48) - Firefox on Android / Windows;
firefox-icon-60x60.png (60x60) - Firefox OS;
firefox-icon-64x64.png (64x64) - Firefox on Android / Windows;
firefox-icon-90x90.png (90x90) - Firefox OS;
firefox-icon-120x120.png (120x120) - Firefox OS;
firefox-icon-128x128.png (128x128) - Firefox on Android / Windows;
firefox-icon-256x256.png (256x256) - Firefox on Android / Windows;
homescreen-196x196.png (196x196) - Android Homescreen.

Добавляет изменения в HTML-файл.

http://faviconit.com

создаст около 15 различных размеров иконок для всех устройств из одного высокого разрешения PNG.

Я тоже искал решение favicon и не хотел полагаться на какие-либо сторонние веб-сервисы. Я не смог найти ни одного общего решения, которое бы работало как простой шаг сборки, поэтому я создал faviconbuild . Он основан на ImageMagick, поэтому вы можете загрузить последнюю версию этой версии для своей системы или использовать ту, которую я предоставил в своих выпусках .

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

Я буду обновлять страницу проекта с более подробной информацией, но она уже имеет действительно удобное и стандартное меню справки и работает на Unix, Mac и Windows.

Вы просто запускаете скрипт .bat или .sh в своем терминале.

Например, для Windows:

faviconbuild.bat -h

или для Unix / Mac (или Windows, если используется Cygwin):

faviconbuild.sh -h

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

Это пример того, как я использую его в одном из моих проектов в настоящее время:

./faviconbuild/faviconbuild.sh -i ./source.png

Я просто поместил папку faviconbuild в папку, специфичную для проекта, чтобы мне не приходилось касаться самих файлов проекта и той стороны, где я разместил свой source.png. Поведение скрипта по умолчанию - помещать все в вложенную папку сборки, которая имеет gitignored, чтобы она не конфликтовала с проектом, если вы используете git.

Если я что-то упустил, пожалуйста, отправьте запрос на функцию.

У меня также есть сообщение в блоге с дополнительной информацией.

Я надеюсь, что вы найдете это полезным.

Здесь много полезной информации о размерах и генераторах favicon.

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

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

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

Для 16х16 я сделаю сетку квадратов 16х16 и раскрасю их по отдельности, чтобы получить максимальный контроль над выходом.