Posted:
Янв 4, 2023
Comments:
0 Comments

Как добавить favicon в формате svg: Добавьте файл favicon в формате SVG или 120 × 120 пикселей — Вопрос от Батурская Екатерина

Добавьте файл favicon в формате SVG или 120 × 120 пикселей — Вопрос от Батурская Екатерина

  • Вопросы
  • Горячие
  • Пользователи
  • Вход/Регистрация

>

Категории вопросов

Задать вопрос

+

Основное

  • Вопросы новичков (16423)

  • Платные услуги (2109)

  • Вопросы по uKit (81)

Контент-модули

  • Интернет-магазин (1430)

  • Редактор страниц (236)

  • Новости сайта (498)

  • Каталоги (805)

  • Блог (дневник) (111)

  • Объявления (294)

  • Фотоальбомы (433)

  • Видео (255)

  • Тесты (60)

  • Форум (576)

Продвижение сайта

  • Монетизация сайта (219)

  • Раскрутка сайта (2448)

Управление сайтом

  • Работа с аккаунтом (5304)

  • Поиск по сайту (426)

  • Меню сайта (1765)

  • Домен для сайта (1531)

  • Дизайн сайта (13457)

  • Безопасность сайта (1465)

  • Доп. функции (1305)

Доп. модули

  • SEO-модуль (225)

  • Опросы (63)

  • Гостевая книга (99)

  • Пользователи (431)

  • Почтовые формы (318)

  • Статистика сайта (197)

  • Соц. постинг (212)

  • Мини-чат (91)

Вебмастеру

  • JavaScript и пр. (644)

  • PHP и API на uCoz (233)

  • SMS сервисы (10)

  • Вопросы по Narod. ru (422)

  • Софт для вебмастера (39)

…

SVG favicon — dr.Brain

В настоящее время просто необходимо использовать svg для favicon. Этот формат поддерживается всеми современными браузерами.

Кроме того, даже применяя формат svg для favicon своих сайтов, весьма вероятно, Вам не нужны все эти ссылки, параметры и атрибуты, которые Вы, не задумываясь, копируете из проекта в проект. Давайте определимся с тем абсолютным минимумом, который нужен для корректной работы svg favicon в разлиных браузерах.

Icon

Размер favicon в формате svg не имеет значения. Атрибут type=”image/svg+xml” не является необходимым:

<link rel="icon" href="favicon. svg">

Mask icon

В Safari есть некоторые отличия. Для этого браузера к тегу link нужно добавить атрибут mask-icon. Это все тот же svg, но выполненный в одном цвете на прозрачном фоне. Цвет изображения добавляется, как атрибут:

<link rel=”mask-icon” href=”mask-icon.svg” color=”#000000">

Touch icon

Иконка, которая будет появляться на вкладке браузера или в списке избранного, для iOS устройств, также несколько отличается. Размер картинки может быть только 180×180 пикселей, а атрибут size не нужен:

<link rel="apple-touch-icon" href="apple-touch-icon.png">

Манифест

manifest.json содержит информацию о веб-приложении или сайте. Без него просто нельзя корректно пройти тестирование сайта в Lighthouse. Ссылки на иконки в этом файле используются в операционной системе Android и браузере Chrome. Максимальный размер изображения составляет 512×512 пикселей.

{
    "name": "Starter",
    "short_name": "Starter",
    "icons": [{
        "src": "google-touch-icon. png",
        "sizes": "512x512"
    }],
    "background_color": "#ffffff",
    "theme_color": "#ffffff",
    "display": "fullscreen"
}

theme-color meta все еще обязателен для определения цвета в браузере Chrome для Android:

<meta name="theme-color" content="#ffffff">

Дополнительно

С помощью msapplication-TileImage для Windows можно установить другую иконку, в противном случае используется apple-touch-icon. TileColor больше не применяется.

На всякий случай

К сожалению, далеко не все пользователи пользуются современными браузерами, это проблему лего решить, добавив в корень сайта файл favicon.ico размером 32×32 пикселя. Такой вариант будет работать на любом компьютере, даже у бабушки.

Dark mode

Наконец, пара слов про dark mode. Возможность менять цвет картинки с помощью CSS — одно из огромных преимуществ формата svg. С помощью media prefers-color-scheme можно устанавливать подходящий цвет favicon для светлой и темной цветовых схем браузеров. К сожалению, этот метод не будет работать с mask-icon, так как в данном случае цвет определяется атрибутом HTML-тега link, но Safari по умолчанию добавит белый фон, если изображение не является достаточно контрастным.

<svg xmlns="http://www.w3.org/2000/svg">
    <style>
        path {
            fill: #000;
        }
        @media (prefers-color-scheme: dark) {
            path {
                fill: #fff;
            }
        }
    </style>
    <path fill-rule="evenodd" d="M0 0h26v16H0z"/>
</svg>

Результат

А это финальная версия HTML-разметки для svg favicon. Этот фрагмент нужно добавить в <head>. И не забудьте поместить favicon.ico в корень сайта.

<meta name="theme-color" content="#ffffff">
<link rel="icon" href="favicon.svg">
<link rel="mask-icon" href="mask-icon.svg" color="#000000">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="manifest" href="manifest. json">

Спасибо за внимание.

Перевод статьи Antoine Boulanger “Are you using SVG favicons yet? A guide for modern browsers”.

Как установить элемент SVG на значок моей страницы?

Задавать вопрос

спросил

Изменено
1 год, 1 месяц назад

Просмотрено
6к раз

На моей странице есть элемент SVG. Я хочу использовать его в качестве значка страницы. Как мне это сделать в JavaScript?

  • svg
  • favicon

Делать это поразительно запутанно. Вы можете увидеть мое решение в действии здесь: методология описана ниже (получение HTML-элементов по идентификатору или иным образом оставляется читателю в качестве упражнения).

В HTML

  1. Убедитесь, что ваш элемент SVG включает атрибут xmlns="http://www.w3.org/2000/svg" , так как вам нужно будет взять источник элемента как отдельный файл, а объявление XMLNS требуется для автономных файлов SVG. (Также обратите внимание, что это означает, что ваш SVG должен быть автономным и не может ссылаться на элементы в своем родительском документе с чем-то вроде <использование> .)
  2. При необходимости оберните элемент в
    или , которые можно использовать для получения содержимого элемента с помощью .innerHTML . (Ни атрибуты innerHTML , ни атрибуты externalHTML отсутствуют в элементах SVG в текущем стандарте HTML.)
  3. Включите в вашей страницы.

В JavaScript

  1. Получите источник элемента SVG, который вы хотите установить в качестве фавикона, получив атрибут innerHTML HTML-элемента, в который вы его завернули, или вызвав new XMLSerializer(). serializeToString() для элемента SVG.
  2. Создайте DataURL для этого элемента как документа, добавив перед источником строку "data:image/svg+xml", . (Если бы большинство браузеров поддерживали SVG для фавиконов, на этом мы бы закончили, но поскольку на момент написания статьи они этого не сделали, мы должны идти глубже .)
  3. Создайте элемент , через который вы будете маршрутизировать изображение, добавьте к нему прослушиватель событий для события load , которое будет рисовать изображение, как только управление вернется в цикл событий (поскольку браузеры, соответствующие спецификации, выиграли не позволяет вам читать изображение синхронно — см. этот crbug), и установите DataURL вашего источника SVG в качестве его атрибута src . (Шаги между этим и шагом 8 могут выполняться либо синхронно сейчас, либо как часть обратного вызова слушателя; их просто нужно выполнить до того, как вы отрисуете изображение. )
  4. Решите, в каком разрешении вы хотите отображать свой значок. В моих примерах будет использоваться разрешение 64×64 для совместимости с дисплеями с высоким разрешением (Retina и Super Retina).
  5. Создайте элемент (ранее называемый canvasElement ) и установите его размеры (установив canvasElement.width = 64 и canvasElement.height = 64 ).
  6. Создайте контекст рисования для холста, используя canvasElement.getContext('2d') (ранее именуемый ctx ).
  7. Если вы повторно используете ранее созданный холст, установите ctx.globalCompositeOperation = "copy" или очистите его с помощью ctx.clearRect(0, 0, 64, 64) .
  8. Где-то в последовательности выполнения, следующей за прослушивателем load , который вы добавили к элементу , созданному на шаге 3, нарисуйте изображение на холсте, используя ctx. drawImage(svgImg, 0, 0, 64, 64 ) (где svgImg — это элемент , для которого вы установили src в SVG DataURL).
  9. Создайте PNG DataURL из холста, используя canvasElement.toDataURL() , и установите , что в атрибут href элемента в вашем HTML.

6

Я знаю, что на него уже ответили, но это слишком много работы для такой простой задачи, просто сохраните свой svg в файле svg и используйте его как значок значка в теге заголовка.

2

Я пробовал, и у меня это сработало:

Измените type="image/x-icon" на type="image/svg" .

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Обязательно, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

html — Favicon Standard — 2022 — svg, ico, png и размеры?

Отказ от ответственности: я являюсь автором RealFaviconGenerator, который, как я ожидаю, будет актуальным (в основном, см. ниже). Так что не удивляйтесь, если этот ответ совпадает с тем, что генерирует RFG.

Нет универсального значка. Вы не можете создать один значок SVG и ожидать, что он будет работать везде.

С технической точки зрения было бы неплохо иметь один значок SVG. Но с точки зрения UI и UX это нежелательный результат. Сравните iOS и Android. В iOS все значки на главном экране представляют собой квадраты с закругленными углами (iOS заполняет прозрачные области значков Touch черным цветом). На Android значки на главном экране часто имеют неквадратную форму и прозрачность (включая значки приложений Google). Отправьте один сенсорный значок, и Android Chrome будет использовать его. Но вы не сможете соответствовать рекомендациям по значкам Android, тогда как выделенный значок может.

Поэтому я советую сознательно избегать использования одной иконки. Лучше ориентируйтесь на каждую платформу отдельно, когда это возможно (это не всегда так).

iOS Safari

iOS Safari ожидает сенсорный значок. На сегодняшний день это изображение размером 180×180 PNG. Это изображение не должно использовать прозрачность, и его углы будут автоматически округлены при добавлении на главный экран. Объявлено с помощью:

С годами этот значок стал «значком высокого разрешения по умолчанию» для многих браузеров. Так вы найдете его в другом месте, при добавлении в закладки и т. д.

Android Chrome

Android Chrome использует манифест веб-приложения. Хотя этот манифест не посвящен Android Chrome, в настоящее время он является его основным сторонником. Так что на данный момент все еще вполне безопасно считать значки из манифеста веб-приложения для Android Chrome.

Как следует из названия, манифест веб-приложения предназначен для веб-приложений. Но любой веб-сайт может использовать его как ссылку на некоторые значки.

Android ожидает значок PNG размером 192×192, прозрачность разрешена и приветствуется.

Манифест объявлен с помощью:

Edge и IE 12

Microsoft представила файл browserconfig, XML-документ, в котором перечислены различные значки, соответствующие пользовательскому интерфейсу Metro.

Файл и цвет фона объявляются с помощью:

Классические настольные браузеры

Windows/macOS Chrome, Windows/macOS Firefox, Safari, IE… Здесь все немного размыто. Исторически существовал единственный файл favicon.ico , который до сих пор поддерживается. Однако самые последние браузеры предпочитают значки PNG, которые легче. Кроме того, некоторые браузеры не могут выбрать правильный значок в файле ICO (этот формат может включать несколько версий значка), что приводит к неправильному использованию значка с низким разрешением.

Можно было бы отказаться от старого favicon.

This entry was posted in Популярное