Использование эмодзи в качестве favicon
Эмодзи можно задать как favicon, наведя ссылку иконки на встроенный SVG в виде data URI, который содержит эмодзи как текст, вообще без файла изображения. В современных браузерах он работает мгновенно. Это отличная заглушка, но эмодзи рисуется собственным шрифтом операционной системы, так что он выглядит по-разному в Windows, macOS, Android и iOS, и он не удовлетворит /favicon.ico или иконки домашнего экрана. Для чего-то большего, чем быстрый старт, экспортируйте настоящий набор.
Одна строка, без файла
Приём — во встроенном SVG в виде data URI: href ссылки — это SVG, который рисует эмодзи как текстовый элемент, так что нет отдельного изображения для хостинга. Современные браузеры отрисовывают его на вкладке немедленно, что делает его идеальной заглушкой, пока вы разрабатываете.
Сам эмодзи рисуется тем эмодзи-шрифтом, который поставляется с операционной системой смотрящего, так что один и тот же favicon выглядит слегка (или не так уж слегка) по-разному на каждой платформе.
Однострочник
<link
rel="icon"
href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🦊</text></svg>"
/>Подставьте любой эмодзи. В продакшене URL-кодируйте специальные символы: некоторые браузеры придирчивы к сырым угловым скобкам в data URI.
Частые вопросы о favicon из эмодзи
Можно ли использовать эмодзи как favicon?
Да, через встроенный SVG в виде data URI, который отрисовывает эмодзи как текст. Он работает в современных браузерах без файла изображения, что делает его удобной быстрой заглушкой.
Почему мой favicon из эмодзи выглядит по-разному на каждом устройстве?
Потому что эмодзи рисуется собственным эмодзи-шрифтом операционной системы. Apple, Google и Microsoft рисуют один и тот же эмодзи по-разному, так что ваш favicon наследует эту вариацию.
Достаточно ли favicon из эмодзи для продакшена?
В качестве единственной иконки — нет. Он не покрывает /favicon.ico или домашние экраны и выглядит непоследовательно на разных платформах. Используйте его для старта, а затем экспортируйте нормальный набор к запуску.