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

Які найкращі практики для створення фавікону (за розмірами тощо, у мене вже є дизайн)? Я хотів би розмістити всі можливі пристрої, будь то мобільний, планшети, сітківки тощо. Також я не хочу, щоб воно закінчувалося розмитим, тому мені потрібно знати, яку щільність пікселів використовувати і все.

Якщо є якісь додатки для Mac чи онлайн-інструменти, які зроблять це для вас (і роблять це правильно), це також було б чудово. Інакше я знаю, як знайти свій шлях навколо Illustrator та Photoshop.

Основи Favicons - найкраща практика 2013 року :

ICO favicon.ico (32x32)

PNG favicon.png (96x96)

Ікона плитки tileicon.png (144x144)

Apple Touch Icon 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

favicon.ico - найстаріший з фавіконів, він працював з тих пір, як багато людей, які читають це, народилися і працюють досконало і сьогодні.

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 - Тип посилання "Значок"

Розміри, які ви заявляєте, залежать від пристроїв, які ви хочете підтримувати. Деякі поширені та не дуже поширені розміри:

• 32х32
• 48x48
• 64х64
• 96х96
• 128x128 значок веб-магазину Chrome
• 160x160 Chrome для Android
• 192x192 Chrome для Android
• Значок швидкого набору операції 195x195
• 196x196 Chrome для Android
• 228x228 Піктограма узбережжя опери

Apple Touch Icon

Піктограми веб-кліпів 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>

Подальше читання та ресурси

• Шпаргалка Favicon

• Фавікони, сенсорні піктограми, піктограми плитки тощо. Які вам потрібні? - Написано як вікторина, але містить багато корисної інформації (і ви можете просто прочитати її як статтю, забудьте, що це вікторина)

• Посібник з іконами

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

• RealFaviconGenerator.net - Всебічний генератор фавікону .

• FAVIC-O-MATIC - Всебічний генератор фавікону з легко настроюваними вихідними форматами.

Цей інструмент - це економія часу. Спробуй! Він піклується про все за вас.

Завантажте зображення у розмірі приблизно 800px x 800px, щоб воно було приємним та чітким.

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.

Я теж шукав рішення фавікону і не хотів покладатися на будь-які сторонні веб-сервіси. Я не зміг знайти жодних загальних рішень, які б працювали як простий крок побудови, тому я створив 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.

Якщо мені щось не вистачає, будь ласка, надішліть запит на функцію.

У мене також є повідомлення в блозі з додатковою інформацією.

Я сподіваюся, що Ви вважаєте це корисним.

Тут ви знайдете багато корисної інформації щодо розмірів і генераторів.

Я можу додати до обговорення, пояснивши потреби дизайну різних розмірів.

Так, розміри фавікону, значків, символів та логотипів можуть базуватися на одному мистецтві, але кожен повинен бути віднесений саме до цього розміру, щоб він виглядав максимально точним (я кажу, що автогенератори не будуть добре обробляти псевдоніми та градієнти на Розмір 16 пікселів та автоматично сформоване зображення не будуть оптимізовані для розміру 128 пікселів, якщо ви почали менше.

Намалюйте своє зображення в 128 пікселях або будь-якому квадратному форматі великого розміру, використовуючи всі три хитрощі, які ви хочете. Експортуйте піктограми різного розміру по одному, вивчаючи результат та налаштовуючи майстер на найкращу роботу з цим розміром.

Для 16 x 16 я зроблю сітку квадратів 16х16 і розфарбую їх окремо, щоб мати найбільше управління результатами.