Файл favicon в формате svg создать
Вы знаете, что вам нужен фавикон, но не уверены, что это такое? Или, может быть, прекрасно осведомлены, что такое фавикон и зачем он нужен, но не в курсе, как и каким его сделать?
А что, если вы даже не уверены, что оно вам надо, но вроде “так говорят”, и вроде “у всех есть”.
В любом случае, очень рад, что зашли сюда — я очень старался, пиша это статью, и, уверен надеюсь, это подробное руководство по фавиконам развеет все вопросы)
Что такое фавикон?
Начнём, конечно, с азов. Если вы знаете, что такое фавикон (favicon, фавиконка, favicon-ка (да, и такое написание встречается)), смело пропускайте этот раздел.
В марте 2020 года фавикону исполняется 21 год, он становится совсем взрослым… Впервые он появился в 1999-м году вместе с выпуском пятой версии известного (и на тот момент самого популярного) браузера Internet Explorer.
Вы спросите, фавикон — это логотип? Пожалуй, да. Точнее — это особая форма логотипа, разработанная специально для очень малых размеров.
В настоящее время, хотя фавиконами могут называться и иконки размером, доходящим до 512 пикселей в обоих измерениях, большинство браузеров отображают фавикон размером всего 16 на 16 пикселей. Из-за этого порой невозможно использовать в качестве фавиконки полноценный логотип.
Но перейдем к следующим разделам, а то уже обо всём по чуть-чуть рассказал…
Зачем нужен фавикон?
Фавикон повышает узнаваемость сайта и бренда
Фавикон — это такой же элемент фирменного стиля и айдентики, как логотип, фирменные цвета, фирменные узоры. О важности единства фирменного стиля я уже говорил в этой статье .
По хорошему фавикону сразу становится ясно, что за сайт за ним скрывается (конечно, если вы уже знакомы этим с сайтом).
Когда у пользователя открыто множество вкладок в браузере, именно по фавиконам он ориентируется, где какая. Ваша задача: запомниться пользователю, чтобы он всегда смог найти ваш сайт среди множества других открытых вкладок!
Даже если вкладок открыто не так много, чтобы у них пропали названия, современные люди всё больше ориентируются на иконки, нежели на текст, который им только сопутственно помогает в восприятии.
Увеличивает кликабельность
В поисковой выдаче сайт с фавиконом привлекает больше внимания пользователей, чем сайт без него. Соответственно, при прочих равных пользователь скорее кликнет именно на ваш сайт с выделяющимся фавиконом!
Конечно, наличие фавикона уже не так сильно повышает ваши шансы быть кликнутым, как в былые времена, когда такие иконки были лишь у каждого десятого сайта. Но даже сейчас, когда фавиконы есть практически у всех, он в любом случае выгодно выделяет сайт в выдаче — подобно маркерам в списках, служащим для обозначения пункта.
Посмотрите на эти примеры:
Во втором случае кому-то может показаться, что информация с сайта 2GIS — это продолжение “пункта” о Яндекс.Еде.
Я честно пытался найти реальный пример, чтобы в выдаче поисковика у сайта не было фавикона, но пролистав по 15 страниц по нескольким запросам, так ничего и не нашёл. Это ещё раз подтверждает необходимость наличия фавикона.
Вызывает доверие
Сайт с фавиконом вызывает доверие пользователя, так как сайт выглядит более закончено и профессионально, нежели веб ресурс с «пустым листом» или стандартным фавиконом той CMS, на которой сделан сайт.
В настоящее время фавиконов нет в основном лишь у не до конца доделанных или брошенных сайтов. Поэтому, чтобы не вызывать у потенциальных посетителей такие ощущения, стоит идти в ногу со временем — установить фавикон и следить за его корректным отображением.
Каким должен быть фавикон
Правильный фавикон должен:
- Быть хорошо различимым в малом размере.
- Соответствовать фирменному стилю компании.
- Отвечать современным техническим требованиям: размеры и форматы файлов.
Чуть подробнее об этих правилах.
Визуальная составляющая фавикона
Как я уже говорил, фавикон можно считать особой версией логотипа. Особая она потому, что должна быть хорошо различима в очень маленьком размере — 16х16 px.
Возможно, вы где-то слышали, что “любой хороший логотип должен одинаково хорошо смотреться и в очень большом и в очень малом размере”.
Но, во-первых, это не всегда так, а, во-вторых, 16 пикселей — это просто крайне малый размер. И иконка сайта — это буквально единственное место, где вам потребуется логотип такого размера.
Что это значит: далеко не любой логотип можно качественно уменьшить до такого размера, даже не каждый “хороший”.
Порой, чтобы сделать favicon иконку для сайта и она выглядела аккуратно и читабельно, приходится чем-то жертвовать. Например:
- Взять из основной версии логотипа только какой-то фрагмент:
- Значительно упростить графический знак логотипа:
При этом новый значок-фавикон не должен выбиваться из общего фирменного стиля. Старайтесь сохранять цветовую гамму и по возможности намекнуть на вашу сферу деятельности или название.
Технические требования к современным фавиконам
Если до начала прочтения этой статьи вы знали о фавиконах чуть больше, чем ничего, то скорее всего вы также слышали, что фавиконы — это файлы с расширением ico, как и положено быть иконкам.
Да, много лет назад только так и было. Как и был один единственный размер для фавикона — 16 пикселей в ширину, 16 — в высоту. Сейчас же ситуация обстоит совсем иначе.
Формат ico морально устарел. Его главным преимуществом перед другими форматами (например, тем же png) было в том, что один файл содержал несколько иконок разных размеров (на все случаи жизни). Но браузеры уже давно научились брать иконку нужного размера из разных файлов.
Как это ни банально прозвучит: чем больше различных иконок содержит в себе файл ico, тем больше он “весит”, а это тормозит работу вашего сайта.
В современных реалиях качественный фавикон — это отдельные файлы:
- разных размеров (от 16х16 до 512х512 px),
- разных форматов (png, svg, ico),
подходящие под все браузеры (Chrome, Firefox, Safari, Internet Explorer и др.) и операционные системы (Android, iOS, Windows, MacOS).
Более того некоторые системы, например, браузер Safari, не поддерживает формат ico, и для отображения фавиконов ему нужен векторный формат svg.
Но и ico пока что не стоит списывать со счетов — есть работа специально для него. Устаревшие браузеры, например, Internet Explorer версии 10 и ниже (а ими всё ещё пользуется большая часть населения) поддерживает только этот формат. Также ico-файл пригодится для того, чтобы у сайта была персональная иконка в Windows при сохранении его на рабочий стол или в панель задач.
Чтобы не писать полотно текста, состоящее из повторяющихся слов и цифр, покажу наглядно набор favicon-иконок, необходимый вам для сайта, подходящий для 99,9% случаев (вдруг уже есть какие-то новые стартапы, использующие что-то совсем другое):
Всем привет! Сегодня моя статья будет посвящена самым-самым новичкам, кто только делает первые шаги в веб-разработке.
И поговорим мы о такой вещи, как favicon. И тут ты, мой более опытные читатель, скажешь, мол чего тут расписывать, ну иконка во вкладке браузера, и что такого? Но не спеши закрывать эту статью, мой друг. Сейчас мы попробуем разобраться все ли так просто с favicon, и, возможно, ты узнаешь кое-что интересное.
Что такое Favicon?
Favicon - это небольшая иконка во вкладке браузера, позволяющая быстро индифецировать нужный сайт среди всех открытых вкладок браузера.
Для чего нужен favicon?
И так, главная задача favicon - это повысить узнаваемость сайта, создать некий узнаваемый бренд вокруг сайта.
Помимо отображения во вкладке браузера, favicon еще отображается возле названия сайта в поисковых системах.
Как подключить favicon на своем сайте?
Данный сервис позволяет нарисовать favicon самостоятельно или скачать уже готовый из коллекции фавиконов.
Обратите внимание, что скачиваемый файл имеет расширение .ico - это стандартный и исторический формат favicon. Если вам нужна поддержка старых браузеров, например IE6, то необходимо будет в обязательном порядке указывать favicon именно в этом расширении, но все современные браузеры прекрасно работают с favicon и в формате png.
Изображение с расширением .ico должно иметь разрешение 16 на 16 пикселей.
Для вставки favicon на сайт необходимо залить файл в корневую папку сайта и в шаблоне сайте, между и добавить следующий код:
А можно ли сделать динамический Favicon?
К сожалению по-умолчанию у нас нет возможности удобно работать над этой задачей, поэтому воспользуемся сторонними решениями, благо хорошие люди уже поработали над этой задачей.
Есть много готовых библиотек-плагинов для создания динамических favicon. Мы рассмотрим наиболее популярное решение:
Хорошее решение, имеет неплохую поддержку браузеров: будет работать в современных версиях Google Chrome, Opera, Mozilla и IE11+
Установить решение можно через Bower или Yarn:
favico.js умеет заменять фавикон, добавлять счетчик и даже вставлять видео-фавиконы.
На сайте проекта имеется хорошая документация по работе с плагином, и конечно же, примеры.
К сожалению, судя по последним коммитам на репозитории проект не развивался последние два года, но несмотря на это данное решение вполне можно использовать в своих проектах, если вам не требуется 100% кроссбрауезрность данной "фишки".
На этом все, да прибудет с вами faviicon! =)
Друзья, ваши подписки, лайки и комментарии вдохновляют меня на написание качественного и интересного материала! Всем добра!
Внимание! Данный материал является авторским, запрещено любое использование материала без согласия автора статьи.
Какое-то время я игнорировал эти уведомления, так как моя иконка favicon в формате ICO и размером 16?16 пикселей удовлетворяла требованиям к фавиконке.
Однако уведомления продолжали приходить, и это не давало мне покоя, так как рекомендуемые требования к иконке для сайта favicon следующие: формат файла SVG и размер 120x120 пикселей . Это нужно, чтобы для сервисов Яндекса логотип сайта был более четким и заметным.
Поэтому недавно я все же решил разобраться, как создать и добавить на сайт файл favicon в формате SVG?
Сделать это оказалось довольно просто. Хотя признаться, я не сразу нашел в сети интернет сайт бесплатный векторный редактор формата .SVG , который не просто носил такое название, а реально предоставлял именно эту услугу.
Сейчас уже не скажу, как я попал на этот сайт. Сначала искал его по запросам: "иконка SVG генератор" или "генератор иконок SVG", но ничего подходящего не находил, пока не наткнулся на этот бесплатный векторный редактор формата SVG.
Теперь давайте по шагам разберем, как создать и добавить на сайт файл favicon в формате SVG?
Инструкция - как добавить иконку на сайт
Далее переходим на сайт - бесплатный векторный редактор формата SVG - по приведенной выше ссылке.
Переходим в верхнее меню Файл и выбираем Импорт изображения .
И соответственно указываем путь к файлу, созданному в программе Adobe Photoshop.
Здесь же есть возможность открыть SVG-файл или создать новый документ. Но в данном случае нам это не нужно.
В итоге после импорта изображения мы должны увидеть свою иконку. В правом верхнем углу редактора указаны ее координаты и размер, который здесь же мы можем увеличить или уменьшить.
Здесь нам осталось только выбрать пункт: Сохранить изображение . Иконка для сайта будет сохранена сразу в формате SVG.
Итак, иконка для сайта размером 120x120 пикселей создана в формате SVG. Таким образом, требования поисковой системы Яндекс к фавиконке выполнены.
Осталось добавить в код главной страницы сайта в элемент head следующий фрагмент кода (это ссылка на favicon-файл и для примера я приведу свой код):
На что здесь следует обратить внимание ?
1. Значение icon атрибута rel - учитывается большей частью браузеров.
Браузером Internet Explorer учитывается значение shortcut icon .
3. Атрибут type указывает на тип передаваемых данных, который зависит от формата файла :
- в нашем случае image/svg+xml — указывается для формата SVG ;
- image/x-icon — указывается для формата ICO . Ранее наиболее распространенный формат для файлов-иконок сайтов.
- image/gif , image/jpeg , image/png и image/bmp - для форматов GIF , JPEG , PNG и BMP соответственно.
Итак, эта статья была посвящена тому, как создать и добавить на сайт иконку - файл favicon в формате SVG? Надеюсь, у вас все получится, желаю удачи.
Отзывы и комментарии:
Добавил(а): Вячеслав
Дата: 2020-12-28
Спасибо статья помгла.
Добавил: Admin
Дата: 2020-12-28
Добавил(а): Dvernek
Дата: 2021-01-11
Спасибо. Простая короткая и содержательная статья без воды. Таких статей так мало. Спасибо.
Добавил(а): Наталья
Дата: 2021-01-21
Спасибо большое, сейчас попробую
Добавил(а): Алексей
Дата: 2021-02-08
К сожалению программа не сохраняет как рисунок. В итоге фавикон не отображается. Может что не так делаю?
Добавил: Admin
Дата: 2021-02-08
Может что не так делаете. Я только что загрузил картинку на сайт бесплатный векторный редактор формата .SVG, указанный в начале статьи и сохранил файл в формате .svg. Этот файл нельзя открыть как обычную картинку. Я его открывал в браузере.
Добавил(а): Евгений
Дата: 2021-03-31
Почему ты везде пишешь про 120х120 пикселей? Для svg размер значения не имеет. Изначальная картинка в svg может быть метр на метр, но в качестве favicon такая вполне сойдёт.
Добавил(а): onestep
Дата: 2021-04-15
6 лет сайту и никогда не было этого файла, заморочился и наткнулся на вашу статью, спасибо
Добавил: Admin
Дата: 2021-04-16
Добавил(а): Калина
Дата: 2021-10-17
Создал по Вашему тексту, разместил, жду обновления Спасибо!
Добавил(а): Андрей
Дата: 2021-11-30
Спасибо за толковую статью. Все понятно. Все бы так писали пояснения и рекомендации. Фавикон встал нормально.
Добавил(а): Сергей
Дата: 2021-12-19
Как попасть на код главной страницы сайта?
Добавил(а): Герман
Дата: 2022-04-19
От автора: вы должны использовать SVG-фавикон. Они поддерживаются во всех современных браузерах уже сейчас. Кроме того, вам, вероятно, не нужны все эти ссылки и размеры иконок, которые вы копируете из проекта в проект. Давайте выясним, какой абсолютный минимум нам требуется.
Иконка
Основной иконкой может быть SVG любого размера. Тип type=»image/svg+xml» не нужен.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Mask-icon
Для Safari все немного по-другому. Вам нужно добавить mask-icon. Это также SVG, но он должен быть создан в одном цвете и размещен на прозрачном фоне. Браузер добавляет цвет атрибута.
Сенсорная иконка
Иконка для устройств iOS, а также иконки избранное, новая вкладка и многое другое. Вам нужен только размер 180 x 180, а атрибут sizes лишний.
Manifest
manifest.json предоставляет информацию о вашем веб-приложения или веб-сайте. Эти строки обязательны для прохождения теста Lighthouse. Иконки со ссылками используются Android и Chrome. Самый большой размер 512 x 512 — единственный, который нужен.
Мета theme-color по-прежнему требуется для цвета браузера Android Chrome.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Это все
Вот и все, это все иконки, которые вам нужны для современных браузеров, все остальное не нужно. Можно добавить msapplication-TileImage, если вы хотите иметь другую иконку в плитке Windows , в противном случае используется apple-touch-icon. TileColorНе больше используется.
Все остальное
К сожалению, не все работают в современных браузерах, но это можно легко решить, поместив в корень сайта favicon.ico 32 x 32. Это будет работать везде, даже у вашей бабушки.
Темный режим
Чтобы закончить, вот совет для темного режима. Одним из преимуществ SVG-фавикон является то, что вы можете изменить цвет с помощью CSS. Используя медиа-запрос prefers-color-scheme, цвет иконки меняется для темного или светлого режима пользователя. Этот метод не будет работать с mask-icon, так как цвет находится в атрибуте, но Safari добавляет белый фон, если не хватает контраста.
Favicon – это значок (иконка), который отображается во вкладке браузера, закладках, а также в сниппетах результатов поиска.
Favicon играет важную роль в веб-приложениях. Он может улучшить внешний вид сайта в выдаче, повышает узнаваемость вашего сайта, помогает пользователю быстро найти необходимую страницу в закладках и вкладках.
Кроме того, пользователь может добавить страницу вашего сайта на главный экран телефона или сохранить как веб-приложение. В таком случае с помощью favicon можно быстро найти сайт среди большого количества других приложений.
Какой формат использовать для favicon?
Раньше в качестве основного формата использовали ICO. Особенность данного формата – мульти-размерность. Данный файл может хранить в себе несколько размеров иконки. На смену ICO пришел формат PNG. ICO все еще поддерживаемый, но большинство современных браузеров выбирают PNG формат иконки, который легче. Некоторые браузеры не могут выбрать правильный значок в файле ICO, что приводит к неправильному использования значка с низким разрешением.
О каких платформах пойдет речь в этой статье?
- Десктопные браузеры
- Chrome на Android
- Иконка закладки в iOS (PWA)
- macOS
- Windows
Десктопные браузеры
Начнем, пожалуй, с классического десктопа.
Как было упомянуто ранее, формат ICO сегодня является устаревшим, но это не значит, что про него нужно забыть. Формат ICO может спасти вашу иконку и корректно отображать favicon в некоторых случаях. Например, до 11 версии IE PNG-формат не поддерживается. Поэтому для IE10 и младших версий нужно использовать старый формат ICO. В таком случае желательно использовать следующую комбинацию ICO и PNG форматов:
Для создания мульти-размерной иконки ICO можно использовать сервис-конвертер icoconvert. При генерации иконки необходимо выбрать следующие размеры: 16х16, 32х32, 48х48 (highest resolution icon).
Иконки PNG имеют следующие размеры: 16х16, 32х32, 96х96, 120х120. Зачем иконка 120х120? Яндекс Справка сообщает, что может воспользоваться иконкой данного размера.
Если обратить внимание на значение rel (тип ресурса), то icon – учитывается большинством браузеров, а shortcut icon – учитывается браузером IE.
Chrome на Android
Android ожидает увидеть значок 192х192 в формате PNG, alpha-канал (прозрачность) приветствуется.
Android Chrome полагается на манифест веб-приложения. Любой сайт может использовать манифест для того, чтобы ссылаться на некоторые значки.
Сам файл манифеста формата json и объявляется следующей строкой:
Файл манифеста для Android Chrome можно сгенерировать с помощью сервиса RealFaviconGenerator.
Иконки должны иметь следующие размеры: 72х72, 96х96, 144х144, 192х192, 512х512 в формате PNG, прозрачность приветствуется. Так как иконка может иметь прозрачный фон, то в манифесте можно указать цвет с помощью background_color.
Стоит отметить, что на телефоне пользователь имеет возможность сохранить страницу браузера на главный экран. Это будет просто ссылка на страницу вашего сайта, подтянется иконка с названием android-icon-192x192.jpg, которая объявлена у вас в коде.
Если же подключить к сайту манифест, то при открытии страницы пользователю может быть предложено сохранить сайт в качестве приложения. В данном случае вы имеет возможность объявить визуально ту же иконку (android-icon-192x192.jpg) или переделать дизайн иконки для приложения под свои нужды и объявить в манифесте с соответствующими размерами.
Иконка закладки в iOS (PWA)
iOS Safari ожидает увидеть apple touch icon. Это иконка PNG формата 180х180, без alpha-канала (без прозрачности). Углы иконки будут автоматически скруглены, что упрощает создание apple touch icon.
Пользователи iOS также могут добавить сайт на главный экран, и он будет выглядеть как приложение. Такая ссылка отображается в виде значка и называется Web Clip.
Нижеперечисленные размеры иконок предназначены для поддержки различных устройств, например, для iPhone и iPad:
В коде нужно добавить атрибут rel=«apple-touch-icon» и указать размер с помощью sizes.
Если на сайте нет значка, размер которого является рекомендованным для устройства, то будет использована сама близкая по размеру иконка большего размера. Основная apple touch icon это иконка размером – 180х180. Остальные устройства могут уменьшать иконку.
При создании иконки не забывайте об отступах. Они должны быть не менее 4px со всех сторон. Это необходимо, чтобы ваша иконка не обрезалась, так как значок приложения в iOS имеет скругленные углы.
Следует отметить, что устройства под iOS не единственные, которые ищут apple touch icon. Некоторые браузеры, вроде Android Chrome, могут использовать apple touch иконки, так как они встречаются чаще других PNG иконок высоких разрешений.
macOS
В Mac OS дела обстоят совершенно иначе. Если пользователь попробует сохранить сайт на рабочий стол, то вместо иконки сайта будет отображен скриншот страницы.
Чтобы добавить иконку необходимо использовать формат SVG, который позволит сделать маску иконки. Данная иконка будет отображена при закреплении вкладки в Safari.
SVG-иконка используется в закрепленной вкладке (pinned tab – no focus) в монохромном виде. При наведении (pinned tab – focus) иконка будет закрашена в цвет, который имеет атрибут «color». В touch bar также передается цвет атрибута «color».
При создании иконки необходимо убрать все имеющиеся тени, сделать ее плоской и простой. Упростить иконку до одного объекта можно с помощью операций «Union» и «Flatten». Данные операции легко применить в программе Figma.
Если закрыть глаза на создание иконки-маски, то браузер просто отобразит первую букву домена вашего сайта.
Windows
С Windows нужно немного запариться, чтобы сделать хорошо.
Для IE10 и более младших версий необходимо использовать формат ICO, так как до IE11 формат PNG не поддерживался.
С приходом IE11 и Windows 8.1 появилась возможность закреплять сайты в виде живых плиток. Для маленьких плиток используется по умолчанию favicon, а для больших и широких плиток необходимо задавать изображение конкретного размера. Это можно сделать с помощью добавления тегов метаданных в разметку сайта или создать browserconfig.xml (файл конфигурации браузера).
Пример добавление тегов метаданных в разметку веб-сайта для больших плиток:
Данной строкой мы указываем цвет фона плитки:
Можно указать имя вашего веб-сайта:
Что такое browserconfig? Это XML-документ, в котором перечислены различные значки, соответствующие пользовательскому интерфейсу Metro UI.
Чтобы подключить файл browserconfig в разметке необходимо добавить следующую строку в head:
Сам файл будет выглядеть следующим образом:
В browserconfig файле определены изображения для различных размеров плитки.
Microsoft рекомендует брать больший размер изображений в целях поддержки экранов с высокой плотностью пикселей.
В следующем списке приведены некоторые рекомендации по использованию различных размеров:
- Small — 70x70 (Рекомендуемый размер: 128x128)
- Medium — 150x150 (Рекомендуемый размер: 270x270)
- Wide — 310x150 (Рекомендуемый размер: 558x270)
- Large — 310x310 (Рекомендуемый размер: 558x558)
Подготовка favicons
Перед тем как добавлять ваши иконку в корневую папку сайта необходимо их подготовить. Исходные размеры иконок не очень большие, но можно их сжать с наименьшей потерей качества.
Например, в моем случае вес всех изображений был 200кб, после сжатия 50кб. Качество изображений практически не изменилось. Вы можете воспользоваться любым удобным сервисом для сжатия картинок. Я использовала iloveimg.
Заключение
Последовательность подключения в разметке веб-сайта:
С помощью последней строки кода «theme-color» можно закрасить адресную строку и строку уведомлений в любой цвет. В значении content задается цвет.
Для проверки иконок вашего сайта воспользуйтесь RealFaviconGenerator. Данный сервис покажет, как отображаются ваши иконки на разных платформах, подскажет где и какие могут быть проблемы.
Кроме того, данный сервис может сгенерировать необходимые размеры, форматы иконок и код. Но необходимо проверять исходники на наличие всех рекомендуемых размеров для корректного отображения на различных устройствах.
Читайте также: