Website development
Development of mobile applications
HTML
Comments 44
+11
Не хватает только ссылки на сервис, который сгенерирует правильный и полный код для всех этих иконок.
-1
Был такой. Я им сделал и кучу иконок для разных устройств и браузеров и код для страницы из Svg лого.
0
Действительно, ведь когда каждый будет использовать «свой стандарт» / «корпоративный стандарт» — это гораздо лучше, чем 3 действующих ныне стандарта.
+4
А почему Keyten минусуют? (По-моему вполне себе в тему написал, и ни один подобный пост не обходиться без такой картинки(или как это называется))
+4
Сам я не минусовал, но могу предположить, что минусуют за отсутствие всплывающей подсказки при наведении на картинку (в первоисточнике она есть).
0
Поддерживается только последним огнелисом? Похоже, вендоры не торопятся. Наверно, это связано с несколько большими затратами на отрисовку браузером и большим объёмом файла.
0
Большой обьем файла делает корявый редактор который при любой возможности фигуры преобразует в набор кривых. Я в ручную сократил логотип до нескольких сот байт используя возможности SVG. Ещё и анимацию прилепил. Потом есть сжатый SVGZ. Браузер всегда может преобразовать вектор в растр и работать уже с ним. Можно наверно даже скрипт сделать который SVG перегонит в растр и поставит иконкой.
+4
Воздержусь от попытки представить результат растрирования SVG в иконку 16 на 16.
+1
SVG снимет только часть проблема с размерами. Но как быть с разным дизайном под разные платформы?
+1
Как я полагаю, данную проблему вообще нельзя решить для большинства случаев(опять же, есть исключения). Так как каждая платформа хочет иметь и имеет собственно уникальный дизайн(iOS, Android, Windows), то отсюда следуют выводы — если ты хочешь оставаться в «тренде», нужно делать под каждую ОС свою иконку приложения.
P.s. исключение: иногда под Android и iOS можно сделать одну и ту же иконку.
0
Это можно решить стилями. Но как заставить эти стили отработать на главном экране в iOS у меня нет идей
UFO landed and left these words here
0
В том же, в чем преимущество SVG для веба: поддержка ретины, для некоторых изображений меньший вес.
+4
На вопрос, какого размера должна быть картинка, правильный ответ, по-моему, должен быть такой: вектор.
Upd: Упс, вижу, меня опередили.
+1
Вектором может быть исходная картинка, из которой автоматом генерятся все остальные.
+8
Изучив оригинал статьи, а потом спеки от 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>
0
А apple-touch-icon-precomposed.png сознательно не указали?
Понимаю, что будет использоваться apple-touch-icon и скругляться средствами iOS, но в лог сервера будет какать ошибку «apple-touch-icon-precomposed.png 404». Для перфекционистов — истерия. :D
0
Можно ли не прописывать весь зоопарк размеров, а сделать одно большое изображение и указать его тегом <link rel=«icon» type=«image/png»...?
+1
Можно. Но тогда в иконке 16х16 может оказаться груда пикселей вместо осмысленного изображения. Чем меньше изображение, тем сложнее его передать. Возможно придется утрировать полное лого до его отдельного узнаваемого элемента.
0
Понятно. Тут уже будем смотреть по ситуации. Если в уменьшенном виде плохо смотрится, то придётся прописывать дополнительные иконки.
0
Жаль, что ico или подобный формат не прижился. Удобно хранить все иконки в одном файле.
+1
Хранить конечно удобнее, но при этом каждое устройство должно будет скачать весь набор иконок, а в случае с png скачиваются только нужные иконки.
+10
— Зачем нужен favicon.ico?
— Что-бы логи сервера не засерались 404-й ошибкой!
+1
Говорят можно просто:
<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon"> 
Но я не проверял :)
0
Оригинальной статье уже год и с тех пор очень многое изменилось.
0
Сколько не объявляй иконок в html, будут тысячи запросов к /favicon.ico, всегда к нему и всегда в корень. Без юзер-агента.
-1
Для тех, кто не занимается прорисовкой каждого размера фавиконки в отдельности с разной детализацией, было бы круто иметь сервис, куда можно залить векторную иконку и он сам нарежет ее на нужные размеры в нужных форматах и выдаст готовый архив для вставки в head.
UFO landed and left these words here
Only those users with full accounts are able to leave comments.  , please.