Домой / 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.57 ( 20 голосов )
100

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

  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 дня.

  12. Аватар

    Добрый день! Подскажите как установить в вордпресс иконку в главную страницу в виде земли, чтобы иконка отображала только главную страницу. Пожалуйста.

  13. Аватар

    Спасибо огромное автору. Статья для меня стала полезной)

  14. Аватар

    Статью нужно переписать. В ВП есть возможность задать фавикон без необходимости лезть в код.

  15. Аватар

    Здравствуйте, помогите пожалуйста. Ни как не получается настроить отображение иконки сайта в поске Яндекса. Яндекс не видит иконку. Вот сайт https://zaim24.in.ua , посмотрите пожалуйста.
    Заранее спасибо за помощь!

  16. Аватар

    Спасибо

  17. Аватар

    не работает

  18. Аватар
    Валерия

    У меня всё получилось. Очень просто и быстро получается установить.
    Спасибо!

  19. Аватар
    Дмитрий

    Добрый день!

    Не работает.
    Картинку качнул на FTP в корневой каталог темы.

    Сначала поставил PNG потом поменял на ICO , но в поисковике не отражается favicon

    Код установил как надо после с окончанием для файла .ico

    Что еще может быть такого?

    Тема BRAND

  20. Аватар
    Светлана

    У меня получилось, а то стояла иконка хостинга, а моя слетела. Ограничилась первым пунктом, но закинула просто иконку в png и ico форматах и в корневую папку сайта, и в папку темы. И ничего прописывать не пришлось, так как с этим у меня сложные отношения))) Спасибо.

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

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

*