Генератор фавикона
Создайте HTML-разметку favicon и SVG-фавикон с эмодзи, цветами и URL иконки.
Запустить инструмент
Онлайн-генератор фавикона создает готовую разметку для значка сайта по выбранным параметрам. В форму можно ввести веб-адрес иконки, указать желаемый эмодзи, а также задать шестнадцатеричный цвет фона и цвет текста. После нажатия кнопки генерации вы получаете готовый HTML-код со ссылками на фавикон, включая вариант со встроенным SVG data URI, а также чистую SVG-разметку векторного значка. Если указан веб-адрес иконки, сервис экранирует его и помещает в теги ссылок, не преобразуя файл в растровое изображение на лету. Выбранный символ эмодзи помещается в центр векторного значка в качестве текстового элемента. По умолчанию используются значок гаечного ключа, синий цвет фона #2563eb и белый цвет текста #ffffff. Поле названия сайта принимается интерфейсом, но не включается в итоговый код. Полученный фрагмент HTML можно сразу скопировать и вставить в блок заголовка страниц для быстрого отображения значка вкладки.
Инструкция
- При необходимости вставьте URL иконки в поле «URL иконки».
- Введите эмодзи для отображения внутри SVG или оставьте значение по умолчанию, эмодзи гаечного ключа.
- Укажите цвет фона и цвет текста, например #2563eb и #ffffff.
- При необходимости заполните поле «Название сайта». Оно передается как параметр, но не меняет готовую разметку.
- Нажмите кнопку генерации, скопируйте HTML-разметку и SVG-разметку, затем проверьте их в шаблоне сайта.
Примеры
- Введите в поле «Эмодзи» символ гаечного ключа, оставьте цвета по умолчанию и нажмите кнопку генерации. В результате появятся HTML-код ссылки на SVG-фавикон и отдельная SVG-разметка.
- Укажите URL иконки в поле «URL иконки», например https://example.com/icon.svg, затем задайте цвет фона #111827 и цвет текста #ffffff. Проверьте, что URL добавлен в два HTML-элемента ссылки на иконку.
Частые вопросы
Что создает генератор?
Генератор создает HTML-разметку favicon и SVG-разметку фавикона на основе введенных параметров.
Можно ли указать URL собственной иконки?
Да, поле «URL иконки» необязательно. Если в нем есть значение, оно добавляется в два HTML-элемента ссылки на иконку после экранирования.
Как используется эмодзи?
Эмодзи используется как текст внутри создаваемого SVG. Если не менять значение, используется эмодзи гаечного ключа.
Влияет ли название сайта на результат?
Название сайта принимается как параметр, но не используется в создаваемой разметке и не изменяет фавикон.