Создание Favicon на все случаи жизни
Чтобы сгенерировать универсальный Favicon воспользуемся бесплатным сервисом realfavicongenerator.net
1) Загружаем иконку в формате .jpg, .gif или .png и размером не менее 384px, нажав на кнопку "Select your Favicon image":
2) После этого в следующем окне появятся примеры как будет выглядеть ваш Favicon в разных браузерах и операционных системах:
Как видите, есть возможность выбора стилизации Favicon, чтобы подобрать вариант, который вам больше понравится.
На скрине выше видно, как хорошо, что есть возможность автоматически перекрасить иконку в белый цвет.
3) Далее проверяем, что отмечен именно этот пункт:
и нажимаем кнопку "Generate your Favicons and HTML code":
4) В следующем окне появится:
5) Нажав на кнопку "Favicon package", скачиваем архив с файлами Favicon.
Распаковав его видим следующие файлы:
С помощью файлового менеджера или FTP-клиента заливаем их в корневую директорию сайта.
"Корневая директория" - это основная директория сайта, например, в ней лежит файл robots.txt - по нему легче всего ориентироваться.
6) Затем копируем HTML-код. И в админке переходим в редактирование шаблонов десктопного дизайна:
Админка > Дизайн : Десктоп > Шаблоны и стили
и в шаблоне index.tpl под строкой:
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon"/>
вставляем скопированный код.
И в самом конце страницы нажимаем кнопку "Применить".
* Чтобы увидеть изменения необходимо очистить кэш браузера.
Прим.: Если вы видите надпись "Текущая тема защищена от изменений. Создайте копию темы", то разумеется сначала нужно создать копию темы.
7) Переходим в редактирование шаблонов мобильного дизайна:
Админка > Дизайн : Мобильный > Шаблоны и стили
И также в шаблоне index.tpl вставляем код, но без последней строчки:
<meta name="theme-color" content="#ffffff">
И в самом конце страницы нажимаем кнопку "Применить".
8) (опционально) Только в том случае, когда в админке активировано уведомление о новых заказах в Favicon, зайдя через файловый менеджер в панели хостинга в редактирование файла:
/fivecms/design/html/index.tpl
найти 3 строки:
$.faviconNotify('/favicon.ico
и заменить там:
favicon.ico
на
favicon-16x16.png
UPD: описание обновлено 25.11.2022
Еще нет своего сайта? Запустите интернет-магазин на платформе 5CMS - Все для продаж уже внутри!
-
12.01.2019
Возможности 5CMS: продвинутый фильтр товаров, SEO-friendly, удобная админка, программа лояльности и система скидок, подробная статистика, мобильная версия, маркетинговые виджеты и многое другое ...
-
22.08.2014
Реализована возможность покупателю быстро оформить заказ с минимумом телодвижений + автоматическая регистрация пользователя + 152-ФЗ + подписка на рассылку
-
06.11.2023
Разберемся как активировать новый способ оплаты в панели управления интернет-магазина