Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 44
Не хватает только ссылки на сервис, который сгенерирует правильный и полный код для всех этих иконок.
Есть в оригинале, RealFaviconGenerator
Взять все эти стандарты и сжечь!
Действительно, ведь когда каждый будет использовать «свой стандарт» / «корпоративный стандарт» — это гораздо лучше, чем 3 действующих ныне стандарта.
А давайте придумаем единый стандарт!
А почему Keyten минусуют? (По-моему вполне себе в тему написал, и ни один подобный пост не обходиться без такой картинки(или как это называется))
Сам я не минусовал, но могу предположить, что минусуют за отсутствие всплывающей подсказки при наведении на картинку (в первоисточнике она есть).
А почему не SVG?
А насколько это совместимо?
Не очень. Но надеюсь это исправится.
Поддерживается только последним огнелисом? Похоже, вендоры не торопятся. Наверно, это связано с несколько большими затратами на отрисовку браузером и большим объёмом файла.
Большой обьем файла делает корявый редактор который при любой возможности фигуры преобразует в набор кривых. Я в ручную сократил логотип до нескольких сот байт используя возможности SVG. Ещё и анимацию прилепил. Потом есть сжатый SVGZ. Браузер всегда может преобразовать вектор в растр и работать уже с ним. Можно наверно даже скрипт сделать который SVG перегонит в растр и поставит иконкой.
(удалено)
SVG снимет только часть проблема с размерами. Но как быть с разным дизайном под разные платформы?
Как я полагаю, данную проблему вообще нельзя решить для большинства случаев(опять же, есть исключения). Так как каждая платформа хочет иметь и имеет собственно уникальный дизайн(iOS, Android, Windows), то отсюда следуют выводы — если ты хочешь оставаться в «тренде», нужно делать под каждую ОС свою иконку приложения.
P.s. исключение: иногда под Android и iOS можно сделать одну и ту же иконку.
P.s. исключение: иногда под Android и iOS можно сделать одну и ту же иконку.
Возможно это решается css стилями.
А в чем преимущество использования SVG в фавикон?
На вопрос, какого размера должна быть картинка, правильный ответ, по-моему, должен быть такой: вектор.
Upd: Упс, вижу, меня опередили.
Upd: Упс, вижу, меня опередили.
Изучив оригинал статьи, а потом спеки от Google, Apple и Microsoft, мы упростили до такого:
favicon.ico, который кладем в корень сайта
В html
В browserconfig.xml
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>
Можно ли не прописывать весь зоопарк размеров, а сделать одно большое изображение и указать его тегом <link rel=«icon» type=«image/png»...?
Жаль, что ico или подобный формат не прижился. Удобно хранить все иконки в одном файле.
— Зачем нужен favicon.ico?
— Что-бы логи сервера не засерались 404-й ошибкой!
— Что-бы логи сервера не засерались 404-й ошибкой!
Оригинальной статье уже год и с тех пор очень многое изменилось.
Сколько не объявляй иконок в html, будут тысячи запросов к /favicon.ico, всегда к нему и всегда в корень. Без юзер-агента.
Для тех, кто не занимается прорисовкой каждого размера фавиконки в отдельности с разной детализацией, было бы круто иметь сервис, куда можно залить векторную иконку и он сам нарежет ее на нужные размеры в нужных форматах и выдаст готовый архив для вставки в head.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Favicons, Touch Icons, Tile Icons и т. д. Что выбрать?