Я занят на сайте WordPress и вышел на сцену, чтобы добавить последний штрих в виде фавиконки. Я в первую очередь разработчик, поэтому графика и значки не являются моей сильной стороной.
Каковы наилучшие методы создания фавикона (с точки зрения размеров и т. д., у меня уже есть дизайн)? Я хотел бы приспособиться к каждому возможному устройству, будь то мобильный телефон, планшеты, дисплеи сетчатки и т. Д. Также я не хочу, чтобы оно было размытым, поэтому мне нужно знать, какую плотность пикселей использовать и все такое.
Если есть какие-то приложения для Mac или онлайн-инструменты, которые сделают это за вас (и сделают это правильно), это тоже было бы здорово. В остальном я знаю, как ориентироваться в Illustrator и Photoshop.
Основы от Favicons - Best Practice for 2013 :
ICO favicon.ico (32x32)
PNG favicon.png (96x96)
Значок плитки tileicon.png (144x144)
Значок Apple Touch apple-touch-icon-precomposed.png (152x152)
И «мучительно навязчивая» шпаргалка по размерам/типам фавиконок на 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 — самый старый из фавиконов, он работал еще до того, как родилось много людей, читающих это, и до сих пор отлично работает.
Microsoft рекомендует включать изображения размером 16x16, 32x32 и 48x48.
Стандартный способ определить ваш значок:
<link rel="shortcut icon" href="/favicon.ico" />
Браузеры будут искать в корневом каталоге вашего веб-сайта favicon.ico, поэтому вы можете опустить ссылку. Некоторые старые браузеры по умолчанию используют объявленный favicon.ico, даже если объявлен PNG более подходящего размера, поэтому может быть хорошей идеей оставить ICO необъявленным в корне и объявить 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">
Размеры, которые вы объявляете, зависят от устройств, которые вы хотите поддерживать. Некоторые распространенные и не очень распространенные размеры:
Значки веб-клипов 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 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" />
Все 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 - Комплексный генератор фавиконок.
FAVIC-O-MATIC — комплексный генератор фавиконок с легко настраиваемыми выходными форматами.
Этот инструмент отлично экономит время. Попробуйте! Он позаботится обо всем для вас.
Загрузите изображение размером около 800 x 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 файл.
создаст около 15 различных размеров значков для всех устройств из одного PNG высокого разрешения.
Я тоже искал решение для favicon и не хотел полагаться на какие-либо сторонние веб-сервисы. Я не смог найти каких-либо универсальных решений, которые работали бы как простой шаг сборки, поэтому я создал faviconbuild . Он основан на ImageMagick , так что вы можете загрузить последнюю версию для своей системы или использовать те, которые я предоставил в своих выпусках .
Я выпустил его под лицензией Массачусетского технологического института, поэтому каждый может использовать его в коммерческих или личных целях или просто черпать из него вдохновение. Если вы обнаружите какие-либо ошибки или захотите расширить его, не стесняйтесь вмешиваться .
Я буду обновлять страницу проекта более подробной информацией, но она уже имеет действительно удобное и стандартное меню справки и работает на 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. Поведение сценария по умолчанию заключается в том, чтобы поместить все во вложенную папку сборки, которая игнорируется git, поэтому она не конфликтует с проектом, если вы используете git.
Если я что-то упустил, пожалуйста, отправьте запрос функции.
У меня также есть сообщение в блоге с дополнительной информацией.
Я надеюсь, что вы найдете это полезным.
Здесь много полезной информации о размерах и генераторах favicon.
Я могу добавить к обсуждению, объяснив потребности дизайна разных размеров.
Да, размеры фавиконки, значка, символа и логотипа могут быть основаны на одном и том же изображении, но каждый из них должен быть отрендерен специально для этого размера, чтобы он выглядел наиболее точным (я говорю, что автоматические генераторы не будут хорошо обрабатывать алиасинг и градиенты на Размер 16 пикселей, и автоматически сгенерированное изображение не будет оптимизировано для размера 128 пикселей, если вы начали с меньшего размера.
Нарисуйте свой рисунок в разрешении 128 пикселей или в любом крупном квадратном формате, используя все 3D-трюки, которые вам нужны. Экспортируйте значки разного размера по одному, изучая результат и настраивая мастер, чтобы он лучше работал с этим размером.
Для 16 x 16 я сделаю сетку из квадратов 16 x 16 и раскрашу их по отдельности, чтобы максимально контролировать результат.
КМСТР
кокосовая груша
Ханна