Favicons, Touch Icons, Tile Icons и т. д. Что выбрать?

[ilyak]

Не хватает только ссылки на сервис, который сгенерирует правильный и полный код для всех этих иконок.

[datacompboy]

www.perl.org?

[ivan386]

Был такой. Я им сделал и кучу иконок для разных устройств и браузеров и код для страницы из Svg лого.

[ADOLF88HITLER]

Пусть лучше страдает машина.

github.com/gleero/grunt-favicons

[thelongrunsmoke]

Есть в оригинале, RealFaviconGenerator

[zevilz]

Отличный сервис. Давно им пользуюсь.

[jemali_m]

Взять все эти стандарты и сжечь!

[BaRoN]

Действительно, ведь когда каждый будет использовать «свой стандарт» / «корпоративный стандарт» — это гораздо лучше, чем 3 действующих ныне стандарта.

[Keyten]

А давайте придумаем единый стандарт!

[Mishok2000]

А почему Keyten минусуют? (По-моему вполне себе в тему написал, и ни один подобный пост не обходиться без такой картинки(или как это называется))

[Mithgol]

Сам я не минусовал, но могу предположить, что минусуют за отсутствие всплывающей подсказки при наведении на картинку (в первоисточнике она есть).

[ivan386]

А почему не SVG?

[thelongrunsmoke]

А насколько это совместимо?

[ivan386]

Не очень. Но надеюсь это исправится.

[thelongrunsmoke]

Поддерживается только последним огнелисом? Похоже, вендоры не торопятся. Наверно, это связано с несколько большими затратами на отрисовку браузером и большим объёмом файла.

[ivan386]

Большой обьем файла делает корявый редактор который при любой возможности фигуры преобразует в набор кривых. Я в ручную сократил логотип до нескольких сот байт используя возможности SVG. Ещё и анимацию прилепил. Потом есть сжатый SVGZ. Браузер всегда может преобразовать вектор в растр и работать уже с ним. Можно наверно даже скрипт сделать который SVG перегонит в растр и поставит иконкой.

[thelongrunsmoke]

Воздержусь от попытки представить результат растрирования SVG в иконку 16 на 16.

[Serator]

(удалено)

[fetis26]

SVG снимет только часть проблема с размерами. Но как быть с разным дизайном под разные платформы?

[Mishok2000]

Как я полагаю, данную проблему вообще нельзя решить для большинства случаев(опять же, есть исключения). Так как каждая платформа хочет иметь и имеет собственно уникальный дизайн(iOS, Android, Windows), то отсюда следуют выводы — если ты хочешь оставаться в «тренде», нужно делать под каждую ОС свою иконку приложения.
P.s. исключение: иногда под Android и iOS можно сделать одну и ту же иконку.

[ivan386]

Возможно это решается css стилями.

[fetis26]

Это можно решить стилями. Но как заставить эти стили отработать на главном экране в iOS у меня нет идей

[foxnet]

А в чем преимущество использования SVG в фавикон?

[k12th]

В том же, в чем преимущество SVG для веба: поддержка ретины, для некоторых изображений меньший вес.

[torbasow]

На вопрос, какого размера должна быть картинка, правильный ответ, по-моему, должен быть такой: вектор.
Upd: Упс, вижу, меня опередили.

[k12th]

Вектором может быть исходная картинка, из которой автоматом генерятся все остальные.

[aTei]

Изучив оригинал статьи, а потом спеки от Google, Apple и Microsoft, мы упростили до такого:
favicon.ico, который кладем в корень сайта
В html

<link rel="apple-touch-icon" sizes="192x192" href="favicons/favicon-192x192.png">
<link rel="icon" type="image/png" sizes="192x192" href="favicons/favicon-192x192.png">
<meta name="msapplication-config" content="browserconfig.xml">

В browserconfig.xml

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo   src="favicons/mstile-70x70.png"/>
      <square150x150logo src="favicons/mstile-150x150.png"/>
      <square310x310logo src="favicons/mstile-310x310.png"/>
      <wide310x150logo   src="favicons/mstile-310x150.png"/>
      <TileColor>#bada55</TileColor>
    </tile>
  </msapplication>
</browserconfig>

[Pulse]

А apple-touch-icon-precomposed.png сознательно не указали?
Понимаю, что будет использоваться apple-touch-icon и скругляться средствами iOS, но в лог сервера будет какать ошибку «apple-touch-icon-precomposed.png 404». Для перфекционистов — истерия. :D

[aTei]

Сознательно. Ошибку «какать» не будет :)

[Finesse]

Можно ли не прописывать весь зоопарк размеров, а сделать одно большое изображение и указать его тегом <link rel=«icon» type=«image/png»...?

[stn]

Можно. Но тогда в иконке 16х16 может оказаться груда пикселей вместо осмысленного изображения. Чем меньше изображение, тем сложнее его передать. Возможно придется утрировать полное лого до его отдельного узнаваемого элемента.

[Finesse]

Понятно. Тут уже будем смотреть по ситуации. Если в уменьшенном виде плохо смотрится, то придётся прописывать дополнительные иконки.

[Finesse]

Жаль, что ico или подобный формат не прижился. Удобно хранить все иконки в одном файле.

[IvanNovikov]

Хранить конечно удобнее, но при этом каждое устройство должно будет скачать весь набор иконок, а в случае с png скачиваются только нужные иконки.

[r00tGER]

— Зачем нужен favicon.ico?
— Что-бы логи сервера не засерались 404-й ошибкой!

[faiwer]

Говорят можно просто:

<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon"> 

Но я не проверял :)

[ivan386]

С картинками тоже отображается favicon.

[pepelsbey]

Оригинальной статье уже год и с тех пор очень многое изменилось.

[thelongrunsmoke]

Можно подробнее?

[father_gorry]

Сколько не объявляй иконок в html, будут тысячи запросов к /favicon.ico, всегда к нему и всегда в корень. Без юзер-агента.

[Alexx_ps]

Для тех, кто не занимается прорисовкой каждого размера фавиконки в отдельности с разной детализацией, было бы круто иметь сервис, куда можно залить векторную иконку и он сам нарежет ее на нужные размеры в нужных форматах и выдаст готовый архив для вставки в head.

[KREGI]

github.com/haydenbleasel/favicons