Добавить файл фавикона в формате svg

Обновлено: 21.11.2024

Меня зовут Дадли Стори, я автор книги "Использование SVG с CSS3 и HTML5", редактор Smashing Magazine, преподаватель и спикер. Я пишу обо всех аспектах веб-разработки, в том числе:

Чтобы получать дополнительную информацию, включая новости, обновления и советы, подпишитесь на меня в Twitter или добавьте меня в Google+.

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

проекты

Цветовая система ключевых слов Sass для дизайнеров. Заменяет значения CSS по умолчанию улучшенными оттенками и более запоминающимися и релевантными названиями цветов.

Канон с массивной головой. Интеллектуальное обсуждение фильмов, книг, игр и технологий.

книги

Простые, часто геометрические и развернутые во все большем количестве различных размеров, фавиконы кажутся идеальными кандидатами для формата SVG. К сожалению, браузерная поддержка фавиконов SVG отсутствовала до недавнего времени. Их теперь поддерживает Firefox 41, равно как и Safari 9 на настольных и мобильных устройствах (с некоторыми положениями), но IE/Edge и Chrome продолжают игнорировать формат, по крайней мере, пока. Однако эта ситуация может (и, надеюсь, изменится) вскоре измениться, поэтому стоит уделить немного времени изучению возможностей и синтаксиса фавиконов SVG, подготовив свой сайт к тому времени, когда придет время.

Проблема

Начав с графики размером 16 x 16 пикселей, концепция фавикона расширилась и видоизменилась, охватив целый ряд сенсорных значков, фрагментов, параметров экрана Retina и многого другого. Полное решение (созданное с помощью realfavicongenerator) дает смехотворно длинный список вариантов:

Несмотря на то, что многие из этих файлов можно оставить в корневом каталоге вашего сайта для использования соответствующими приложениями, вместо того, чтобы явно указывать их в HTML-коде, все равно приходится создавать и управлять огромным объемом контента. Один масштабируемый файл был бы намного лучше. Например, логотип этого сайта, сохраненный как favicon.svg:

Выглядит так:

Фавикон можно использовать, добавив одну строку кода на каждую страницу в :

Компоненты значка отображаются в виде отдельных непересекающихся геометрических фигур для четкой коммуникации: значок значка может по-прежнему отображаться размером 16 x 16 пикселей и должен быть четким при таком размере. Простота и ясность дизайна должны иметь приоритет.
По той же причине фон SVG остается незаполненным (и, следовательно, прозрачным), поэтому его можно использовать в максимально возможном количестве контекстов.
Область просмотра для SVG должна быть квадратной (т. е. первая и последняя пара чисел должны совпадать друг с другом).
Сам рисунок должен занимать как можно большую часть viewBox («холста» SVG).
Описывает цель рисунка; a и отдельные элементы для каждого многоугольника> также могут быть добавлены для доступности. следует использовать в SVG, чтобы сделать его как можно меньше.
Для работы SVG должен поставляться с типом MIME image/svg+xml.

Расширение до iOS

Элементы SVG должны быть полностью черными.
Ссылка на фавикон должна использовать неофициальный атрибут mask-icon.
При желании фавикон можно раскрасить с помощью столь же неофициального атрибута цвета, используя шестнадцатеричное число, ключевое слово или значение RGB. Следует избегать светлых тонов.

Учитывая эти условия, я бы рекомендовал указать на другой файл SVG с удаленной информацией о цвете:

Чтобы использовать это в iOS:

Все вместе

Это предполагает, что у вас нет файла favicon.ico в корневом каталоге вашего сайта: если он присутствует, некоторые браузеры будут использовать этот файл преимущественно, независимо от какого директивы favicon, которые могут быть в вашем .
Вам все равно нужно будет включить значки для iOS и MS, если они вам нужны; SVG их пока не поддерживает.

Заключение

SVG — отличный формат для фавиконок, и мы можем только надеяться, что Chrome скоро реализует его потенциал. Идеальным решением было бы позволить SVG использовать разные элементы или элементы с разным уровнем детализации для фавиконов разного размера, и все они содержатся в одном файле… хотя, вероятно, сейчас это слишком ожидаемо.

DigitalOcean объединяет усилия с CSS-Tricks! Специальное приветственное предложение: получите бесплатный кредит в размере 100 долларов США.

Вы когда-нибудь слышали о фавиконах, созданных с помощью SVG? Если вы регулярно читаете CSS-Tricks, то наверняка знаете. Но действительно ли он используется на вашем веб-сайте?

Задача более нетривиальна, чем вы думаете. Как мы увидим в этой статье, создание полезного фавикона SVG включает в себя редактирование файла SVG вручную, чего многие из нас стараются избегать или делать неудобно. Кроме того, мы говорим о favicon. Мы можем провести несколько часов, играя с новым популярным фреймворком CSS. Но фавикон? Иногда кажется, что это слишком мало, чтобы стоить нашего времени.

Эта статья посвящена созданию реального значка SVG. Если вы сидите перед ноутбуком, подготовьте векторный файл логотипа. К концу вашего (активного!) чтения ваш фавикон SVG будет готов сиять.

Зачем вообще фавикон SVG?

Мы здесь для того, чтобы узнать «как», но стоит задуматься: для чего вообще нужен фавикон SVG? У нас уже есть другие типы файлов, которые обрабатывают это, верно?

SVG — это векторный формат. Таким образом, он имеет ценные функции по сравнению с растровыми форматами, в том числе те, которые обычно используются для фавиконов, таких как PNG. SVG масштабируется и часто более компактен, чем его бинарные собратья, потому что это всего лишь код! Все нарисовано цифрами и буквами!

Хорошая новость, но как это поможет нашему значку? Фавиконы на рабочем столе маленькие, максимум 64×64. И вы можете отправлять свои иконки в нескольких разрешениях. Масштабирование — это функция, которая нам на самом деле здесь не нужна.

Размер файла — еще один источник разочарования. В то время как SVG имеет явное преимущество перед файлом PNG с высоким разрешением, таблицы отображаются в низком разрешении. Фавикон PNG размером 48 x 48 обычно приводит к меньшему размеру файла, чем его эквивалент SVG.

Тем не менее, у нас есть веская причина обратить внимание на значок SVG: поддержка темного режима.

В последнее время темному режиму уделяется много внимания. Возможно, вы даже реализовали темный режим для своих собственных веб-сайтов. Что это значит для фавикона? Это означает возможность отображать разные значки в зависимости от яркости фона вкладки браузера.

Мы собираемся подготовить такую иконку.

Как создать значок SVG (теоретически)

Поддержка тёмного режима для фавиконки SVG зависит от трюка CSS (10 баллов Гриффиндору), а именно от того, что мы можем добавить значок

С этим шаблоном ваш светлый/темный фавикон ограничен только вашим воображением. Например, изменить цвет всех линий:

Пришло время написать эти стили. Тут-то и начинаются проблемы.

SVG — это изображения, и логотип, который мы используем для создания нашего фавикона, вероятно, был создан с помощью таких инструментов, как Adobe Illustrator или InkScape. Почему бы не использовать тот же инструмент снова? Это потому, что такие приложения на самом деле не интегрировали CSS и медиа-запросы в свои продукты. Дело не в том, что они не могут с ними справиться, но вы должны забыть об опыте работы с мышью, который они обещают. Вы будете использовать клавиатуру и набирать код.

Что приводит нас ко второму варианту: писать CSS вручную. В конце концов, это путь фронтенд-разработки. Почему здесь должно быть иначе? К сожалению, SVG часто плохо читается. Конечно, это диалект XML, который (почти) похож на HTML. Но изображения SVG загромождены объявлениями длинных путей и другой разметкой, которую мы часто не видим в нашей повседневной работе. Например, логотип Raspberry Pi — это более 8 КБ необработанных данных. Это делает ручное редактирование более утомительным, чем кажется.

Как создать фавикон SVG (на практике)

Чтобы понять, как мы можем быстро и легко работать с значком SVG, нам сначала нужно определить, чего мы хотим достичь.

Техника, которую мы рассмотрели выше, требует творчества: заменить цвет, инвертировать их все (к чему мы еще вернемся), изменить форму... Но настройка значка для этого не самое подходящее время. Фавикон почти всегда должен быть логотипом сайта. Его внешний вид? Эстетика? Сообщение, которое оно передает? На все эти вопросы уже даны ответы. Подготовка значка должна заключаться в тонкой настройке логотипа, чтобы он помещался на небольшом пространстве, отведенном на вкладках браузера.

Часто логотип идеален в том виде, в каком он есть, а его фавикон — это его уменьшенная версия. Иногда нам нужно добавить поле, чтобы сделать его квадратным. Что же мотивирует темную иконку?

Многие логотипы созданы для светлого фона. Если это не так, существует другая версия исключительно для более темного фона.

Поэтому независимо от того, подготавливаем ли мы значок вручную или с помощью инструмента, мы автоматически выбираем светосовместимый логотип и начинаем с него. Ведь вкладки рабочего стола традиционно белые или светло-серые. Проблема возникает при переходе в темный режим.

Теперь, когда мы определили проблему, мы можем сформулировать решение: иногда нам нужен более яркий значок для темного режима. Это очень просто. Для красочного, но слишком темного логотипа мы можем добавить яркости фавиконке в темном режиме с помощью фильтра CSS:

Если логотип окрашен в оттенки серого, мы можем инвертировать его цвета с помощью другого фильтра CSS:

В этой статье исследуется мир фавиконов SVG. Мы рассмотрим их добавление в HTML, использование эмодзи, встраивание их в качестве URI данных, поддержку темного режима и анимацию.

Недавно я работал над некоторыми сторонними проектами (Style Check и bedrocss), и, как и в случае с любым другим проектом, над которым я работаю достаточно долго, я дошел до того, что захотел добавить фавикон.

Я решил поиграть с иконками SVG. Поддержка просто в порядке (бу, Safari), но этого достаточно для моих нужд. Я не против, если фавикон не отображается в неподдерживаемых браузерах. Это не конец света. И на самом деле вы можете обойти эту проблему (см. предостережения ниже).

Используя SVG, я могу получить много интересных преимуществ, таких как:

Четкое качество изображения в одном файле
Поддержка эмодзи
Встроенный значок (нет необходимости в связанном ресурсе)
Обнаружение темного режима (мило!)
Анимированные иконки

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

Добавление фавикона SVG в HTML

Синтаксис для добавления значка на ваш веб-сайт не менялся в течение длительного времени, и то же самое относится к значкам SVG (за исключением расширения файла).

В теге вашего HTML-файла вы помещаете элемент с атрибутом rel, для которого задано значение «icon», а для атрибута href задан путь, по которому находится ваш значок.

Поскольку мы используем SVG, значок может быть любого размера, просто убедитесь, что холст имеет квадратную форму.

Если вам нужно найти бесплатные значки, icones — хороший ресурс, или вы можете создать свой собственный с помощью Penpot.

Встраивание фавиконов SVG в виде Data-URI

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

Я уже использовал трюк Data-URI со встроенными изображениями или фоном, и он работает просто великолепно. Хорошие новости, это также работает для фавиконов.

Вместо ссылки на путь добавьте префикс data:image/svg+xml;utf8 ко всему коду SVG (включая последнюю запятую) и передайте все это в атрибут href.

Мне очень нравится этот метод, потому что я могу просто забыть о размещении файла значка в какой-либо папке, и я могу скопировать/вставить этот код в любой проект (большинство моих побочных проектов теперь используют один и тот же значок).

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

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

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

Использование эмодзи для фавиконки

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

Синтаксис работает так же, как раньше. Поскольку SVG поддерживает текстовое содержимое через

Элементы и смайлики в значительной степени являются текстом, вы можете поместить любой смайлик в свой SVG (может потребоваться некоторое перемещение, чтобы он соответствовал правильному размеру).

Это позволяет очень легко иметь значок фавикона, не создавая собственный. Хотите еще проще? Проверьте emojicon.dev от Брайсона Риса. Он дает вам список смайликов, и вы можете щелкнуть любой из них, чтобы скопировать весь фрагмент значка в буфер обмена.

Если вам это не нравится, Вес Бос также создал fav.farm. Это сторонний сервис, который создаст для вас фавиконку. Вы можете напрямую связать его сервис с нужным смайликом.

Творчество сообщества разработчиков не перестает меня впечатлять. Так много крутых, умных и креативных разработчиков.

Добавление обнаружения темного режима

Мы можем добавить тег в наш SVG и использовать медиа-запрос preferences-color-scheme, чтобы изменить наш значок в зависимости от предпочтений пользователя в темном режиме.

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

Теги в SVG содержатся в этом XML-документе, поэтому вам не нужно беспокоиться о том, что стили могут проникнуть в остальную часть вашего приложения.

Анимированные фавиконы

Как мы видели выше, мы можем использовать CSS в нашем SVG.Это означает, что теоретически мы могли бы добавить анимацию и на наш значок.

Однако для этого нам не нужны CSS-анимации, потому что SVG имеет встроенную анимацию с помощью тега.

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

Как это круто!? Я имею в виду концепцию. Пример немного скучный, но суть вы поняли.

Предупреждения

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

Последний момент, о котором я думаю, стоит упомянуть, также связан с производительностью. В большинстве случаев, с которыми я сталкивался при создании веб-сайтов, SVG будет намного меньше по размеру, чем соответствующий PNG. Однако, поскольку файлы PNG основаны на растровом изображении, а иконки, как правило, имеют небольшой размер, фавикон PNG (или ICO) может привести к меньшему размеру файла. Это действительно зависит от сложности значка, поэтому, если вас это очень беспокоит, просто протестируйте два варианта.

Заключительные мысли

Надеюсь, вы нашли это интересным или полезным. Я знаю, что мне было весело возиться с SVG для своих проектов. Вот окончательная версия моего фавикона, если вам интересно:

Его можно найти в таких проектах, как bedrocss, Vuetensils и Style Check. Проверьте это и в темном режиме!

Большое спасибо за прочтение. Если вам понравилась эта статья, поделитесь ею, а если вы хотите знать, когда я опубликую больше статей, подпишитесь на мою рассылку или следите за мной в Твиттере. Здоровья!

TL;RD Если вы здесь, возможно, вы просто ищете редактор фавиконок SVG.

В чем хороша иконка SVG?

Как векторный формат, SVG более гибок, чем растровые форматы, такие как PNG и JPG. Изображение SVG всегда выглядит хорошо, независимо от разрешения экрана. Все это с меньшим размером файла. Здорово. Но когда речь идет о фавиконе, в чем смысл? В конце концов, десктопным браузерам нужны значки максимум 48×48. SVG никак не может значительно перехитрить надежный PNG для такого низкого разрешения. Так зачем нам еще один файл значков?

Из-за поддержки темной темы.

Как отмечают Матиас Байненс и Томас Штайнер, фавикон SVG может использовать преимущества CSS, чтобы соответствовать теме браузера. Это круто! Хитрость заключается в использовании медиазапроса @media (prefers-color-scheme: dark).

И это не (только 😆) причудливая функция. Иногда фавикон просто не подходит для темного режима.

Значок идеально подходит для светлого режима, но слишком темный для темного.

Однако это приводит к другому вопросу: как на самом деле создать фавикон для темных тем?

Темный режим на практике

Чтобы волшебство произошло, нам нужно примирить два мира: изображение и CSS. Если у вас есть логотип вашей компании в виде файла SVG, вы можете быстро отредактировать его с помощью программного обеспечения для рисования, такого как Inkscape. Но как насчет CSS и медиа-запросов? Ну, это не их специальность.

Тогда давайте отредактируем файл вручную. В конце концов, SVG — это всего лишь диалект XML. О-о… Я не знаю, как эти <path> вещи сделаны точно, но они огромны! В конце концов, SVG не так просто редактировать.

В процессе создания редактора фавиконок SVG мне пришлось задать себе вопрос: что может сделать хорошую темную иконку? Какая трансформация действительно имеет смысл в данном контексте? Конечно, решение должно было быть простым. Я не хотел создавать полноценный редактор иконок в RealFavicon. И обычные пользователи не захотят его использовать.

Одним из ответов, который я придумал, является техника, которую я уже использовал в классическом редакторе фавиконов: применение сплошного фона, чтобы добавить контраста любым рабочим цветам. Этот вариант как серьезный недостаток, хотя. Это почти всегда заставляет вас применять отступы к исходному логотипу, чтобы он не «касался» границы только что созданного фона. Фавикон уже довольно маленький, дополнительные отступы не лучший вариант.

Контраст хороший, но в темном режиме логотип меньше

Ваш логотип — это ваш логотип, и у вас нет причин менять его при переходе в темный режим. Единственная (законная) причина, по которой вы хотели бы изменить его, заключается в том, что логотип сам по себе довольно темный. Решение? Больше яркости. Хорошие новости, CSS для этого прост и универсален:

Простой код. Когда тема темная, примените фильтр яркости к корневому элементу. Единственная хитрость — коэффициент яркости, который нужно выбирать методом проб и ошибок. Для этого и создан редактор!

Оригинальный логотип, только ярче

Я надеюсь, что редактор значков SVG изменит ландшафт значков, как это сделал классический редактор RealFavicon, когда он был выпущен почти 8 лет назад!

Опубликовано

Филипп Бернар

Я веб-разработчик и автор RealFaviconGenerator. Я создал этот сайт, потому что расстроился, когда попытался сгенерировать значок моего предыдущего веб-проекта. Просмотреть все сообщения Филиппа Бернара

Читайте также: