Как сделать favicon для сайта?
Создать favicon.ico (пиктограмму или иконку для сайта) вы можете в бесплатном онлайн редакторе на этой странице. Сделать это можно двумя способами.
Первый способ - нарисовать в редакторе пиктограмму и скачать её, нажав кнопку «Скачать favicon.ico».
Второй способ - подготовьте файл иконки в виде квадратного изображения размером не более 512 x 512 px в формате JPG или PNG и загрузите в редактор, нажав кнопку «Загрузить картинку». В окне редактора появится ваше изображение, которое вы можете отредактировать или сразу сохранить в виде файла favicon.ico, нажав кнопку «Скачать favicon.ico».
Коллекция favicon.ico
Что такое фавикон и для чего он нужен
Фавикон - это изображение 16 x 16 px с названием favicon.ico (значок, иконка или пиктограмма). Favicon отображается в адресной строке браузера перед адресом сайта или в названии вкладки браузера рядом с заголовком. В поисковых системах Яндекс, Гугл и других – фавикон отображается рядом с названием сайта в поисковой выдаче. Он делает сайт более заметным и узнаваемым.
В поисковой выдаче favicon.ico появляется не сразу, необходимо время для индексации файла поисковыми системами.
Форматы фавикон
Самыми популярными форматами файлов фавикон для сайта являются следующие:
- favicon.ico - изображение в формате ICO 16 x 16 px
- favicon.png – изображение в формате PNG 120 x 120 px
- favicon.svg – векторный формат SVG 120 x 120 px
Изображение в формате ICO вы можете создать в бесплатном онлайн-редактор на этой странице. Изображения в форматах PNG и SVG – в любых доступных вам графических редакторах, например Photoshop и CorelDraw.
Как установить фавикон на сайт
Для установки favicon.ico и других форматов закачайте через FTP-клиент файлы favicon в корневую директорию вашего сайта. Добавьте между тегами <head> ... </head> в шаблоне вашего сайта следующий код:
<link rel="icon" href="https://site.ru/favicon.ico" type="image/x-icon">
<link rel="icon" href="https://site.ru/favicon.png" type="image/png">
<link rel="icon" href="https://site.ru/favicon.svg" type="image/svg+xml">
Не забудьте заменить в коде site.ru на адрес вашего сайта!