Який на сьогодні найкращий спосіб отримати значок для відображення у всіх браузерах, що підтримують Favicons?

83

Який на сьогодні найкращий спосіб отримати значок для відображення у всіх браузерах, які наразі його підтримують?

Будь ласка, включіть:

  1. Які формати зображень підтримуються якими браузерами.

  2. Які рядки потрібні в яких місцях для різних браузерів.

html  standards  favicon 
— Фред
джерело
1
Можливо, варто також включити сюди "значки" для iPhone; тобто, якщо користувач вирішить додати ваш веб-сайт на свій головний екран. Код, що використовується в цьому випадку, такий: <link rel = "apple-touch-icon" href = "touch.png" /> Розміри повинні бути 57x57 пікселів. Крім того, ви можете опустити тег посилання і просто розмістити файл під назвою 'apple-touch-icon.png' у кореневому каталозі вашого веб-сайту.
— різний
Поки ви це робите, читайте це: mathiasbynens.be/notes/touch-icons
— Зак Лисобей
Зауважте, що вам знадобляться більші піктограми для дисплеїв iPad та retina iPhone. Див. Вказівки Apple: developer.apple.com/library/IOs/#documentation/…
— Mike Ottum

Відповіді:

108

Я йду за поясом і підходами тут.

Я створюю піктограму розміром 32x32 як у форматах, так .icoі .pngпід назвою favicon.icoта favicon.png. Назва піктограми насправді не має значення, якщо ви не маєте справу зі старішими браузерами.

  1. Розмістіть favicon.icoу кореневій частині вашого сайту підтримку старих браузерів (необов’язково і стосується лише старих браузерів.
  2. Розмістіть favicon.png у моєму підкаталозі зображень (лише для того, щоб все було в порядку).
  3. Додайте наступний HTML всередину <head>елемента.
<link rel = "icon" href = "/ images / favicon.png" type = "image / png" />
<link rel = "піктограма ярлика" href = "/ favicon.ico" />

Будь ласка, зверніть увагу, що:

  • Тип MIME для .icoфайлів зареєстровано як image / vnd.microsoft.icon компанією IANA .
  • Internet Explorer буде ігнорувати typeатрибут для відношення піктограми ярлика, і це єдиний браузер, який підтримує ці відносини, його не потрібно надавати.

Довідково

— Брайан Метьюз
джерело
2
Добре, у мене день "Microsoft їде мені на нерви". Я не можу змусити це працювати в Internet Explorer, незважаючи на те, що в ньому відображається значок веб-сайту stackoverflow. Чи існують якісь інші налаштування, які впливають на це, наприклад тип документа?
— belugabob
1
FYI - я знайшов відповідь. Якщо ви посилаєтесь на сайт через localhost: 8080 / index.html , це не спрацьовує - якщо ви використовуєте фактичне ім'я машини ( machineName: 8080 / index.html ), все функціонує так, як ви очікували. Я навіть не можу зрозуміти цю поведінку - хтось хоче спробувати?
— belugabob
2
Оновлення - поведінка спричинена кешуванням значка браузером. Очищення тимчасових файлів в Інтернеті вилікує це, якщо ви відчуєте себе щасливим, втративши кеш.
— belugabob
2
Чи було б акуратніше розмістити версію IE посилання в умовному коментарі IE?
— EoghanM
9
32x32 ?? Хіба 16х16 не є нормою?
— Едуардо Молтені,
10

Я використовую формат .ico і розміщую в <head>елементі наступні два рядки :

<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
— Джон Топлі
джерело
6

Для підтримки сенсорних піктограм для планшетів та смартфонів я віддаю перевагу підходу HTML5Boilerplate

Більше інформації про піктограми дотику можна знайти в цій статті .

При поточному статусі підтримки браузера вам навіть не потрібно додавати HTML-тег для значка у ваш документ. Браузери автоматично здійснюватимуть пошук у списку файлів, див. Цей приклад для iOS:

Якщо в HTML не вказано жодної піктограми, iOS Safari буде шукати в кореневому каталозі веб-сайту значки з попередньо складеним префіксом apple-touch-icon або apple-touch-icon. Наприклад, якщо відповідний розмір піктограми для пристрою становить 57 × 57 пікселів, iOS шукає імена файлів у такому порядку:

  1. apple-touch-icon-57x57-precomposed.png
  2. apple-touch-icon-57x57.png
  3. apple-touch-icon-precomposed.png
  4. apple-touch-icon.png

Я раджу не включати значок у свій документ, але мати список файлів, готовий на кореневому веб-сайті:

  • apple-touch-icon-114x114-precomposed.png
  • apple-touch-icon-144x144-precomposed.png
  • apple-touch-icon-57x57-precomposed.png
  • apple-touch-icon-72x72-precomposed.png
  • apple-touch-icon-precomposed.png
  • apple-touch-icon.png (57px*57px)
  • favicon.ico HiDPI (32x32px)

Коли ви завантажуєте шаблон з html5boilerplate.com, вони всі включені, вам просто потрібно замінити їх на власні значки.

— Віллем де Віт
джерело
Перше посилання застаріло, зараз потрібно перейти на github.com/h5bp/html5-boilerplate/blob/master/src/doc/… . Я б відредагував себе, але мало символів змінено: / Дякую за вашу відповідь!
— Brendan
4

IE6 не може правильно обробляти PNG, будьте застережені.

— німіш
джерело
3

Favicon повинен бути файлом .ico, щоб нормально працювати у всіх браузерах.

Сучасні браузери також підтримують зображення у форматі PNG та GIF.

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

— Антті Кіссаніємі
джерело
3

Також є сайт, де ви можете перевірити, як робиться значок будь-якої сторінки

getfavicon.org

Там ви можете побачити підручник про створення значків, типи зображень та роздільну здатність, це приємно!

Більше не працює.
— Роман Старков
2

favicon.*Більшість браузерів автоматично визначає наявність у вашому кореневому каталозі. Ви можете переконатися, що це виявлено, використовуючи:

 <link rel="icon" type="image/png" href="/path/image.png" />

Особисто я використовую зображення .png, але більшість форматів повинні працювати.

— Росс
джерело
Ні, це не "значок. *", Працює лише дуже мало форматів: ico, png, gif, jpeg та SVG. Див. En.wikipedia.org/wiki/Favicon#File_format_support .
— WhyNotHugo
1

Відповідь на це запитання настільки ускладнився, що найкращим способом є просто використовувати такий інструмент, як RealFaviconGenerator, який дозволяє завантажувати png / jpg, а потім генерує значки та код для охоплення всіх платформ для вас: https: // realfavicongenerator. нетто /

— npfoss
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.