Трудности Favicon

Трудности favicon Готовясь к студенческой олимпиаде по web-разработке, я понял, что надо уделить внимание мелочам. Вот, например, favicon. Что может быть проще? Положил favicon.ico в корень и радуешься жизни. А вот и не все так просто.

  • Во-первых, в идеале favicon.ico должен содержать иконки следующих размеров: 16х16, 24x24, 32x32, 48x48, 64x64.
  • Во-вторых, еще бы не помешали иконки в .png следующих размеров (для живых тайлов в IE11): 70x70, 150x150, 310x310.
  • В-третих, еще бы нужна иконка в .png размеров 195x195 для Opera Speed Dial.
  • Наконец, иконки для iOS и Android нужны следующих размеров (для поддрежки как и iOS ≤ 6, так и iOS ≥ 7): 57х57, 72x72, 76x76, 114x114, 120x120, 144x144, 152x152.

Конечно, это все необязательно, но уж точно хуже не будет. Но как генирировать такое кол-во иконок?

PSD шаблон?

Сначала я нашёл .psd шаблон, который автоматически генерит иконки нужных размеров. Но он не рассчитан под новые размеры, которые рекоммендует Apple после выхода iOS 7 (76x76, 120x120, 152x152). Не беда! Форкнул, отредактировал, закоммитил, запушил. Теперь с блекджеком поддержкой iOS 7. Но все же как то это не удобно: фотошоп, да и .ico файл сам не генерит. Слижком много движений руками.

Скрипт?

Нашёл скрипт webicon.sh, который генерит .png разного размера, затех из них делает .ico и показывает html код, который надо вставить в шапку страницы. Но меня он тоже не устроил. Форкнул, изменил. В отличиее от первоначального варианта, моя версия скрипта:

  • Оптимизирует каждый сгенерированный .png коммандой optipng (новая зависимость)
  • Иконки для iOS (и Android) получают название в соответствии с шаблоном: apple-touch-icon-РАЗМЕРхРАЗМЕР-precomposed.png
  • Иконки для iOS (и Android) делаются непрозрачными (прозрачный заменяется на белый)
  • favicon.ico может быть прозрачной
  • favicon.ico включает в себя следующие размеры: 16х16, 24x24, 32x32, 48x48, 64x64
  • Те .png, которые необходимы только для генерации .ico, удаляются
  • Добавлена генерация .png размеро 195х195 для поддержки Opera Speed Dial
  • Отредактирован вывод html (улучшена поддрежка iOS, добавлена поддержка Opera Speed Dial)
  • Добавлено изображение для теста

Теперь скрипт генерит следующие файлы:

  • apple-touch-icon-57x57-precomposed.png
  • apple-touch-icon-72x72-precomposed.png
  • apple-touch-icon-76x76-precomposed.png
  • apple-touch-icon-114x114-precomposed.png
  • apple-touch-icon-120x120-precomposed.png
  • apple-touch-icon-144x144-precomposed.png
  • apple-touch-icon-152x152-precomposed.png
  • favicon-70.png
  • favicon-150.png
  • favicon-195.png
  • favicon-310.png
  • favicon.ico

После генерации скрипт показывает следующий код, который нужно вставить в <head> сайта:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<link rel="icon" sizes="16x16 32x32 48x48 64x64" href="favicon.ico">
<!--[if IE]><link rel="shortcut icon" href="favicon.ico"><![endif]-->

<!-- The below are optional but encouraged -->


<!-- The below are optional -->

<!-- IE 10 Metro tile icon (Metro equivalent of apple-touch-icon): -->
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="apple-touch-icon-144x144-precomposed.png">
<!-- Opera Speed Dial icon -->
<link rel="icon" sizes="195x195" href="favicon-195.png">
<!-- IE 11 live tiles: -->
<meta name="msapplication-square70x70logo" content="favicon-70.png" />
<meta name="msapplication-square150x150logo" content="favicon-150.png" />
<meta name="msapplication-square310x310logo" content="favicon-310.png" />
<!-- For iPad with high-resolution Retina display running iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152-precomposed.png">
<!-- For iPad with high-resolution Retina display running iOS ≤ 6: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed">
<!-- For iPhone with high-resolution Retina display running iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120-precomposed.png">
<!-- For iPhone with high-resolution Retina display running iOS ≤ 6: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">
<!-- For the iPad mini and the first- and second-generation iPad on iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76-precomposed.png">
<!-- For the iPad mini and the first- and second-generation iPad on iOS ≤ 6: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-57x57-precomposed.png">

Скачать скрипт. Перед использованием необходимо установить imagemagick и optipng. На маке легче всего это сделать через homebrew. Сам скрипт лучше всего его положить в папку, которая включена в $PATH, чтобы с легкостью запускать его просто коммандой webicon.sh.

Комментарии