Надані відповіді (на момент публікації цієї публікації) - це лише відповіді на посилання, тому я думав, що я підсумую посилання у відповідь і що я буду використовувати.
Працюючи над створенням крос-браузерних фавіконів (включаючи сенсорні піктограми), слід враховувати кілька речей.
Перший (звичайно) - Internet Explorer. IE не підтримує файли PNG до версії 11. Отже, наш перший рядок - це умовний коментар для фавіконів у IE 9 та нижче:
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->
Щоб охопити використання значка, створіть його в 32х32 пікселів. Зауважте, що rel="shortcut icon"IE розпізнає значок, йому потрібне слово, shortcutяке не є стандартним. Також ми загортаємо .icoфавікон в умовний коментар IE, оскільки Chrome і Safari використовуватимуть .icoфайл, якщо він присутній, незважаючи на інші варіанти, а не те, що ми хотіли б.
Вищеописане стосується IE до IE 9. IE 11 приймає піктограми PNG, однак IE 10 не відповідає. Також IE 10 не читає умовних коментарів, тому IE 10 не покаже фавікон. Якщо IE 11 і Edge доступні, я не бачу IE 10 у широкому використанні, тому я ігнорую цей браузер.
Для решти браузерів ми будемо використовувати стандартний спосіб навести фавікон:
<link rel="icon" href="path/to/favicon.png">
Цей значок повинен бути розміром 196x196 пікселів, щоб охопити всі пристрої, які можуть використовувати цей значок.
Щоб висвітлити сенсорні піктограми на мобільних пристроях, ми використаємо фірмовий спосіб Apple, щоб навести сенсорну піктограму:
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
Використання rel="apple-touch-icon-precomposed"не застосовуватиме світловідбиваючий блиск при закладці на iOS. Щоб iOS застосував використання блиску rel="apple-touch-icon". Цей значок повинен бути розміром до 180х180 пікселів, оскільки це поточний розмір, який рекомендує Apple для останніх iPhone та iPad. Я читав, що Blackberry також використовуватиме rel="apple-touch-icon-precomposed".
Як зауваження: Chrome для Android заявляє:
Apple-touch- * є застарілим, і він буде підтримуватися лише короткий час. (Написано як бета-версія для m31 Chrome).
Спеціальні плитки для IE 11+ у Windows 8.1+
IE 11+ у Windows 8.1+ пропонує спосіб створення закріплених плиток для вашого сайту.
Microsoft рекомендує створити кілька плиток такого розміру:
Малий: 128 х 128
Середній: 270 x 270
Широкий: 558 х 270
Великий: 558 x 558
Це повинні бути прозорі зображення, оскільки ми визначатимемо кольоровий фон далі.
Після створення цих зображень вам слід створити XML-файл, викликаний browserconfig.xmlтаким кодом:
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="images/smalltile.png"/>
<square150x150logo src="images/mediumtile.png"/>
<wide310x150logo src="images/widetile.png"/>
<square310x310logo src="images/largetile.png"/>
<TileColor>#009900</TileColor>
</tile>
</msapplication>
</browserconfig>
Збережіть цей XML-файл у корені вашого сайту. Коли сайт закріплений, IE шукає цей файл. Якщо ви хочете назвати файл XML чимось іншим або мати його в іншому місці, додайте цей метатег до head:
<meta name="msapplication-config" content="path-to-browserconfig/custom-name.xml" />
Для отримання додаткової інформації про користувацькі плитки IE 11+ та використання файлу XML відвідайте веб-сайт Microsoft .
Збираємо все це разом:
Зведений вище код буде виглядати приблизно так:
<!-- For IE 9 and below. ICO should be 32x32 pixels in size -->
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->
<!-- Touch Icons - iOS and Android 2.1+ 180x180 pixels in size. -->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
<!-- Firefox, Chrome, Safari, IE 11+ and Opera. 196x196 pixels in size. -->
<link rel="icon" href="path/to/favicon.png">
Живі плитки Windows Phone
Якщо користувач використовує Windows Phone, він може прикріпити веб-сайт до початкового екрана свого телефону. На жаль, коли вони роблять це, на екрані відображається скріншот вашого телефону, а не фавікон (навіть не специфічний для MS код, на який згадувалося вище). Щоб створити "Плитку в прямому ефірі" для користувачів Windows Phone для вашого веб-сайту, потрібно використовувати наступний код:
Ось докладні вказівки від Microsoft, але ось резюме:
Крок 1
Створіть квадратне зображення для свого веб-сайту, щоб підтримати екрани з високою роздільною здатністю, створити його розміром у 768x768 пікселів.
Крок 2
Додайте приховане накладання цього зображення. Ось приклад коду від Microsoft:
<div id="TileOverlay" onclick="ToggleTileOverlay()" style='background-color: Highlight; height: 100%; width: 100%; top: 0px; left: 0px; position: fixed; color: black; visibility: hidden'>
<img src="customtile.png" width="320" height="320" />
<div style='margin-top: 40px'>
Add text/graphic asking user to pin to start using the menu...
</div>
</div>
Крок 3
Потім ви можете додати наступний рядок, щоб додати контактну інформацію для початку посилання:
<a href="javascript:ToggleTileOverlay()">Pin this site to your start screen</a>
Корпорація Майкрософт рекомендує виявляти телефон Windows і показувати лише ті посилання тим користувачам, оскільки він не працює для інших користувачів.
Крок 4
Далі ви додаєте кілька JS, щоб переключити видимість накладання
<script>
function ToggleTileOverlay() {
var newVisibility = (document.getElementById('TileOverlay').style.visibility == 'visible') ? 'hidden' : 'visible';
document.getElementById('TileOverlay').style.visibility = newVisibility;
}
</script>
Примітка про розміри
Я використовую один розмір, оскільки кожен браузер зменшить зображення в міру необхідності. Я можу додати більше HTML, щоб вказати кілька розмірів, якщо потрібно для тих, хто має меншу пропускну здатність, але я вже сильно стискаю файли PNG, використовуючи TinyPNG, і я вважаю це непотрібним для своїх цілей. Крім того , в відповідно до philippe_b «s відповіді Chrome і Firefox є помилки , які змушують браузер завантажити всі розміри іконок. Використання однієї великої піктограми через це може бути кращим, ніж кілька менших.
Подальше читання
Для тих, хто хотів би отримати більше деталей, дивіться посилання нижче: