«Единственный способ творить великие дела – это любить то, что ты делаешь»
SEO


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    <link rel="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 соответственно.

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

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



Отзывы и комментарии:

Комментариев нет...

Оставить отзыв:

Ваше Имя:

Текст комментария:

Ответьте на вопрос:

Сколько дней в Високосном году?


Поисковые системы
Как создать и добавить на сайт иконку в формате SVG?
80
Как определить главное зеркало сайта?
913
Как правильно составить файл robots.txt?
1669
Как правильно составить файл sitemap.xml?
6482
Последние заметки

Тематические публикации
Популярные заметки