В сентябре 2020 года в списке уведомлений Яндекс Вебмастер я увидел сообщения, касающиеся всех моих сайтов: "Добавьте файл favicon в формате SVG или 120x120 пикселей на сайт".
Какое-то время я игнорировал эти уведомления, так как моя иконка favicon в формате ICO и размером 16?16 пикселей удовлетворяла требованиям к фавиконке.
Однако уведомления продолжали приходить, и это не давало мне покоя, так как рекомендуемые требования к иконке для сайта favicon следующие: формат файла SVG и размер 120x120 пикселей. Это нужно, чтобы для сервисов Яндекса логотип сайта был более четким и заметным.
Поэтому недавно я все же решил разобраться, как создать и добавить на сайт файл favicon в формате SVG?
Сделать это оказалось довольно просто. Хотя признаться, я не сразу нашел в сети интернет сайт бесплатный векторный редактор формата .SVG, который не просто носил такое название, а реально предоставлял именно эту услугу.
Сейчас уже не скажу, как я попал на этот сайт. Сначала искал его по запросам: "иконка SVG генератор" или "генератор иконок SVG", но ничего подходящего не находил, пока не наткнулся на этот бесплатный векторный редактор формата SVG.
Теперь давайте по шагам разберем, как создать и добавить на сайт файл favicon в формате SVG?
Инструкция - как добавить иконку на сайт
-
Рисуем в программе Adobe Photoshop иконку. Я сделал ее в формате JPG размером 120x120 пикселей. И сохраняем в лучшем качестве.
-
Далее переходим на сайт - бесплатный векторный редактор формата SVG - по приведенной выше ссылке.
Переходим в верхнее меню Файл и выбираем Импорт изображения.
И соответственно указываем путь к файлу, созданному в программе Adobe Photoshop.
Здесь же есть возможность открыть SVG-файл или создать новый документ. Но в данном случае нам это не нужно.
В итоге после импорта изображения мы должны увидеть свою иконку. В правом верхнем углу редактора указаны ее координаты и размер, который здесь же мы можем увеличить или уменьшить.
Здесь нам осталось только выбрать пункт: Сохранить изображение. Иконка для сайта будет сохранена сразу в формате SVG.
Как видите, создать иконку для сайта и сохранить ее в формате SVG не сложно. Впереди еще несколько простых шагов и мы закончим.
-
Итак, иконка для сайта размером 120x120 пикселей создана в формате SVG. Таким образом, требования поисковой системы Яндекс к фавиконке выполнены.
Теперь необходимо переименовать SVG-файл в favicon, и поместить иконку в корневой каталог сайта.
-
Осталось добавить в код главной страницы сайта в элемент head следующий фрагмент кода (это ссылка на favicon-файл и для примера я приведу свой код):
На что здесь следует обратить внимание?
1. Значение icon атрибута - учитывается большей частью браузеров.
Браузером Internet Explorer учитывается значение .
2. Атрибут содержит адрес вашего сайта (в данном случае - это адрес моего сайта) https://www.webpupil.ru/favicon.svg с указанием имени файла-иконки favicon.svg, расположенного в корневом каталоге.
3. Атрибут указывает на тип передаваемых данных, который зависит от формата файла:
- в нашем случае image/svg+xml — указывается для формата SVG;
- image/x-icon — указывается для формата ICO. Ранее наиболее распространенный формат для файлов-иконок сайтов.
- image/gif, image/jpeg, image/png и image/bmp - для форматов GIF, JPEG, PNG и BMP соответственно.
-
Осталось подождать около двух недель. И иконка для сайта - файл favicon.svg появится в результатах поиска.
Итак, эта статья была посвящена тому, как создать и добавить на сайт иконку - файл favicon в формате SVG? Надеюсь, у вас все получится, желаю удачи.
Отзывы и комментарии:
Добавил(а):
Dvernek
Дата:
2021-01-11
Спасибо. Простая короткая и содержательная статья без воды. Таких статей так мало. Спасибо.
Добавил(а):
Алексей
Дата:
2021-02-08
К сожалению программа не сохраняет как рисунок... В итоге фавикон не отображается... Может что не так делаю?
Добавил:
Admin
Дата:
2021-02-08
Может что не так делаете. Я только что загрузил картинку на сайт бесплатный векторный редактор формата .SVG, указанный в начале статьи и сохранил файл в формате .svg. Этот файл нельзя открыть как обычную картинку. Я его открывал в браузере.
Добавил(а):
Евгений
Дата:
2021-03-31
Почему ты везде пишешь про 120х120 пикселей? Для svg размер значения не имеет. Изначальная картинка в svg может быть метр на метр, но в качестве favicon такая вполне сойдёт.
Добавил(а):
onestep
Дата:
2021-04-15
6 лет сайту и никогда не было этого файла, заморочился и наткнулся на вашу статью, спасибо
Добавил(а):
Андрей
Дата:
2021-11-30
Спасибо за толковую статью. Все понятно. Все бы так писали пояснения и рекомендации. Фавикон встал нормально.
Добавил(а):
Евгений
Дата:
2024-04-15
Каким же долбоебом надо быть, чтобы писать лайфхаки с кодом и поставить запрет на копирование и выделение....
Добавил:
Admin
Дата:
2024-04-15
Каким же ленивым дебилом и тупым ослом нужно быть, что бы не только на халяву получить информацию, так еще и трудно переписать одну строку. И ещё жадным Козлом. Переведи хотя бы 100р. на поддержку и развитие сайта. Для тебя удалю блокировку. Я статьи пишу, а тебе лень строку одну.
Добавил(а):
Алексей
Дата:
2024-11-04
ДАДАДА Присоединяюсь к предыдущим комментам- нельзя скопировть код:)))) Это просто дно!:))
Дата: 2020-12-28
Спасибо статья помгла.