Задача. Необходимо заменить стандартный файл фавикона с расширением .ico на .svg. Также нужно добавить иконки для Apple (для iPhone). В таком формате логотип сайта станет четче и заметнее на сервисах Яндекса, в том числе, в результатах поиска.
Решение 1. Для подключения svg-иконки нужно в корень сайта загрузить favicon.svg, а в файле /bitrix/templates/<шаблон>/header.php заменить favicon.ico на favicon.svg в строке:
|
1 2 3 4 5 6 |
/* Заменить favicon.ico на favicon.svg в файле /bitrix/templates/<шаблон>/header.php */ $asset->addString('<li nk href="'.SITE_DIR.'favicon.ico" rel="shortcut icon" type="image/x-icon">'); |
В случае шаблона «Universe S1», в header.php фавикон выводился просто через тег <link>, Поэтому добавил то, что мне нужно было (Код №2):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!-- В корень загрузить файлы для вывода фавиконки --> <link rel="shortcut icon" href="/favicon.svg" type="image/svg+xml"> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"> <link rel="apple-touch-icon" href="/favicon.ico"> <link rel="apple-touch-icon" href="/touch-icon-iphone.png"> <link rel="apple-touch-icon" sizes="76x76" href="/touch-icon-ipad.png"> <link rel="apple-touch-icon" sizes="120x120" href="/touch-icon-iphone-retina.png"> <link rel="apple-touch-icon" sizes="152x152" href="/touch-icon-ipad-retina.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"> |
Сгенерировать фавиконки можно на realfavicongenerator.net.