Як додати фавікон на свій веб-сайт?

Яка розмітка - це сучасний стандарт додавання фавікону на мій сайт? Який стандартний формат і розмір зображення?

Для роботи у всіх браузерах .icoбажано, а що стосується розміру, 32x32 є найбільш широко використовуваним, 16x16 також працює (це фактичний розмір, який використовується в браузері в більшості місць).

Також не у вашому питанні, вони повинні бути 8 або 24-бітовою глибиною кольору.

Можливо, варто зауважити, якщо ви плануєте, щоб користувачі, які здійснювали закладки на вашому веб-сайті, це окреме <link>зображення, наприклад StackOverflow:

<link rel="apple-touch-icon" href="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon.png">

Який є:

Ви можете використовувати такий інструмент, як http://www.favicon.cc/, щоб імпортувати зображення та перетворити його у фавікон або просто створити його з нуля.

Після цього, якщо ви дасте ім’я своєму файлу favicon.icoі помістите його в корінь вашого веб-сайту, більшість веб-браузерів отримує його автоматично.

Але ви також можете явно оголосити це у своїх HTML-файлах, як це:

<link rel="shortcut icon" type="image/png" href="path/to/your/favicon.png" />

З перевагами у використанні іншого формату, ніж icoвикористання різних файлів на сторінках різних, перекладіть свій фавікон в інше місце, використовуйте інше ім’я, ніж faviconтощо.

http://en.wikipedia.org/wiki/Favicon

Розмітка за допомогою повного http доріжки для IE та збереження фавікону в папці документів:

<link rel="shortcut icon" href="http://www.your-site-domain/favicon.ico">

Стандартний формат зображення:

• .ico
• 16 x 16 пікселів

Для різних пристроїв, браузерів та ОС ви можете використовувати різні значки. Наприклад, нижче наведено список, який може вас надихнути. У будь-якому випадку виправте / редагуйте список у міру просування.

<link rel="icon" type="image/x-icon" href="/images/icons/favicon.ico" />
<link rel="icon" type="image/png" sizes="96x96" href="/images/icons/favicon-96x96.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/images/icons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/images/icons/favicon-16x16.png" />
<link rel="shortcut icon" type="image/x-icon" href="/images/icons/favicon.ico" />
<link rel="apple-touch-icon" sizes="57x57" href="/images/icons/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="60x60" href="/images/icons/apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/images/icons/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="/images/icons/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/images/icons/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/images/icons/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/images/icons/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/images/icons/apple-touch-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/images/icons/apple-touch-icon.png" />
<link rel="icon" type="image/png" href="/images/icons/android-chrome-192x192.png" sizes="192x192" />
<link rel="mask-icon" href="/images/icons/safari-pinned-tab.svg" color="#5bbad5" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="msapplication-TileImage" content="/images/icons/mstile-144x144.png" />
<meta name="msapplication-config" content="/browserconfig.xml" />
<meta name="theme-color" content="#282B34" />

Вам більше не потрібне посилання, але воно корисне. Натомість, поки ви залишите файл з назвою favicon.ico (а це ico) у вашому корені, він буде використовуватися як фавікон.

У мене виникли невеликі проблеми зі створенням .ico-файлу з GIMP, але ця публікація дає докладні вказівки. Здається, фокус - це збереження у форматі GIF спочатку для перетворення в індексовану кольорову таблицю, а потім конвертування у формат ICO.