Favicon из эмодзи: одна строка, без файла изображения
Без файла, без генератора, без загрузки. Вставьте одну строку — и у вашей вкладки появится значок.
Та самая единственная строка
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🚀</text></svg>">Замените ракету на любой эмодзи. Последовательности %22 — это двойные кавычки, закодированные для URL, чтобы весь SVG уцелел внутри href.
Как это работает
Здесь нет изображения. href — это data URI, содержащий крошечный SVG, а SVG — это единственный элемент <text> с эмодзи внутри. Браузер отрисовывает SVG прямо на вкладке, так что вы пропускаете весь цикл сгенерировать-скачать-загрузить.
viewBox и font-size отвечают за размер. Сдвиг y=".9em" опускает глиф вниз, чтобы он поместился внутри рамки, а не обрезался сверху. Вот и весь трюк.
Пределы
Он отрисовывается шрифтом эмодзи операционной системы, поэтому один и тот же эмодзи выглядит по-разному на macOS, Windows и Android. Вы не контролируете графику.
Он покрывает только вкладку. Это не настоящий /favicon.ico, поэтому краулеры и старые клиенты, запрашивающие этот путь, ничего не находят, и он ничего не даёт домашним экранам iOS и лаунчерам Android, которым нужны настоящие файлы PNG.
В продакшене кодируйте специальные символы для URL. Сырые < и > и кавычки внутри href могут сломать разбор или упереться в строгие политики контента. Их кодирование, как в сниппете выше, сохраняет решение надёжным.
Частые вопросы
Как использовать эмодзи как favicon?
Задайте href ссылки favicon равным data URI, содержащему небольшой встроенный SVG с эмодзи в элементе <text>. Это занимает одну строку HTML и не требует файла изображения.
Почему мой favicon из эмодзи выглядит по-разному на других устройствах?
Он отрисовывается собственным шрифтом эмодзи каждого устройства, поэтому графика различается на macOS, Windows и Android. Если вам нужен единообразный вид, используйте вместо этого настоящий значок-изображение.
Работает ли favicon из эмодзи для значков домашнего экрана?
Нет. Он покрывает только вкладку браузера. Домашним экранам iOS и лаунчерам Android нужны настоящие файлы PNG, на которые ссылаются apple-touch-icon и manifest.