Создать файл фавиконки в формате svg

Обновлено: 07.07.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 в качестве значка значка. Это то, что поддерживается большинством современных браузеров, и скоро будет добавлена поддержка.

Вот код для добавления значков избранного на ваш сайт. Разместите это на своем веб-сайте:

И разместите этот код в манифесте веб-приложения вашего сайта:

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

Вы также можете заметить альтернативное значение атрибута для нашего объявления rel во второй строке. Это программно сообщает браузеру, что значок значка с форматом файла, использующим .ico, специально используется в качестве альтернативного представления.

Следующая за фавиконками строка кода загружает другое изображение SVG, которое называется safari-pinned-tab.svg . Это сделано для поддержки функции закрепленной вкладки Safari, которая существовала до того, как в других браузерах появилась поддержка SVG favicon. Здесь есть дополнительные файлы, которые вы можете добавить, чтобы улучшить свой сайт для различных приложений и служб, но об этом чуть позже.

Подробнее о текущем уровне поддержки значков SVG:

Эти данные о поддержке браузера предоставлены компанией Caniuse, в которой содержится более подробная информация. Число указывает, что браузер поддерживает эту функцию в этой версии и выше.

Рабочий стол

Мобильный телефон/планшет

< tr>

Android Chrome	Android Firefox	Android	iOS Safari
99	Нет	Нет	Нет

Вы можете задаться вопросом, зачем это нужно. Формат файла .ico существует всегда и поддерживает изображения размером до 256×256 пикселей. Вот три ответа для вас.

Простота разработки

Создавать файлы .ico очень сложно. Файл представляет собой проприетарный формат, используемый Microsoft, а это означает, что для его создания вам потребуются специальные инструменты. SVG — это открытый стандарт, то есть вы можете использовать его без каких-либо дополнительных инструментов или привязки к платформе.

Ретина? 5к? 6к? Когда мы используем файл SVG, не зависящий от разрешения, для значка, мы гарантируем, что наши значки будут выглядеть четко на будущих устройствах, независимо от того, насколько велики будут их дисплеи.

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

Это может показаться несколько чрезмерным, но когда дело доходит до веб-производительности, важен каждый байт!

Еще одна интересная особенность SVG заключается в том, что мы можем напрямую встраивать в него CSS. Это означает, что мы можем делать забавные вещи, например динамически настраивать их с помощью JavaScript, при условии, что SVG объявлен встроенным, а не встроенным с использованием элемента img.

Поскольку иконки SVG встраиваются с помощью элемента link, их нельзя изменить с помощью JavaScript. Однако мы можем использовать такие вещи, как эмодзи и медиа-запросы.

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

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

Вот упрощенный пример использования квадратной формы:

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

Положение векторной точки можно настроить на пиксельной сетке с помощью программы редактирования векторной графики, такой как Figma, Sketch, Inkscape или Illustrator. Эти программы также экспортируют SVG. Чтобы настроить местоположение векторной точки, выберите каждый узел с помощью инструмента точного выбора и перетащите его в нужное положение.

Забавный момент в истории фавикона: Internet Explorer был первым браузером, который их поддерживал, и они были добавлены в 11 часов разработчиком по имени Бхарат Шьям:

Как гласит история, однажды поздно ночью Шьям работал над своей новой функцией favicon. Он позвал младшего менеджера проекта Рэя Сана, чтобы тот посмотрел.
Шьям прокомментировал: «Хорошо, правда? Зарегистрировать?», запрашивая разрешение на проверку кода в кодовой базе Internet Explorer, чтобы его можно было выпустить в следующей версии. Sun не слишком много думала об этом, функция была классной и явно давала IE преимущество. Поэтому он сказал Шьяму добавить его. Точно так же иконка попала в Internet Explorer 5, который впоследствии стал одним из крупнейших релизов браузера, которые когда-либо видел Интернет.
На следующий день Сан получил выговор от своего менеджера. за то, что позволили этой функции пройти так быстро. Как оказалось, Шьям специально ждал до конца дня, зная, что менее опытный менеджер программы даст ему пропуск. Но к тому времени код уже был объединен. Между прочим, вы будете удивлены, узнав, сколько относительно важных функций браузера пробралось в подобные выпуски.
Из статьи Джея Хоффмана «Как мы получили значок Favicon»

Я рад видеть, что платформа уделяет немного внимания фавиконам. Они долгое время были одной из моих любимых маленьких деталей дизайна, и я рад, что они становятся более чувствительными к потребностям пользователя. Если у вас есть минутка, почему бы не внедрить фавикон SVG в свой проект, как это сделал Бхарат Шьям еще в 1999 году.

¹ Мне не удалось определить, собирается ли Safari реализовать поддержку значков SVG, но я надеюсь, что они это сделают. Кто-нибудь что-нибудь слышал?

Фавикон веб-сайта – это неотъемлемая часть фирменного стиля, аналогичная логотипу веб-сайта. Однако обычно это файл ICO по сравнению с обычными форматами изображений, такими как PNG, JPG или SVG. В этой статье мы увидим, как можно преобразовать обычное изображение в файл favicon.ico без использования каких-либо программ для редактирования фотографий, таких как Photoshop или GIMP.

Понимание истории Favicon.ico

Файл favicon.ico содержит изображения разных размеров и аналогичен файлам ICON, используемым на настольных компьютерах. Впервые он появился в 1999 году, когда Microsoft выпустила Internet Explorer 5 и добавила поддержку значков избранного.

Поэтому, несмотря на то, что форматы файлов PNG и JPG поддерживаются другими браузерами, для обеспечения совместимости с более ранними версиями Internet Explorer рекомендуется указывать значок веб-сайта как файл .ico. Позже мы увидим, как вы также можете указывать значки в метатегах для Android и iOS, и они будут использоваться, когда пользователь закрепляет ваш веб-сайт на главном экране.

Создать логотип и фавикон

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

Создайте логотип и фавиконку с помощью Logaster

Создать фавикон из изображения

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

Шаг 1. Получите начальное изображение для фавиконки

Мы начнем со следующего изображения PNG для нашего значка. Как правило, вы должны использовать логотип своего веб-сайта или модифицированную версию логотипа. Убедитесь, что изображение вашего фавикона может поместиться внутри квадратного значка и быть разборчивым даже при маленьком размере. Начальное изображение лучше иметь размером не менее 260 x 260 пикселей.

Приведенное выше изображение является частью векторного набора элементов поп-арта и доступно для бесплатного скачивания с нашего сайта в форматах AI, EPS, SVG, PSD и PNG.

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

Шаг 2. Создайте фавикон из изображения

Далее веб-сайт попросит вас настроить фавикон для различных устройств, включая iOS, Android, Windows и macOS. Эти конфигурации необходимы для отображения вашего фавикона на главном экране пользователя этих устройств. Убедитесь, что вы изменили настройки, такие как цвет фона, размер полей, цвет темы и т. д., в зависимости от цветов вашего фавикона. Можно увидеть предварительный просмотр в реальном времени, который поможет вам настроить эти значения.

Шаг 3. Создайте фавикон

После того, как вы выбрали параметры по своему вкусу, нажмите кнопку «Создать фавиконы и HTML-код», и веб-сайт создаст пакет фавиконов вместе с HTML-кодом, подобный следующему:

Шаг 4. Добавьте Favicon на веб-сайт

Вам потребуется загрузить пакет favicon, сгенерированный веб-сайтом, и извлечь его содержимое в корневой каталог вашего веб-сайта. После извлечения вы обнаружите, что ваше изображение было преобразовано в favicon.ico вместе с изображениями favicon разных размеров, файлом browserconfig.xml и файлом manifest.json. Эти дополнительные файлы необходимы для указания значка веб-сайта на различных устройствах, таких как iOS, Android и Windows 10.

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

Надеюсь, этот урок по созданию фавикона из изображения был вам полезен. При желании вы также можете создать фавикон из текста с помощью Google Fonts. Дайте нам знать, если у вас возникнут какие-либо проблемы, и мы постараемся помочь, насколько это возможно.

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

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