Создание 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-код. И в админке переходим в редактирование шаблонов десктопного дизайна:

Админка > Дизайн : Десктоп > Шаблоны и стили

и под строкой:

<link href="favicon.ico" rel="shortcut icon" type="image/x-icon"/>

вставляем скопированный код.

И в самом конце страницы нажимаем кнопку "Применить".

Прим.: Если вы видите надпись "Текущая тема защищена от изменений. Создайте копию темы", то разумеется сначала нужно создать копию темы.

7) Переходим в редактирование шаблонов мобильного дизайна:

Админка > Дизайн : Мобильный > Шаблоны и стили

И также вставляем код, но без последней строчки:

<meta name="theme-color" content="#ffffff">

И в самом конце страницы нажимаем кнопку "Применить".

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

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

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

Рекомендуем прочитать