Как поменять фавикон

Как сменить иконку сайта (favicon.ico)

Иконка сайта должна быть в формате .ico, и файл должен иметь название favicon.ico. Для размещения сайта вы можете использовать бесплатный хостинг для сайтов HTML. Бесплатный тестовый режим предоставляется на 14 дней.

Если сайт был создан в Конструкторе Рег.ру, добавьте фавикон по инструкции.

Загрузите файл иконки в каталог вашего сайта: В какой каталог нужно загружать файлы моего сайта.

Дополнительно (не обязательно, но рекомендовано) добавьте следующие строки в каждую страницу вашего сайта внутрь секции:

Как поменять фавикон на сайте

Фавикон – это совершенно неправильное слово, просто оно используется в разговорной лексике веб-мастеров и под ним понимают картинку, которую вы можете видеть во вкладке браузера, а также при нахождении сайта в поисковой системе Яндекс.

Эта иконка, хотя она и совсем крошечная (16х16), имеет большое значение в общем восприятии сайта. Но ее самая главная роль – привлечь пользователей в поисковой выдаче. Я вам гарантирую, если у вас нет такой картинки, вы теряете 10-30% кликов из поиска, потому что люди кликают на те сайты, у которых есть favicon!

И кому теперь дело, какую вы написали статью, насколько хорошо она отвечает на вопрос человека и т.д. Ее просто могут не заметить, а все по одной причине – нет favicon.

Итак, казалось бы такая мелочь, но значение ее огромно. Таким образом, нужно разобраться, как такую иконку добавлять, а также как из менять в случае необходимости. Сегодня я расскажу вам о двух вариантах: как это сделать через админку WordPress и как через html-код.

Задаем иконку через админку WordPress

Я не помню с какой версии движка появилась возможность задавать иконку для сайта. По крайней мере, желательно иметь 4.0 или выше. Итак, вам необходимо выбрать пункт Внешний вид, а в нем нажать на “Настроить”. Здесь в первой вкладке “Свойства сайта” есть соответствующая настойка, которая позволит вам загрузить изображение. Я рекомендую загружать в формате png.

Кстати, сама система советует загружать картинку не менее 512 писелей по ширине и высоте. Такая рекомендация дается потому, что на мобильных приложениях в браузерах могут действительно использоваться такие размеры. Но в целом вы имеете право полностью проигнорировать эту рекомендацию и загрузить файл любого размера. Главное, чтобы ширина и высота были одинаковыми.

Как поменять favicon через html код

Этот способ уже для тех, кто хочет залезть в код и вообще разобраться, как это работает изнутри. Иконка сайта всегда задавалась в теге head, где подключаются внешние файлы: стили, скрипты, библиотеки и т.д.

Для такого подключения используется одинарный тег link. В нем нужно задать некоторые атрибуты, а также задать путь к файлу.

Master 2 в 1: корпоративный сайт + магазин

Favicon — значок веб-сайта или веб-страницы. Отображается браузером во вкладке перед названием страницы, а также в качестве картинки рядом с закладкой, во вкладках и в других элементах интерфейса.

1. Подготовьте изображение размером 16×16 пикселей в формате ico. Для конвертация изображения в нужный формат вы можете использовать один из бесплатных сайтов, например www.favicongenerator.com
2. Подготовленный файл назовите favicon.ico
3. Перейдите в Административную панель -> Контент -> Структура сайта -> Файлы и папки .
4. Найдите в корневой директории файл favicon.icon и удалите его
   
5. Нажмите на кнопку загрузить файл
   
6. В открывшемся окне выбираем файл-иконку со своего компьютера и нажимаем Сохранить.
   

В своем браузере обновленную иконку вы увидите не сразу, а только когда ваш браузер решит что уже пора обновить ее. Для разных браузеров время обновления иконки может занимать разное время. В Google Chrome можете просто нажать Ctrl+F5.

Поменять иконку сайта

Поменять иконку сайта (favicon), которая отображается браузером в качестве картинки рядом с закладкой, во вкладках и в других элементах интерфейса.

Решение

Большинство современных браузеров не требуют указания ссылки на иконку в коде страницы и в случае его отсутствия берут favicon.ico из корня сайта. Существует несколько способов установить иконку для сайта.

Первый способ

Загрузить в корень сайта файл с именем favicon.ico с новой иконкой. Иконка применяется ко всем подстраницам сайта, если на этих страницах иконка не указана другим способом. Также фавикон, загруженный в корень сайта, применяется ко всем сайтам в мультисайтовости. Если необходимо для сайтов сделать разные иконки, вам подойдет второй способ.

Второй способ

Явно указать местоположение файла иконки в коде страницы. Для этого внутри элемента страницы необходимо разместить следующий код:

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

Атрибут href содержит абсолютный или относительный URL к файлу иконки. Форматом файла так же может быть png или gif, размером 16×16 или 32×32 и с 8-битной или 24-битной глубиной цвета. При этом атрибут type должен содержать MIME-тип формата (например, image/png для PNG).

Иконка для мобильных устройств

Для различных мобильных устройств необходимы иконки различных размеров поэтому для указания размеров иконок есть дополнительный атрибут sizes в котором можно указать размеры иконки. Если браузер устройства не найдет иконки подходящего размера, то он выберет самую близкую по размеру иконку большего размера, нежели рекомендуемый. Поэтому лучше указывать иконки нескольких размеров:

 rel="apple-touch-icon" sizes="57x57" href="apple-touch-icon-57x57.png" />  rel="apple-touch-icon" sizes="60x60" href="apple-touch-icon-60x60.png" />  rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png" />  rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76x76.png" />  rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png" />  rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120.png" />  rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144x144.png" />  rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152.png" />  rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-180x180.png" /> 

Если вам необходимо чтобы иконка вашего сайта хорошо отображалась на всех устройствах и операционных системах можно воспользоваться сервисом типа этого: https://realfavicongenerator.net/

Внимание

При смене иконки браузер может довольно долго сохранять в кэше предыдущую версию изображения. Для того, чтобы увидеть изменения, полностью очистите кэш вашего браузера или откройте ваш сайт в другом браузере. Поисковые системы также могут закэшировать иконку, и она сменится при следующей переиндексации вашего сайта. Это обычно занимает от 2 до 4 недель.