Создание Favicon на все случаи жизни

Чтобы сгенерировать универсальный Favicon воспользуемся бесплатным сервисом realfavicongenerator.net

1) Загружаем иконку в формате .jpg, .gif или .png и размером не менее 384px, нажав на кнопку "Select your Favicon image":

Загрузка иконки

2) После этого в следующем окне появятся примеры как будет выглядеть ваш Favicon в разных браузерах и операционных системах:

Favicon для десктопа

Favicon для iOS

Как видите, есть возможность выбора стилизации Favicon, чтобы подобрать вариант, который вам больше понравится.

Favicon для Windows

На скрине выше видно, как хорошо, что есть возможность автоматически перекрасить иконку в белый цвет.

3) Далее проверяем, что отмечен именно этот пункт:

Настройки генерации Favicon

и нажимаем кнопку "Generate your Favicons and HTML code":

Кнопка

4) В следующем окне появится:

Код для вставки Favicon

5) Нажав на кнопку "Favicon package", скачиваем архив с файлами Favicon.

Распаковав его видим следующие файлы:

Файлы 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

Теги: создание Favicon для сайта, фавикон

UPD: описание обновлено 25.11.2022

Еще нет своего сайта? Запустите интернет-магазин на платформе 5CMS - Все для продаж уже внутри!

Рекомендуем прочитать
  • Возможности 5CMS: продвинутый фильтр товаров, SEO-friendly, удобная админка, программа лояльности и система скидок, подробная статистика, мобильная версия, маркетинговые виджеты и многое другое ...

  • Реализована возможность покупателю быстро оформить заказ с минимумом телодвижений + автоматическая регистрация пользователя + 152-ФЗ + подписка на рассылку

  • Разберемся как активировать новый способ оплаты в панели управления интернет-магазина