Комментарии 24
Познавательно, спасибо.
Статья не полная без /apple-touch-icon.png и ко.
Не видел mstile, которые бы реально работали как задумано.
Не нашёл в посте указаний на то какой именно файл из перечисленных будет использоваться как favicon в браузере (они же не обязательно все одинаковые)
Цвета фона — они произвольные? Практика подсказывает что нет.
Не нашёл в посте указаний на то какой именно файл из перечисленных будет использоваться как favicon в браузере (они же не обязательно все одинаковые)
Цвета фона — они произвольные? Практика подсказывает что нет.
У меня все работало как задумано)
Про второй пункт: действительно, можно это добавить. Спасибо.
А что не так с цветами? Какие проблемы возникали?
Про второй пункт: действительно, можно это добавить. Спасибо.
А что не так с цветами? Какие проблемы возникали?
> Не видел mstile, которые бы реально работали как задумано.
Я вот с ними сейчас борюсь. Не могу заставить тайл быть широким и большим, только мелкий и средний…
>Цвета фона — они произвольные? Практика подсказывает что нет.
#HEX? У меня успешно установился кастомный цвет.
Я вот с ними сейчас борюсь. Не могу заставить тайл быть широким и большим, только мелкий и средний…
>Цвета фона — они произвольные? Практика подсказывает что нет.
#HEX? У меня успешно установился кастомный цвет.
Если честно, то статья является лучшей, которую я читал на хабре (в моей ветки) за очень долгое время.
И не смотря на то, что её уровень сравним с начальным, она легко читается и очень информативна.
И не смотря на то, что её уровень сравним с начальным, она легко читается и очень информативна.
НЛО прилетело и опубликовало эту надпись здесь
Самый забавный способ работы с 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.
Мы в приложении для Windows добавили конвертацию наших иконок в *.ico формат. Где-то 60-70% использования данной фичи приходится на иконки для приложений и директорий. Остальное для favicon.ico.
http://realfavicongenerator.net/
Этот сервис справляется с задачей? Устарел или нет?
Вроде у них есть и npm пакет.
Этот сервис справляется с задачей? Устарел или нет?
Вроде у них есть и npm пакет.
Сам использовал несколько раз. Результат очень хороший.
Генерирует правильные картинки для плиток Win 10 — с отступами. Только нужно выбрать полный набор размеров: «Small, square icon», «Medium, square icon», «Big, square icon» и «Rectangular icon».
По умолчанию генерирует архив с минимальным набором иконок под последние версии ОС и браузеров.
Генерирует правильные картинки для плиток Win 10 — с отступами. Только нужно выбрать полный набор размеров: «Small, square icon», «Medium, square icon», «Big, square icon» и «Rectangular icon».
По умолчанию генерирует архив с минимальным набором иконок под последние версии ОС и браузеров.
Меня устраивает http://realfavicongenerator.net
А EDGE не научился понимать SVG для создания плиток?
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Favicon сегодня: форматы, поддержка, автоматизация