Как стать автором
Обновить

Комментарии 24

Познавательно, спасибо.
Статья не полная без /apple-touch-icon.png и ко.
Я же описала apple-touch-icon.png. Можно поподробнее, что бы ты хотел еще видеть в статье?)
Прости, просмотрел наискосок, не заметил.
Не видел mstile, которые бы реально работали как задумано.
Не нашёл в посте указаний на то какой именно файл из перечисленных будет использоваться как favicon в браузере (они же не обязательно все одинаковые)
Цвета фона — они произвольные? Практика подсказывает что нет.
У меня все работало как задумано)
Про второй пункт: действительно, можно это добавить. Спасибо.
А что не так с цветами? Какие проблемы возникали?
> Не видел mstile, которые бы реально работали как задумано.

Я вот с ними сейчас борюсь. Не могу заставить тайл быть широким и большим, только мелкий и средний…

>Цвета фона — они произвольные? Практика подсказывает что нет.

#HEX? У меня успешно установился кастомный цвет.
Если честно, то статья является лучшей, которую я читал на хабре (в моей ветки) за очень долгое время.
И не смотря на то, что её уровень сравним с начальным, она легко читается и очень информативна.
Спасибо, мне очень приятно!
А про уровень верно подмечено: я пока только junior и это моя первая статья)
Отсутствие стандартизации удручает. В итоге распухнет раза в три, если добавить строки под все форматы.
И непонятно, зачем добавлять строки для apple-touch-icon-precomposed.png, если айфон с андроидом всё равно лезут в корень за ними при отсутствии этих инструкций. Подобная самостоятельность даже немного раздражает- лезут куда не просят.
Да, но это в том случае, если иконка лежит в корне. А если нет? Я хочу быть уверена, что у меня все будет работать так, как задумано.
И у меня своя файловая структура, иконки у меня не в корне лежат. В корне и без них куча других важных файлов.
Самый забавный способ работы с favicon я узнал у одного форумного знакомого. Это установка своей иконки на чужой сайт через JS на GreaseMonkey. В данном случае функция ставит картинку Cына человеческого Магрита )

function addFavicon() {

    var head = document.getElementsByTagName("HEAD")[0];
    var link = document.createElement("LINK");
    link.href = "data:image/x-icon;base64," +
        "AAABAAIAEBAAAAEACABoBQAAJgAAABAQAAABACAAaAQAAI4FAAAoAAAAEAAA" +
        "ACAAAAABAAgAAAAAAEABAAAAAAAAAAAAAAABAAAAAAAAAAAAAP///wBENwQA" +
        "nq+kAKOwpACcppcAoK+jAJekmQCerp4AmaGOAJOdgQCNmHgAmKiOAJiihgCb" +
        "n38AkZiAAJGcfQCWnIIAl56CAJ2nlACgqZwApK6fAKe0qgCxwLEAcndBAEtM" +
        "EwA8KAAAKRUAACELAACanZsAoaqXAI2ZfQCMl3YAjpRyAI+cfgCVpIsAlaGL" +
        "AJ+rmwCgq5YAhY9wAEdFEwA0GwwAJQQAACYAAAAkAAAANB0jAKawkQCPm4AA" +
        "k5+AAJWbfwCao4sAl6GIAJKZegCcoYYAnaWKAGJfQQAjAAAALgIIAMnNwACf" +
        "qJQAo6qgAKKvmACepIkAmaGDAJadfQCSmoEAqK2OAGBZQQBHoT8AOkkQAFA8" +
        "NwBARB0ANZI6ACeJIgC4zMIAt8OwAKiyqQCpuasAprKkAI6TbwCTmXYAn6J+" +
        "AFRGMgB2bU8AanVLADtwIgBgiFsASoRSAFOYVABWOzwAIAUAAHFtbACkr54A" +
        "lqaRAKezqQCWnHIAmp15AJedfgCosIgAWGKHAGCKzwAtdhEAUIJ3AEZdPwBN" +
        "fyYAMFxKAKizuACbp4EAlZ16AJejgwCmrpUAmJt4AJCZbgCSmXQAmJ1qAE9s" +
        "wwBxqYgAMYw1ADmMRABQpzIARViTAC8xlQB1enIAn6N2AJ6fdQCboYAAoauR" +
        "AKGkjwCcoH0AkZd2AJ2feABkfrEAbaulAFrAqwAio1QAKqNCAEaBHQAgK6YA" +
        "tbuSAJyeewCgpogAn6SCAKWvlQClr54AsbmuALG/sgC6xbgAeo+vAHuprQAe" +
        "nSUAK58zACyXFQBFei4AOD6YAMPJrQCutqIArbWkAKatmQCot6UArrWfAK20" +
        "rQCxu7EArL62ALK/qwBfh9oAVIZbADp5AAA6eBAAQ1umAHlxkwC7xakAt8Cy" +
        "ALO6pwCxvrAAtryqAJWhhwCmr5wAs7qqAKu0pACjr6MAXXKaAFB51ACBqPAA" +
        "QWXQAB44jQCCfIAAsrifAKitlgCjsJcAqK+ZAKu0mwCeqI8AnKmTAKOtoQCq" +
        "tacAiJaAAIGBbQCAlckALk6iABcddQCJg6IAW19AAIuLdQClrJQAkpl5AKGn" +
        "iwChpYYAusKvALLArQDAzsYAm6iZAEtICQBkYlcA6P/vALS8zQDR7e8AxdnU" +
        "AExLLQAnEAAAdHNlALW/sACus5gAsLaZAKy7sQCDgWkAUU8iADkqAgBRURoA" +
        "QTQbANv38wBudb0Ag5CzAMvm8AAqHgAARjcTADUjAAA/NQ8Af3xrALvGtQBJ" +
        "RR0AWlgmAEU4FQBQTCEAPCwAALzP0wCBiscAkqS/ALPNyQAvFgAASUYVAEEs" +
        "EwBSSxoAUk0TADo1AgBwjIQAEEREAALv8PHy8/T19vf4+fr7/P3f4OHi4+Tl" +
        "5ufo6err7O3uz9DR0tPU1dbX2Nna29zd3r/AwcLDxMXGx8jJysvMzc6vsLGy" +
        "s7S1tre4ubq7vL2+n6ChoqOkpaanqKmqq6ytro+QkZKTlJWWl5iZmpucnZ5/" +
        "gIGCg4SFhoeIiYqLjI2Ob3BxcnN0dXZ3eHl6e3x9fl9gYWJjZGVmZ2hpamts" +
        "bW5PUFFSU1RVVldYWVpbXF1eP0BBQkNERUZHSElKS0xNTjM0NTY3OCssLCw5" +
        "Ojs8PT4jJCUmJygpKissLS4vMDEyExQVFhcYGRobHB0eHyAhIgMEBQYHCAkK" +
        "CwwNDg8QERIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" +
        "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAKAAAABAAAAAgAAAAAQAgAAAA" +
        "AABABAAAAAAAAAAAAAAAAAAAAAAAAEQ3BP9JRR3/Wlgm/0U4Ff9QTCH/PCwA" +
        "/7zP0/+Bisf/kqS//7PNyf8vFgD/SUYV/0EsE/9SSxr/Uk0T/zo1Av+su7H/" +
        "g4Fp/1FPIv85KgL/UVEa/0E0G//b9/P/bnW9/4OQs//L5vD/Kh4A/0Y3E/81" +
        "IwD/PzUP/398a/+7xrX/usKv/7LArf/Azsb/m6iZ/0tICf9kYlf/6P/v/7S8" +
        "zf/R7e//xdnU/0xLLf8nEAD/dHNl/7W/sP+us5j/sLaZ/56oj/+cqZP/o62h" +
        "/6q1p/+IloD/gYFt/4CVyf8uTqL/Fx11/4mDov9bX0D/i4t1/6WslP+SmXn/" +
        "oaeL/6Glhv+VoYf/pq+c/7O6qv+rtKT/o6+j/11ymv9QedT/gajw/0Fl0P8e" +
        "OI3/gnyA/7K4n/+orZb/o7CX/6ivmf+rtJv/rrWf/620rf+xu7H/rL62/7K/" +
        "q/9fh9r/VIZb/zp5AP86eBD/Q1um/3lxk/+7xan/t8Cy/7O6p/+xvrD/tryq" +
        "/6Wvnv+xua7/sb+y/7rFuP96j6//e6mt/x6dJf8rnzP/LJcV/0V6Lv84Ppj/" +
        "w8mt/662ov+ttaT/pq2Z/6i3pf+hpI//nKB9/5GXdv+dn3j/ZH6x/22rpf9a" +
        "wKv/IqNU/yqjQv9GgR3/ICum/7W7kv+cnnv/oKaI/5+kgv+lr5X/mJt4/5CZ" +
        "bv+SmXT/mJ1q/09sw/9xqYj/MYw1/zmMRP9QpzL/RViT/y8xlf91enL/n6N2" +
        "/56fdf+boYD/oauR/5accv+anXn/l51+/6iwiP9YYof/YIrP/y12Ef9Qgnf/" +
        "Rl0//01/Jv8wXEr/qLO4/5ungf+VnXr/l6OD/6aulf+Ok2//k5l2/5+ifv9U" +
        "RjL/dm1P/2p1S/87cCL/YIhb/0qEUv9TmFT/Vjs8/yAFAP9xbWz/pK+e/5am" +
        "kf+ns6n/maGD/5adff+SmoH/qK2O/2BZQf9HoT//OkkQ/1A8N/9ARB3/NZI6" +
        "/yeJIv+4zML/t8Ow/6iyqf+puav/prKk/5ehiP+SmXr/nKGG/52liv9iX0H/" +
        "IwAA/yYAAP8kAAD/JAAA/yQAAP8uAgj/yc3A/5+olP+jqqD/oq+Y/56kif+V" +
        "pIv/laGL/5+rm/+gq5b/hY9w/0dFE/80Gwz/JQQA/yYAAP8kAAD/NB0j/6aw" +
        "kf+Pm4D/k5+A/5Wbf/+ao4v/naeU/6CpnP+krp//p7Sq/7HAsf9yd0H/S0wT" +
        "/zwoAP8pFQD/IQsA/5qdm/+hqpf/jZl9/4yXdv+OlHL/j5x+/56vpP+jsKT/" +
        "nKaX/6Cvo/+XpJn/nq6e/5mhjv+TnYH/jZh4/5iojv+Yoob/m59//5GYgP+R" +
        "nH3/lpyC/5eegv8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" +
        "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA";
    link.rel = "shortcut icon";
    link.type = "image/x-icon";
    head.appendChild(link);
}
Хех, добавлять на сайт фавикон через JS? Очень необычно)
Это скорее стилизация нужного сайта под желаемый вид с помощью расширения.
Долгое время на одном популярном сайте не было favicon, может у админа руки не доходили. Тогда один из пользователей написал скрипт, одной из функций которого было и это )

Некоторые сайты подобным образом дорисовывают туда разную информацию, например, количество уведомлений. Пример кода.

НЛО прилетело и опубликовало эту надпись здесь
"theme_color": "#b3adad",
"background_color": "#b3adad",


Честно говоря, так и не смог понять на что они влияют. Я так понимаю, будет заметно если отключить «Standalone». По крайней мере для моего сайта разницы не видно особой…
Хотелось бы добавить, что *.ico используется как системный значёк в Windows. Т.е. для любой программы, кастомной директории или кастомного ярлыка вам понадобиться .ico.
Мы в приложении для Windows добавили конвертацию наших иконок в *.ico формат. Где-то 60-70% использования данной фичи приходится на иконки для приложений и директорий. Остальное для favicon.ico.
http://realfavicongenerator.net/
Этот сервис справляется с задачей? Устарел или нет?
Вроде у них есть и npm пакет.
Сам использовал несколько раз. Результат очень хороший.
Генерирует правильные картинки для плиток Win 10 — с отступами. Только нужно выбрать полный набор размеров: «Small, square icon», «Medium, square icon», «Big, square icon» и «Rectangular icon».
По умолчанию генерирует архив с минимальным набором иконок под последние версии ОС и браузеров.
Меня устраивает http://realfavicongenerator.net
А EDGE не научился понимать SVG для создания плиток?
Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.