Які розміри фавікон, формати файлів та теги мета / посилань слід використовувати до 2020 року? Сюди входять піктограма яблук, вікна, андроїд та інші пристрої, якими користуються люди сьогодні.

Я використовую Opera, і я бачу, що він підтримує формат svg. Це найкраще рішення використовувати svg сьогодні? Чи є варіант "один файл підходить усім"?

Я переглядав багато веб-сайтів і перевіряв різні "генератори фавікону". Усім їм років і працюють в основному з файлами png.

Наприклад: Який код слід використовувати для ico та svg?

<link rel="icon" href="favicon.ico" type="image/ico">
<link rel="icon" href="favicon.svg" type="image/svg+xml">

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

<link rel="icon" sizes="16x16 24x24 32x32 48x48 64x64" href="favicon.ico">

Будь ласка, вкажіть параметри, формати файлів та теги мета / посилання того, що слід використовувати.

Відмова: Я є автором RealFaviconGenerator, який, як я очікую, буде оновлений (в основному, див. Нижче). Тож не дивуйтеся, якщо ця відповідь відповідає тому, що створює RFG.

Міф одинакового розміру

Немає піктограми "один розмір, який підходить усім". Ви не можете створити одну піктограму SVG та очікуйте, що вона буде працювати всюди.

З технічної точки зору, одна піктограма SVG була б хорошою справою. Але з точки зору інтерфейсу та UX це не бажаний результат. Порівняйте iOS та Android. На iOS усі піктограми домашнього екрана - це квадрат із закругленими кутами ( iOS заповнює прозорі ділянки значків Touch чорним кольором ). На Android піктограми домашнього екрана часто використовують не квадратні форми та прозорість (включаючи піктограми додатків Google). Надішліть значок одного дотику, і Android Chrome використовуватиме його. Але ви не зможете відповідати вказівкам щодо значків Android , тоді як виділений значок може.

Тому я радимо свідомо уникати використання одного значка. Коли це можливо, орієнтуйтеся на кожну платформу окремо (це не завжди так).

Піктограми, платформа на платформу

iOS Safari

iOS Safari очікує сенсорного значка . На сьогодні це зображення PNG розміром 180x180. Це зображення не повинно використовувати прозорість, і його кути будуть автоматично закруглені при додаванні на головний екран. Задекларовано:

<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">

З роками ця ікона стала "значком високої роздільної здатності за замовчуванням" для багатьох браузерів. Тож ви знайдете його в іншому місці, додаючи закладку тощо.

Android Chrome

Android Chrome покладається на Маніфест веб-додатків . Хоча цей маніфест не присвячений Android Chrome, він наразі є його головним прихильником. Тож наразі цілком безпечно вважати піктограми веб-програми Manifest для Android Chrome.

Як випливає з назви, Маніфест Web App - це, ну, веб-додатки. Але будь-який веб-сайт може використовувати його як спосіб посилання на деякі значки.

Android очікує піктограму PNG розміром 192x192, прозорість дозволена та заохочена.

Маніфест оголошується за допомогою:

<link rel="manifest" href="/icons/site.webmanifest">

Край та IE 12

Microsoft представила browserconfig , XML-документ, в якому перераховані різні значки, що відповідають інтерфейсу метро Metro.

Колір файлу та фону оголошуються за допомогою:

<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/icons/browserconfig.xml">

Класичні настільні браузери

Windows / macOS Chrome, Windows / macOS Firefox, Safari, IE ... Це було дещо розмитіше. Історично існував єдиний favicon.icoфайл, який все ще підтримується. Однак більшість останніх браузерів вибирають піктограми PNG, які легші. Крім того, деякі браузери не в змозі вибрати відповідний значок у файлі ICO (цей формат може вбудовувати кілька версій піктограми), що призводить до неправильного використання піктограми низької роздільної здатності.

Можна було б спокусити повністю скинути старе favicon.ico. Хоча я хотів би зробити цей стрибок у RFG, я не провів необхідні тести, щоб оцінити вплив на старі браузери.

Таким чином, комбо, яке я все-таки рекомендую сьогодні, із favicon.icoвбудованими значками 16х16, 32х32 та 48х48:

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

Інші браузери

Інші веб-переглядачі можуть мати спеціальні значки. Наприклад, Coast by Opera шукає піктограму 228x228 . Необхідність зосередитись на цих браузерах не очевидна. Зазвичай вони використовують сенсорну піктограму чи інші значки, коли не можуть знайти "свою" піктограму.

Висновок

Як було оголошено на початку, саме це створює RealFaviconGenerator .

Варто також згадати, що разом з favicon слід додати ще деякі теги, наприклад, теги OG, карти Twitter або MS-додаток. Все це служить одній і тій же цілі - візуальної ідентифікації вашого бренду, і його також слід включати.

Карту Twitter можна знайти ТУТ

Я додаю наступні теги

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@YourAccount">
<meta name="twitter:creator" content="@YourAccount">
<meta name="twitter:title" content="Title of your page">
<meta name="twitter:url" content="URL of your page">
<meta name="twitter:description" content="Your description here">
<meta name="twitter:image:src" content="URL of image">

Я виявив, що багато користувачів створюють зображення у форматі 1300 пікселів 650px та jpg / png.

Після додавання всіх тегів їх слід перевірити ТУТ

У Facebook OG є більше варіантів, але загальні такі:

<meta property="og:title" content="ENTER PAGE TITLE">
<meta property="og:type" content="website"><!--Different values possible -->
<meta property="og:url" content="ENTER PAGE URL">
<meta property="og:image" content="URL OF IMAGE">
<meta property="og:image:width" content="1240">
<meta property="og:image:height" content="650">
<meta property="og:site_name" content="ENTER YOUR SITE NAME">
<meta property="og:description" content="ENTER YOUR PAGE DESCRIPTION">
<meta property="fb:app_id" content="ENTER YOUR FB APP ID">

<meta property="og:see_also" content="URL to recommended page number 1">
<meta property="og:see_also" content="URL to recommended page number 2">
<!--UP TO 5 WEBSITE ADRESSES -->

Facebook рекомендує конкретне співвідношення зображення та розмір файлу обмежено 8Mb. Для збереження подібних зображень за допомогою Twitter-карти я рекомендую розміри 1240 пікселів на 650 пікселів та формат jpg / png. Facebook і twitter не приймають svg ...

Я виявив, що деякі світові бренди використовують цей тег на своїх веб-сайтах. Один мав розміри 150х150 пікселів та формат png. Це зображення може використовуватися браузерами для відображення в результатах пошуку.

<meta name="thumbnail" content="path/to/image/thumb-150x150.png">

Real Favicon Generator охоплює також і фаворити Microsoft. Існує багато інших метатегів для MS-додатків для оптимізації нахилу сторінки та інших відомостей, таких як зображення. Цю тему також варто прочитати.

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