Меню

Favicon в формате svg генератор

Favicon Generator. For real.

All browsers

All platforms

Your favorite technologies

Your favicon is not correct

Your master picture

Missing pictures

You have chosen to use a specific picture fot the iOS Web clip, but you haven’t uploaded any picture. Please upload a picture or choose another option.

You have chosen to use a specific picture fot the Windows 8 tile, but you haven’t uploaded any picture. Please upload a picture or choose another option.

Missing path

You have chosen to not place your files in the root of your web site. Please specify a path.

Why put the favicon pictures in the root directory

When generating a favicon with RealFaviconGenerator, the instructions ask you to place all files at the root of your web site. You may want to place them in a sub-directory, for example in http://mywebsite.com/icons/ , just to make things clearer. However, there are three drawbacks with this approach:

  • Internet Explorer looks for favicon.ico at the root of the web site. Granted: this is because we ask you to not declare favicon.ico .
  • iOS devices look for files such as apple-touch-icon-144×144.png at the root of the web site, as described by Apple. This issue can be mitigated by declaring the icons in the HTML code (this is necessary for Android anyway), but following Apple conventions is probably the best move.
  • By default, Internet Explorer 11 looks for browserconfig.xml at the root of the web site.
  • Several services, such as Yandex, look for favicon.ico in the root directory.

Favicon compression

RealFaviconGenerator can compress the generated pictures. You usually get a 50%-80% compression rate. Not bad! The compression works well on all tested platforms. Even better!

The compression is lossy, meaning you might notice differences between the original and compressed pictures. Yet the differences are (supposed to be) minimal:

Uncompressed picture (36KB) Compressed picture (14KB)

You can see slight differences in the gradient part:

No zoom 4x zoom

When you download the compressed pictures, make sure they match your standards.

Check your favicon

Check your existing favicon with our online tool and see what can be improved.

Why RealFaviconGenerator

No hard decision

With so many platforms and icons, it’s hard to know exactly what you should do. What are the dimensions of favicon.ico? How many Touch icons do I need? RealFaviconGenerator did the reseach and testing for you.

Done in 5 minutes

You spent hours on design, colors, graphics. How much time left for the favicon? Probably not much. But no worries, you only need a few minutes to tackle this task.

Compelling design, a platform at a time

Each platform comes with its own design requirements. You can’t just use the same picture everywhere. RealFaviconGenerator knows this and lets you craft your icons platform per platform.

Instant feedback

How will Android display my icon? How will iOS round my Touch icon? No more guesswork. RealFaviconGenerator instantly shows you how your icons will look like.

Источник

Как сделать Favicon для сайта онлайн

Favicon (от англ. Favorites icon — «значок для избранного») — значок сайта или конкретной страницы. Не важен для SEO, но позволяет выделиться в выдаче Яндекса, на вкладках открытых страниц и в закладках браузера пользователя.

Как пользоваться сервисом для создания favicon?

  1. Нажмите «Выбрать изображение с компьютера» и загрузите картинку в форматах jpg, jpeg, png или gif. Подберите квадратное изображение без мелких деталей.
  2. Нажмите «Создать Favicon»;
  3. Сервис покажет пример того, как будет выглядеть ваш favicon. Если результат вас устраивает, скачайте готовый файл. Вы получите файл favicon.ico для сайта, то есть файл с расширением *.ico, его и надо будет использовать в дальнейшем.

Как установить отдельные фавиконы для мобильных устройств

Для разной аудитории сайта нужна поддержка основных браузеров и платформ — Windows Firefox, iOS Safari, Internet Explorer, Android Chrome и других. Для мобильных устройств часто прописывают отдельные иконки с другими размерами. Для этого указывают тип устройства в rel, к примеру, «apple-touch-icon», и атрибут sizes с размером.

Достаточный пакет

Будет достаточно одного файла favicon.ico с размерами 48×48.

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

Как установить favicon на сайт

  1. Сохраните картинку в корневой каталог сайта с именем favicon.ico, чтобы получился адрес вида https://sitename.ru/favicon.ico. Это путь к изображению. Он понадобится, если вы захотите использовать разные фавиконы для разделов сайта, чтобы пользователи лучше ориентировались в разделах ресурса. Если вы используете один favicon для всего сайта, путь к нему указывать не нужно.
  2. Добавьте ссылку на размещенный файл в HTML-код главной:

Зачем делать favicon?

Никакой функции для SEO он не несет, но его использование позволяет повысить узнаваемость сайта, и, как следствие, показателя CTR.

Узнаваемость сайта

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

Информативность

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

Запоминаемость бренда

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

Источник

Как создать и добавить на сайт файл favicon в формате SVG?

В сентябре 2020 года в списке уведомлений Яндекс Вебмастер я увидел сообщения, касающиеся всех моих сайтов: «Добавьте файл favicon в формате SVG или 120×120 пикселей на сайт«.

Какое-то время я игнорировал эти уведомления, так как моя иконка favicon в формате ICO и размером 16?16 пикселей удовлетворяла требованиям к фавиконке.

Однако уведомления продолжали приходить, и это не давало мне покоя, так как рекомендуемые требования к иконке для сайта favicon следующие: формат файла SVG и размер 120×120 пикселей . Это нужно, чтобы для сервисов Яндекса логотип сайта был более четким и заметным.

Поэтому недавно я все же решил разобраться, как создать и добавить на сайт файл favicon в формате SVG?

Сделать это оказалось довольно просто. Хотя признаться, я не сразу нашел в сети интернет сайт бесплатный векторный редактор формата .SVG , который не просто носил такое название, а реально предоставлял именно эту услугу.

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

Теперь давайте по шагам разберем, как создать и добавить на сайт файл favicon в формате SVG?

Инструкция — как добавить иконку на сайт

Рисуем в программе Adobe Photoshop иконку. Я сделал ее в формате JPG размером 120×120 пикселей. И сохраняем в лучшем качестве.

Далее переходим на сайт — бесплатный векторный редактор формата SVG — по приведенной выше ссылке.

Переходим в верхнее меню Файл и выбираем Импорт изображения .

И соответственно указываем путь к файлу, созданному в программе Adobe Photoshop.

Здесь же есть возможность открыть SVG-файл или создать новый документ. Но в данном случае нам это не нужно.

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

Здесь нам осталось только выбрать пункт: Сохранить изображение . Иконка для сайта будет сохранена сразу в формате SVG.

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

Итак, иконка для сайта размером 120×120 пикселей создана в формате SVG. Таким образом, требования поисковой системы Яндекс к фавиконке выполнены.

Теперь необходимо переименовать SVG-файл в favicon, и поместить иконку в корневой каталог сайта.

Осталось добавить в код главной страницы сайта в элемент head следующий фрагмент кода (это ссылка на favicon-файл и для примера я приведу свой код):

«icon» href= «https://www.webpupil.ru/favicon.svg» type= » image/svg+xml» >

На что здесь следует обратить внимание ?

1. Значение icon атрибута rel — учитывается большей частью браузеров.

Браузером Internet Explorer учитывается значение shortcut icon .

2. Атрибут href содержит адрес вашего сайта (в данном случае — это адрес моего сайта) https://www.webpupil.ru/favicon.svg с указанием имени файла-иконки favicon.svg, расположенного в корневом каталоге.

3. Атрибут type указывает на тип передаваемых данных, который зависит от формата файла :

— в нашем случае image/svg+xml — указывается для формата SVG ;

— image/x-icon — указывается для формата ICO . Ранее наиболее распространенный формат для файлов-иконок сайтов.

— image/gif , image/jpeg , image/png и image/bmp — для форматов GIF , JPEG , PNG и BMP соответственно.

Осталось подождать около двух недель. И иконка для сайта — файл favicon.svg появится в результатах поиска.

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

Источник

Создание favicon для сайта 2020

Что такое favicon и для чего он нужен?

Favicon – это значок (иконка), который отображается во вкладке браузера, закладках, а также в сниппетах результатов поиска.

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

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

Какой формат использовать для favicon?

Раньше в качестве основного формата использовали ICO. Особенность данного формата – мульти-размерность. Данный файл может хранить в себе несколько размеров иконки. На смену ICO пришел формат PNG. ICO все еще поддерживаемый, но большинство современных браузеров выбирают PNG формат иконки, который легче. Некоторые браузеры не могут выбрать правильный значок в файле ICO, что приводит к неправильному использования значка с низким разрешением.

О каких платформах пойдет речь в этой статье?

Десктопные браузеры

Начнем, пожалуй, с классического десктопа.

Как было упомянуто ранее, формат 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-192×192.png, которая объявлена у вас в коде.

Если же подключить к сайту манифест, то при открытии страницы пользователю может быть предложено сохранить сайт в качестве приложения. В данном случае вы имеет возможность объявить визуально ту же иконку (android-icon-192×192.png) или переделать дизайн иконки для приложения под свои нужды и объявить в манифесте с соответствующими размерами.

Иконка закладки в 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.

В коде нужно добавить атрибут rel=«mask-icon». Сама SVG-иконка должна быть черного цвета. Цвет иконки задается в атрибуте color=»#e52037″.

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 — 70×70 (Рекомендуемый размер: 128×128)
  • Medium — 150×150 (Рекомендуемый размер: 270×270)
  • Wide — 310×150 (Рекомендуемый размер: 558×270)
  • Large — 310×310 (Рекомендуемый размер: 558×558)

Например, для картинки 70х70 рекомендуемый размер 128х128. Это означает, что нужно создать картинку с прозрачным фоном размером 128х128, название которой будет mstile-70×70. То же самое нужно проделать с остальными размерами.

Подготовка favicons

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

Например, в моем случае вес всех изображений был 200кб, после сжатия 50кб. Качество изображений практически не изменилось. Вы можете воспользоваться любым удобным сервисом для сжатия картинок. Я использовала iloveimg.

Заключение

Последовательность подключения в разметке веб-сайта:

С помощью последней строки кода «theme-color» можно закрасить адресную строку и строку уведомлений в любой цвет. В значении content задается цвет.

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

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

Источник

Adblock
detector