Відкрити меню

Як встановити іконку (favicon) для блогу на WordPress

Що таке favicon і для чого вона потрібна? Ви, напевне, не один раз бачили у видачі пошукових систем поряд з адресою ресурсу своєрідне зображення, яке підкреслює особливість сайту і робить його впізнаваним серед інших. Саму адресу користувач може не запам’ятати, а от візуально іконку згадає. Саме значення favicon, в перекладі з англійської, значить Favorites Icon, тобто іконка для вибраного. Таке зображення для Вашого сайту чи блогу підкреслить стиль та індивідуальність самого ресурсу, а також збільшить кількість відвідувачів, які прийшли до Вас саме з пошукової видачі.

Favicon відображається не тільки у видачі, але й на закладці самого сайту, відкритого в браузері. В цій статті ми розглянемо, як встановити таку іконку (favicon) для Вашого блогу на WordPress. Все дуже просто, не потрібно особливих технічних знань та навиків. Така іконка може бути встановлена на будь-якому сайті, не залежно від системи управління, але спосіб буде трішки іншим.

І так, як же виглядає іконка favicon. Я не буду лити воду, звідки прийшло до нас це значення, як пошукові системи його індексують і т.д. Просто покажу, як виглядає сама іконка і як її встановити на WordPress.

Якщо Ви задаєте пошуковій системі певний запит, у відповідь отримуєте перелік сайтів, які відповідають Вашим вимогам. Сайти, на який встановлена favicon, виглядають ось так.

Як Ви бачите, виглядає це дуже привабливо і зайти на такий сайт хочеться більше, ніж на сайт без favicon. Навіть, якщо Ви не пам’ятаєте точну адресу ресурсу, але пригадуєте по якому запиту його знаходили, то побачивши таку іконку перейдете на знайомий Вам ресурс.

А в браузері ці іконки вигладають ось так.

Все говорить на користь favicon, тому встановити її на свій блог я настійно рекомендую. Де ж брати зображення для favicon? Дуже багато веб-майстрів користуються он-лайн генератором, який дозволяє з будь-якого зображення зліпити необхідну нам іконку.

www.favicon.ru

Переходимо по адресі і бачимо ось таку картину. Натискаємо на кнопочку “Вибрати файл” та обираємо необхідний нам рисунок, з якого будемо робити іконку.

Після того, як рисунок обрано, він з’явиться в генераторі. Тиснемо “Далее”.

Нас перекине на стартову сторінку. Опускаємось трішки нижче і бачимо попередній перегляд нашої favicon. Якщо все влаштовує – тиснемо “Скачать favicon”, якщо ж ні – повертаємось назад і вибираємо іншу картинку.

Завантажуємо готове зображення favicon на свій ПК. Тепер ми вже маємо необхідний файл favicon.ico, який і будемо вбудовувати в наш блог на WordPress.

Тепер, переходимо в адмін панель нашого блогу, в Дизайн і вибираємо редактор тем. Редагувати ми будемо файл header.php, тому в правій частині обираємо його.

Нам необхідно вставити певний код між тегами

 <head></head>

Найпростіше знайти закриваючий тег

</head>

шапки блогу і перед ним вставити ось такий код. (Можна в будь-яке місце між цими тегами).

Зберігаємо зміни. Тепер отриманий файл favicon.ico, який вже готовий лежить у нас на ПК, завантажуємо в нашу тему блогу wp-content/themes/наша тема/favicon.ico – тут повинен лежати Ваш варіант файлу favicon.ico. Після цього оновляємо сторінку і все готово. Favicon буде відображатись в закладці браузера.

Варто сказати, що в закладці іконка з’явиться одразу, а у видачі пошукових систем після індексації її пошуковиком. На це потрібен час.

Якщо ж ви не бажаєте генерувати іконку за допомогою сервісу www.favicon.ru, я даю Вам архів файлів в форматі .png (з прозорим фоном), розміром 16х16 пікселів, які ідеально підійдуть для створення Вашої favicon.

Візьміть файл, який Вам сподобався та просто переіменуйте його в favicon.ico (особисто я так роблю ). От і все. Розписувати технічні тонкощі я вважаю непотрібно – зробите все так, як описано – іконка з’явиться 100%. Якщо щось буде не зрозуміло чи не буде виходити – пишіть коментарі, подивимось.

Завантажити архів іконок

Якщо і це Вам не підійде – ось чудовий сервіс www.iconsearch.ru, який дозволяє по назві згенерувати будь-яку іконку потрібного розміру. Вводимо необхідне по змісту слово

І тиснемо Enter. Побачите величезний перелік доступних іконок та зможете завантажити необхідну. На цьому сервісі, також, є можливість обирати необхідний розмір зображень.

Я думаю достатньо. Тепер Ваш блог буде відрізнятися від інших гарним та індивідуальним зображенням – favicon. Успіхів.

Нічого цікавогоТак собіНормальноДобреЧудово (Голосів: 3, середній: 4,33 з 5)
Loading...
Обговорення: 7 коментарів
  1. Оксана сказав:

    Я завантажувала favicon.ico через FileZilla Client чи потрібно було по-іншому? У мене з редагуванням тем не складається((((

    Відповіcти
    1. Олег Волощук сказав:

      Якщо Ви прописали в header.php код зі статті – то саму іконку потрібно завантажити в папку з темою. І не важливо через що Ви будете це робити – головне іконку там розмістити.

      Відповіcти
      1. Оксана сказав:

        Вже показує. Потрібно було напевне перезавантажити ПК.

        Відповіcти
        1. Олег Волощук сказав:

          Не обов’язково. Просто деколи ці іконки не одразу з’являються, а через певний час. Деколи образу, деколи через 2-3 години 🙂

          Відповіcти
          1. Оксана Скоц сказав:

            Я кілька раз зміювала цю іконку. А тепер змінила, а вона залишилась такою ж(пройшло 2-3 дні). І ще одне запитання. Я обирала прозорий фон, а його показує як чорний. Це так має бути?

            Відповіcти
            1. Олег Волощук сказав:

              Та ні, так не повинно бути. Як, як правило, беру іконки звідси https://www.iconfinder.com/, там одразу можна в ico форматі завантажити і чорного фону не було ніколи.

              Відповіcти
              1. Оксана Скоц сказав:

                А я знайшла спосіб швидко замінити favicon) Коли завантажуєш нову готову іконку із www.favicon.ru, а в тебе вже є інші favicon на комп’ютері, то її присвоюється номер. Завантажуєш іконку в свою тему, а у файлі header.php прописуєш цю цифру біля favicon(2 рази). У мене замінилось зразу, а так приходилось чекати до кількох днів.

                Відповіcти

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *

© 2017 Блог Олега Волощука · Копіювання матеріалів сайту без дозволу заборонено
Авторство підтверджено Google