Значки / иконки для популярных юнитов / браузеров / ОС

Question

Я использую генератор иконок для создания значков / значков для различных популярных модулей / браузеров / ОС для веб-сайта

Результат:

<link rel="shortcut icon" href="favicon.ico />
<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" />
<link rel="icon" type="image/png" sizes="196x196" href="favicon-196x196.png" />
<link rel="icon" type="image/png" sizes="160x160" href="favicon-160x160.png" />
<link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png" />
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png" />
<meta name="msapplication-TileColor" content="#ffffff" />
<meta name="msapplication-TileImage" content="mstile-144x144.png" />
<meta name="msapplication-config" content="browserconfig.xml" />

Конечно, это кажется немного чрезмерным. Я никогда не видел, чтобы ЛЮБОЙ сайт использовал это множество вариантов иконок

Мне бы хотелось, чтобы значок был доступен в большинстве популярных устройств, чтобы люди могли также добавить веб-сайт на домашний экран и т. Д. (Со значком).

Но действительно ли все это необходимо, или я могу легко сократить его до нескольких?

Что бы произошло, если бы я, например, использовал только один размер 152x152 для устройств Apple и пропустил меньшие размеры?

Answer 1

После дополнительных исследований я получил следующее решение:

<link rel="icon" type="image/png" href="favicon.png" />
<!--[if IE]><link rel="shortcut icon" type="image/x-icon" href="favicon.ico"><![endif]-->
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
<meta name="msapplication-TileColor" content="#111111" />
<meta name="msapplication-TileImage" content="mstile.png" />

Эта страница помогла некоторым http://www.jonathantneal.com/blog/understand-the-favicon/

favicon.png - 96x96

favicon.ico - 48x48 (или 3 варианта в одном файле)

apple-touch-icon.png - 152x152

mstile.png - 144x144

Итак, файлы немного большие, но в этом случае мне не нужно загружать версии и файлы. Кроме того, файл размером 4–8 Кбайт не так важен для загрузки пользователем (даже на телефоне), и любое устройство должно захватить файл и при необходимости уменьшить его.

Answer 2

Первое решение - файлы в корневом каталоге

Создайте:

• favicon.ico, как обычно, как изображение ICO 16x16. Это для старых версий IE.
• apple-touch-icon.png как изображение PNG 152x152. Это для всех устройств iOS и Android Chrome.
• favicon-196x196.png как изображение PNG 196x196. Это для последних настольных браузеров (а также Android Chrome, также он предпочитает иконки Apple Touch во время написания).
• mstile-144x144.png в формате PNG размером 144x144. Для Windows 8 / IE 10 и Windows 8.1 / IE 11.

Разместите их в корневом каталоге вашего веб-сайта.

Объявите их с:

<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="196x196" href="/favicon-196x196.png" />
<meta name="msapplication-TileColor" content="#ffffff" />
<meta name="msapplication-TileImage" content="/mstile-144x144.png" />

Как вы думаете, значки будут уменьшены по мере необходимости.

Ага, favicon.ico не объявлено IE найдет его, пока он находится в корне веб-сайта. То же самое для browserconfig.xml в случае, если вы используете это.

Альтернативное решение - файлы не в корневом каталоге

Создайте те же значки, что и выше.

Разместите их где-нибудь на вашем веб-сайте, например. /path/to/icons,

Объявите их с:

<link rel="shortcut icon" href="/path/to/icons/favicon.ico />
<link rel="apple-touch-icon" sizes="152x152" href="/path/to/icons/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="196x196" href="/path/to/icons/favicon-196x196.png" />
<meta name="msapplication-TileColor" content="#ffffff" />
<meta name="msapplication-TileImage" content="/path/to/icons/mstile-144x144.png" />

Answer 3

Полностью перебор. Для Apple вам нужно только следующее

apple-touch-icon.png (57x57 iPhone and iPod touch)
apple-touch-icon-72x72.png (72x72 iPad 1st and 2nd gen)
apple-touch-icon-114x114.png (114x114 retina iPhone and iPod touch)
apple-touch-icon-144x144.png (144x144 retina iPad)

однако если вы пропустите какой-либо из них, произойдет следующее:

The icon that is the most appropriate size for the device is used. If no sizes attribute is set, the element’s size defaults to 60 x 60.

  If there is no icon that matches the recommended size for the device, the smallest icon larger than the recommended size is used. If there are no icons larger than the recommended size, the largest icon is used.

  If no icons are specified using a link element, the website root directory is searched for icons with the apple-touch-icon... prefix. For example, if the appropriate icon size for the device is 60 x 60, the system searches for filenames in the following order:

apple-touch-icon-76x76.png

apple-touch-icon.png

(извлечено из библиотеки разработчиков IOS)

Таким образом, вы можете легко использовать только 144x144.png и ничего не произойдет, это зависит от того, хорошо ли выглядит ваш дизайн иконок в небольших размерах или нет, но вы можете полностью использовать только один размер

Answer 4

Мое решение:

1) Подготовьте изображение значка в разрешении 310x310 и формате PNG.

2) Зайдите на http://faviconit.com/, создайте ваши значки избранного, загрузите и распакуйте, скопируйте все в какую-либо папку в проекте (в моем случае root / favicon /)

3) затем перейдите по http://www.favicon-generator.org/, создайте свои значки избранного, загрузите и распакуйте, затем скопируйте только android-icons (android-icon - *. Png) и manifest.json в какую-то папку в проекте (в моем случае root / favicon /)

4) не забудьте изменить пути в manifest.json и browserconfig.xml

5) затем используйте в своей HTML-голове что-то вроде этого:

<link rel="shortcut icon" href="/favicon/favicon.ico">
<link rel="icon" sizes="16x16 32x32 64x64" href="/favicon/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32.png">
<link rel="icon" type="image/png" sizes="64x64" href="/favicon/favicon-64.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon/favicon-96.png">
<link rel="icon" type="image/png" sizes="160x160" href="/favicon/favicon-160.png">
<link rel="icon" type="image/png" sizes="192x192" href="/favicon/favicon-192.png">
<link rel="apple-touch-icon" sizes="57x57" href="/favicon/favicon-57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/favicon/favicon-60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/favicon/favicon-72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/favicon/favicon-76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/favicon/favicon-114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/favicon/favicon-120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/favicon/favicon-144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/favicon/favicon-152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/favicon-180.png">
<link rel="manifest" href="/favicon/manifest.json">
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="/favicon/favicon-144.png">
<meta name="msapplication-config" content="/favicon/browserconfig.xml">
<meta name="theme-color" content="#ffffff">