Подключение favicon.ico для разных шаблонов
Особенностью favicon.ico в битриксе является то, что это должен быть вовсе не файл с картинками, а пхп-скрипт, а сам файл картинки должен лежить в папке /images. Для того, чтобы файл .ico запускался как скрипт, в корневом .htaccess прописано:
AddType application/x-httpd-php .ico
- В шаблоны сайта скопировать скрипт «favicon.ico» из корня.
- В header.php шаблона написать вызов значка из шаблона:
Заменить favicon.ico для всех устройств на Битрикс
При создании сайта часто забывают установить на него нужный favicon.ico. Но для чего же нужна эта иконка для сайта на битрикс?
Для начала нужно разобраться что такое эта иконка? Favicon — это иконка сайта, что отображается рядом с адресной строкой, возле заголовка на вкладке или в списке закладок браузера. Традиционно используется изображение размером в 16х16 пикселей в формате ICO, которое зачастую размещается в корне сайта с названием favicon.ico.
Все было бы просто, но оказывается что не один только браузер использует эти иконки. Они могут использоваться на рабочем столе смартфона например или в списке закладок на windows. В таком случае, согласитесь, что размер 16х16 иконки сайта Битрикс на рабочем столе айфона будет выглядеть не очень эстетично. В таком случае нам будет нужен особый набор иконок. И одним добавлением файла в корень сайта тут не обойдешься. Потребуется специальное подключение.
Генерация иконок для Битрикс
Первым этапом нужно нарисовать иконку в фотошопе или использовать какой-либо онлайн сервис для генерации. Лично я рисовал в фотошопе. Картинка должна быть ровно квадратной. Желательно 512 на 512 пикселей минимум. Когда нарисовали сохраняем в формате png. У кого иконка заполняет все пространство квадрата то это хорошо, но я столкнулся с проблемой круглой картинки у которой углы прозрачные. Чтобы подготовить картинку к следующему шагу, я прогнал ее через сервис favicon.io, конвертировав ее с png в ico с сохранением прозрачности углов.
А теперь самое сочное. Подготовленную иконку мы прогоняем через сервис favicon-generator.org, который не только сгенерирует нам все типы иконок под разные устройства но и выдаст нам код подключения иконок на сайте для битрикс!
Загрузка иконок на сайт
Скачанный архив с набором иконок для начала нам нужно загрузить на сайт. Находим папку нашего шаблона сайта и создаем в ней еще папку favicon. Директория шаблона сайта может быть или в /bitrix/templates/ или в /local/templates/, с тех времен как Битрикс начал поддерживать папку local. Загружаем созданный архив в созданную нами папку favicon и распаковываем. Теперь мы видим, что куча разных иконок уже у нас на сайте!
Подключение набора иконок
Нам осталось подключить все иконки на в нашем шаблоне сайта. Для этого нужно всего лишь внести нужные записи которые нам выдал сервис генерации. Копируем текст с сервиса и вставляем в шапку шаблона нашего сайта в файл header.php между тегами . Почти готово. Еще нужно только поменять адреса наших иконок в строке их подключения. Так как мы их не разархивировали в корневой папке сайта, для того чтобы не разводить там бардак, то укажем на папку где они находятся. Для этого нам потребуется добавить в каждом атрибуте href следующую строчку /favicon. Чтобы получилось не href=»/favicon-16×16.png» , а вот так: href=»/favicon/favicon-16×16.png». SITE_TEMPLATE_PATH — это консанта, которая указывает на расположение папки шаблона нашего сайта, где бы он не находился.
Готово! Теперь нам осталось сохранить файл header.php и перезагрузить браузер, не забыв предварительно скинуть кеш браузера. Теперь не только у нас отображается красивая иконка в закладке браузера, но и мы можем сохранить ссылку на наш сайт в виде красивой иконки, например на айфоне.
15 апреля 2020 (Boudybuilder) Виталий Фантич
Материалы по теме:
- Многоязычность Битрикс
- Модуль Маркет для Битрикс
- Мультиязычность Битрикс | Translator
- Красивая анимация на Битрикс
- Конвертация картинки img в amp-img Битрикс
- AMP Битрикс — Accelerated Mobile Pages Project Bitrix
Как поменять фавикон в битрикс
Нашли ошибку? Выделите мышкой и нажмите Ctrl+Enter
Фавикон и логотип
Логотип — важная часть имиджа организации и неотъемлемый элемент фирменного стиля. Логотип компании отображается над верхним меню в шапке сайта.
Фавикон — это маленькая иконка на вкладке браузера, которая отображается рядом с названием сайта.
Фавикон может быть загружен в корень: Контент → Структура сайта → Файлы и папки. Если файл не загружен в корневую папку, то фавикон отобразится из папки цветовой схемы.
Чтобы загрузить логотип и фавикон в папку цветовой схемы, войдите в административную часть сайта и проделайте путь: Контент → Структура сайта → Файлы и папки → bitrix → templates → aspro-allcorp → themes.
Выберите папку с названием цветовой схемы, выбранной для сайта.
Перейдите в папку images для загрузки лого и фавиконки.
Начиная с версии 1.1.7, появилась возможность загрузки фавикона через модуль настроек. Также доступен формат SVG. Чтобы загрузить фавикон, войдите в административную часть сайта и проделайте путь: Настройки → Настройки продукта → Настройки модулей → Аспро: Корпоративный сайт.
В разделе основных настроек найдите поле Favicon. Нажмите на кнопку «Добавить файл», чтобы загрузить изображение с компьютера.
Нажмите на «Гамбургер», чтобы выбрать место загрузки файла.
Изменения вступят в силу через некоторое время — после того, как будет обновлен кеш браузера.
Требования к загружаемым файлам
- название файла — logo.png;
- формат — .jpg или .png (предпочтительнее);
- размеры картинки — любые (логотип адаптируется под размеры блока, в котором размещается).
Также вы можете загрузить логотип с прозрачным фоном.
- название — favicon.ico;
- формат — .ico, .svg;
- размеры картинки — 120×120 px (рекомендуемый), 16×16 px или 32×32 px.
Для web clip icon:
- название — apple-touch-icon.png;
- формат — .png;
- размеры картинки — 57х57 px.
Внимание! Не пытайтесь загружать и устанавливать логотип или фавикон через публичную часть сайта — это приведет к некорректной работе решения.
Master 2 в 1: корпоративный сайт + магазин
Favicon — значок веб-сайта или веб-страницы. Отображается браузером во вкладке перед названием страницы, а также в качестве картинки рядом с закладкой, во вкладках и в других элементах интерфейса.
- Подготовьте изображение размером 16×16 пикселей в формате ico. Для конвертация изображения в нужный формат вы можете использовать один из бесплатных сайтов, например www.favicongenerator.com
- Подготовленный файл назовите favicon.ico
- Перейдите в Административную панель -> Контент -> Структура сайта -> Файлы и папки .
- Найдите в корневой директории файл favicon.icon и удалите его
- Нажмите на кнопку загрузить файл
- В открывшемся окне выбираем файл-иконку со своего компьютера и нажимаем Сохранить.
В своем браузере обновленную иконку вы увидите не сразу, а только когда ваш браузер решит что уже пора обновить ее. Для разных браузеров время обновления иконки может занимать разное время. В Google Chrome можете просто нажать Ctrl+F5.