Что такое Favicon. Как создать фавикон для сайта. Как установить фавикон на сайт WordPress

Фавикон (favicon) – это изображение формата .ico и габаритом 16 на 16 пикселей. Оно показывается на вкладках в браузере рядом с названием сайтов, а также в поисковых результатах Яндекса и т. д.

Красочная иконка выгодно выделит твой web-сайт среди прочих – она будет приманкой для потенциальных посетителей.

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

Что такое favicon

Как создать фавикон для сайта

Рекомендую favicon.cc – интернет-сервис в котором можно:

1. Самому нарисовать иконку по пикселям.

Как создать фавикон для сайта

2. Загрузить в сервис изображение с компьютера, после чего преобразовать его в фавиконку.

Как создать фавикон для сайта

У меня была картинка про Братство стали из Fallout. В программе Photoshop я вырезал с неё логотип и убрал фон. Получилось изображение 35 на 35 пикселей.

Как создать фавикон для сайта

В окне редактирования сервиса всё расплывается. Но на привью смотрится очень даже ничего. Осталось чуть-чуть выровнять инструментом move и скачать готовый значок.

3. Выбрать готовые favicon для сайта из базы фавиконов.

Базы фавиконов

Чтобы найти иконку в базе в поиск по сайту я просто пишу ключевое слово на английском, например: butterfly, rocket, gun, soldier и т. п.

Готовые favicon для сайта

Всё что понравилось открываю в новой вкладке. После чего скачиваю лучшие себе на компьютер.

Выбирать анимированные фавиконки не вижу смысла, потому что все браузеры кроме Mozilla FireFox показывают их как обычные иконки.

Не факт что gif-ка которая отлично смотрится в огненном лисе будет классной картинкой и в других браузерах.

Как установить фавикон на сайт

То, как установить значок на сайт, по сути будет как установить фавикон на WordPress. Потому что мой блог работает на этом движоке, и я показываю на его примере.

Но если у тебя html-сайт, или на иной CMS, всё равно. Принцип тот же…

Есть 4-ре способа:

Первый. Загрузи файл favicon.ico в каталог public_html – это корень твоего сайта. И обнови главную страницу сайта.

Как установить фавикон на сайт

Второй. Если на твоём сайте уже есть фавикон, то в исходном коде, Ctrl+U для Mozilla FireFox, посмотри путь до директории в которой он хранится. Копируй туда новую иконку с тем же именем и подтверди замену.

Как установить фавикон на сайт

Третий. Файл тот же, но загружать его в папку с темой оформления твоего сайта. Как правило это характерно для блогов на WordPress.

Как установить фавикон на WordPress

Четвёртый. В header.php, файле своей темы, после открывающегося тега < head > пропиши:

<убери_пробелы_link rel="shortcut icon" href="http://greyfo.beget.tech/wp-content/uploads/2018/01/favicon.ico " type="image/x-icon" />
<убери_пробелы_link rel="icon" href="http://greyfo.beget.tech/wp-content/uploads/2018/01/favicon.ico " type="image/x-icon" />

Естественно путь до значка у тебя должен быть другой. В моём случае я загрузил его в папку где хранятся картинки к записям.

Как установить фавикон на сайт WordPress

Сохрани изменения, обнови сайт в браузере.

Как установить фавикон на сайт WordPress

Почему не отображается фавикон

Обычно это бывает когда страница сохранилась в КЭШ браузера, например если на блоге установлен плагин кэширования.

Поэтому проверять установился ли favicon лучше на главной странице. Она динамичная и, как правило, не кэшируется.

Почему не отображается фавикон

Если ты всё сделал правильно, а фавикона нет, почисти файлы cookies браузера программой Ccleaner.

PS: Читать о том, как пользоваться программой Ccleaner.

С уважением, Сергей.

Просмотров: 449

Один комментарий к “Что такое Favicon. Как создать фавикон для сайта. Как установить фавикон на сайт WordPress”

  • Спасибо за статью! Я не знала, что этот маленький значок называется “фавикон”. Век живи, век учись)

Оставить комментарий или два

Оповещать о новых комментариях по RSS