Создание 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

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

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