Домой / WordPress / Как установить favicon в WordPress
Как установить favicon в WordPress

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

Здравствуйте, друзья! В этом уроке мы поговорим о неотъемлемой составляющей любого сайта — фавиконке (favicon). Но перед тем как добавить ее на сайт, давайте вспомним что такое favicon изображение и зачем оно нужно.

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

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

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

На очень многих блогах и информационных ресурсах веб-мастеров указано что фавиконка должна быть только в формате .ico, но это ошибочное мнение! Вы можете создать красивое фавикон изображение и в .png формате.

Для того чтобы создать фавиконку самостоятельно, откройте Photoshop или другой графический редактор и создайте квадратное изображение 128 × 128 пикселей, и нарисуйте изображение для фавиконки (обычно ставят просто логотип или его часть). После того как вы создали изображение, сохраните его в формате PNG. Хотя большинство современных браузеров будет отображать значок сайта в формате PNG, очень старые версии Internet Explorer не будут.

Важно! После того как вы создадите фавикон изображение, его не обязательно уменьшать к размеру 16 х 16 пикселей! WordPress это сделает за вас!

Установка Favicon в WordPress

1. Загрузите фавикон в корень папки вашей текущей темы (шаблона). Название фавиконки обязательно сделайте — favicon.

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

wp-content\themes\ваша_тема

2. Зайдите в административную панель WordPress.

3. Перейдите в Внешний вид — > Редактор.

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

4. В списке справа выберите файл с именем Заголовок (header.php).

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

5. Если ваш favicon в png формате — скопируйте код ниже и вставьте его ниже тега <head>.

<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.png" />

Если в формате ico — используйте код для вставки:

<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" />

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

6. Сохраните изменения нажав кнопку «Обновить файл».

Вот и все! Как вы видите, установка фавикон изображения в WordPress задача не сложная, и не требующая много времени.

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

Если у вас что-то не получилось, смело пишите в комментариях! Я постараюсь помочь в решении вашей задачи.


Здравствуйте, друзья! В этом уроке мы поговорим о неотъемлемой составляющей любого сайта - фавиконке (favicon). Но перед тем как добавить ее на сайт, давайте вспомним что такое favicon изображение и зачем оно нужно. Favicon - небольшое графическое изображение 16 х 16 пикселей связанное с вашим веб-сайтов. Одно из главных предназначений фавиконки - возможность идентифицировать веб-сайт визуально в большом количестве вкладок или закладок веб-браузера. Создать фавиконку можно разными способами, для этого есть множество онлайн-редакторов и куча подобный сервисов. На очень многих блогах и информационных ресурсах веб-мастеров указано что фавиконка должна быть только в формате .ico, но это ошибочное мнение! Вы можете создать красивое фавикон изображение&hellip;

Обзор

Проголосуйте за урок

Оценка

Итог : Уважаемые читатели! Не поленитесь проголосовать и оставить комментарий. Таким образом я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

Рейтинг: 4.48 ( 12 голосов )
100

20 комментариев

  1. Василий

    Здравствуйте! сделал как описано в примере а favicon не отображается, уже и скачивал их с генераторов, но безрезультатно!

    • Здравствуйте, Василий!
      Скажите какую тему используете и я постараюсь Вам помочь.

      • Василий

        Twenty Fourteen

        • Все отлично работает. Где-то Вы допустили ошибку.
          Скопируйте в корневую папку темы изображение для фавиконки (к примеру в формате ico и с именем favicon.ico) и добавьте перед закрывающим тегом в файле header.php следующий код:

          <link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" />
          

          Я еще раз проверил все проверил в теме Twenty Fourteen, проблем никаких не обнаружил.

  2. Здравствуйте! Александр, а в общих настройках есть пункт, изображение сайта, это как я понимаю тоже фавикон? По крайней мере я загрузила туда свою фавиконку и она отображается. Или я что то не павильно понимаю?

  3. Надежда Хачатурова

    Большое спасибо! Ваш метод оказался самым грамотным, а потому все заработало. Давно не создавала сайтов на бесплатных шаблонах и совсем забыла, как загружается фавикон. Не пойму, почему в новой версии wp нужно для иконки загружать картинку 512 на 512 пикселей. Бред какой-то. Или я что-то неправильно поняла?

    • Не совсем бред 🙂 Я думаю, что WordPress таким образом стимулирует устанавливать сразу фавиконку высокого качества, чтобы все красиво отображалось на различных мобильный устройствах. Особенно с учетом того, что теперь «мобильность» сайта влияет на ранжирование в google.

  4. Алексей

    Александр, добрый день. Большое спасибо за Ваши уроки. Подскажите пожалуйста, сделал все как Вы описали, но работать не хочет. Тема Xmarket — Responsive WordPress ThemeВерсия: 1.7. Изменить формат файла на iso нет возможности. Есть-ли какой-то вариант решения?

    • Здравствуйте. Вероятнее всего, Вы где-то допустили ошибку. Но если не получается сделать так, попробуйте с помощью какого-то плагина добавить.

  5. Алексей

    Добрый день! У меня тоже в формате png не показывался. а в ico заработал. Спасибо.

  6. А добавлять type=»image/png» разве не требуется?

  7. Привет!

    Попробовал оба варианта — ничего не получается… Тема «mystile». Сайт http://tvoyarybalkashop.com.ua/

  8. установил, но показывает только на главной странице =(

  9. Элеонора

    Здравствуйте, ни как не отображается фавикон, тема Oblique

  10. Привет, у меня последняя версия вордпресс, там иконка добавляется только через админ панель, изображение размером 512 на 512. Шаблон indeziner, в нем нет ручной вставки иконки в шапке сайта! Иконка не отображается в браузерах опера и хром, вернее не отображается на страницах сайта, а вот в админке она есть!

  11. 1informer.com

    Спасибо большоеееее.

    Мучился аж 3 дня.

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

Ваш email не будет опубликован.

*