Favicons, Touch Icons, Tile Icons і т. д. Що вибрати?

Від перекладача.
Це переклад статті Філіпа Бернарда з сайту css-tricks.com. Частина статті, яка містить опис роботи з створеним ним сервісом, я дозволив собі опустити. Якщо ви знайшли помилку, прохання повідомити про них в особистому повідомленні.

Стаття містить результати проведеного ним дослідження, яким повинен бути фавикон(і те що його замінює), щоб добре відображатися в різних випадках.


Фавикон був представлений в 1999 році, в Internet Explorer 5джерело) і стандартизований W3C кілька місяців потому. Це була маленька іконка, що представляє сайт.


З тих пір, більшість настільних браузерів слідують тенденції і використовують фавикон, тим або іншим способом. Це дуже просто, чи не так? Створити маленьку картинку, і додати в будь-який інтернет-проект, щоб зробити його «завершеним». Нічого складного. Чи ні?

Влаштуємо вікторину!

Який основний файл фавикона?

Відповідь: favicon.ico. Просто, щоб переконатися: це не PNG перейменований в favicon.ico. Хоча, деякі браузери пробачать цю помилку, ICO це інший формат, що підтримує кілька версій зображення.

Питання: Якого розміру повинен бути favicon.ico?

A: 16х16. Стандартний.
B: 32х32. Хіба фавикон не оновлювався деякий час назад?
C: 64x64. Знаєте, з усіма цими новими екранами з високою щільністю пікселів.
D: Ні один з перерахованих.

Відповідь: D.

Формат favicon.ico спочатку задуманий Майкрософт, і підтриманий деякими іншими виробниками. Майкрософт рекомендує розмір 16х16, 32х32 і 48х48. Так, один ICO може містити кілька зображень.

Браузери зазвичай відображають фавикон на вкладках, і на звичайних дозволу, версія 16х16 виглядає добре:

16х16 на вкладці Chrome. Поки все добре.

Але іконка 16х16 занадто мала для інших місць: панелі завдань і робочого столу.

16х16 в панелі завдань.


16х16 на робочому столі. Не добре.

Коли іконка містить кілька зображень, результат набагато краще.

16х16, 32х32 і 48х48 favicon.ico в панелі завдань. Виглядає як звичайна програма.


16х16, 32х32 і 48х48 favicon.ico на робочому столі. Ідеально.

Питання: Якого призначення favicon.png?

Насправді, частіше зустрічається інший файл, favicon.png. Люди часто запитують про це.
Що це насправді?

A: Іконка для браузерів не підтримують favicon.ico. Такі як Firefox, напевно?
B: Іконка високого дозволу. Знаєте, з усіма цими новими екранами з високою щільністю пікселів.
C: Артефакт з минулого. Тепер, це нові іконки, наприклад, Apple Touch icon.
D: Всі разом.

Відповідь: D.
Починаючи з прийняття HTML5, favicon.ico не дуже корисний. Був представлений атрибут 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">

Так що ми повинні оголошувати?

Давайте подивимося правді в очі. Хоча, майже всі, настільні браузери підтримують favicon.ico, цей файл застарів. Так, ви можете використовувати цей файл і все буде працювати як задумано. Але серйозно, це застарілий формат. Він не використовується ніде крім веба. PNG підтримується набагато краще.

favicon.ico це для старих версій IE. Для інших браузерів і останніх версій IE, використовуйте PNG іконки. Так які sizes необхідно визначати? Скоро дізнаємося.

Питання: Який формат необхідний для підтримки мобільних платформ?

Згідно SmartInsights, більше 26% веб-трафіку генерується смартфонами і планшетами. Це майбутнє. Що потрібно, для підтримки цього світу?

A: favicon.ico. Це працювало 15 років тому, працює і сьогодні.
B: PNG іконки. Ви сказали, що розповісте про це.
C: Apple Touch icon. Кеп.
D: Тут все одно немає правильної відповіді.

Відповідь: D. Потрібні PNG іконки. І Apple Touch icon. І плитки для Windows 8. Файл під назвою browserconfig.xml.

Мобільні платформи набагато більш гетерогенны, ніж звичайні настільні браузери. Розміри екранів і вирішення дуже сильно варіюються і немає переважаючою операційної системи, такий як Windows, як це було в часи появи інтернету.
Наслідок: не думайте, що мобільний фавикон може бути однієї універсальної картинкою, або мати універсальне оголошення в HTML коді.

Питання: Якого розміру повинні бути PNG іконки?

A: 96х96 для Google TV
B: 196х196 для Android Chrome
C: 228х228 для Opera Coast
D: Всі перераховані


Відповідь: D, і навіть більше. Наприклад, 160х160 для старої версії швидкого набору Opera(давно в минулому), або 128х128 для Chrome Web Store, все сильно залежить від платформи яку ви збираєтеся підтримувати.

Питання: Який розмір Apple Touch icon?

Apple Touch icon використовувані для iOS закладок і сайтів «на домашньому екрані». На розум приходить 57х57, браво. Це правильно. Тільки це було 7 років тому, коли був випущений перший iPhone.

Відповідь: Аж до 180х180.

Після появи першого iPhone, було 3 важливих релізу:
  • iPad. Екран набагато більшого розміру.
  • Retina-екрани. З удвоеной щільністю пікселів.
  • iOS7. Плоский дизайн відрізняється на iPhone/iPad.
Всього є 9 комбінацій.
Пристрій Екран Версія iOS Розмір іконки
iPhone Classic 6 і нижче 57x57
7 60x60
Retina 6 і нижче 114x114
7 120x120
6 Plus 8 і вище 180x180
iPad Classic 6 і нижче 72x72
7 76x76
Retina 6 і нижче 144x144
7 152x152

Стара 57х57 Apple Touch icon на блискучому Retina iPad. Мутно.


Велика 152х152 Apple Touch icon на Retina iPad. Акуратно.

Якщо ви відповіли неправильно, не турбуйтеся. З 5000 популярних сайтів, які надають apple-touch-icon.png, менше 4% роблять це правильно.

Деякий можуть заперечити, що всі 9 зображень не дуже-то й потрібні. Однак, принаймні, основна Apple Touch icon повинна бути 152х152. Retina iPad, під iOS 7, знайде що потрібно, а молодші пристрої можуть зменшити зображення.

Питання: чи Необхідно, оголошувати Apple Touch icon в HTML?

A: Не знаю. Треба щось відповісти!
B: Так. Інакше як iOS знайде їх?
C: Ні. Apple пропонує рекомендації, так що будь iOS пристрій все одно їх надітий.
D: Ні, але...

Відповідь: D… але деякі інші платформи теж використовують Apple Touch icon, краще їх оголосити.
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">

Як би дивно це не звучало, пристрої під iOS не єдині, які шукають Apple Touch icon. Оскільки, вони популярнішим і зустрічаються частіше інших PNG іконок високих дозволів, деякі браузери, начебто Android Chrome, використовують їх. Таким чином, краще їх оголошувати, це дозволить відвідувачеві з сумісним пристроєм або браузером використовувати одну їх.

Питання: Як оголосити плитку для планшетів на Windows 8?

A: Планшет на Windows 8? Що це таке?
B: favicon.ico. Спадщина Стіва Балмера.
C: Мета-теги. Два msapplication-TileColor msapplication-TileImage.
D: browserconfig.xml.

Відповідь: C для Windows 8 і IE 10, D для Windows 8.1 і IE 11. Відповідь A в чомусь теж вірний.

Оголошення для Windows 8.0 виглядає якось так:
<meta name="msapplication-TileColor" content="#2b5797">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">

Windows 8.1 і IE 11 очікують кілька версії зображення, оголошених у browserconfig.xml. Наприклад:
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="/mstile-70x70.png"/>
<square150x150logo src="/mstile-150x150.png"/>
<square310x310logo src="/mstile-310x310.png"/>
<wide310x150logo src="/mstile-310x150.png"/>
<TileColor>#2b5797</TileColor>
</tile>
</msapplication>
</browserconfig>

Новий інтерфейс Metro пропонує кілька нових принципів дизайну, наприклад «білі силуети», використовувані більшістю встановлених програм.

Плитки сайтів в Windows 8.

Питання: Який розмір плитки square150x150logo?

A: 150х150. Ви не вмієте читати?
B: Інший.

Відповідь: B, 270х270. Майкрософт рекомендує більший розмір, в цілях підтримки екранів з високою щільністю пікселів.

Поздоровляємо, ви закінчили вікторину! Як ви це зробили?

Суть цих питань показати якій складній може бути дійсність, незважаючи на уявну простоту. Часи коли фавикон був єдиним favicon.ico давно пішли. Але старі звички зберігаються, і можуть призвести до абсурдних ситуацій. Ми витрачаємо дні на акуратний чуйний дизайн, і додаємо тільки 57х57 Apple Touch icon, що підходить тільки для старих пристроїв, якими сьогодні вже майже ніхто не користується.

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.