Додаємо фавікон і логотип на WordPress сайт

Брендинг — це просто

Минулого разу ми створили графічні файли favicon.ico та logo.png. Тепер будемо підключати ці елементи до нашого блогу, що працює на движку WordPress. Хоча, даний метод установки фавікона підійде для багатьох інших CMS. Також розповім про те, яким чином підвищити впізнаваність блогу в Мережі інтернет використовуючи дані зображення.

Кілька слів про favicon.ico

Що це таке, і навіщо воно нам...

Фавікон в закладках смартфону

Графічний файл з ім'ям «Favicon» — це мініатюрна картинка, значок, іконка, яка використовується не лише на вкладках браузерів, але й всередині різних додатків, що використовують адресу сайту.

Наявність даного значка поруч з адресою сайту сприяє підвищенню впізнаваності бренду в інтернеті, в нашому випадку — блогу.

Також, завдяки цій іконці, користувач швидше зможе відшукати закладку з тією чи іншою сторінкою блогу, раніше збереженою в браузерах, на робочому столі комп'ютерів, смартфонів тощо.

Трансформація «Favicon»

Фавікон від початку створювався як «Значок для обраного», так званий, «FAVorites ICON», який використовується браузерами в закладках. Однак, з плином часу, цей значок розширив свою область застосування.

Тепер ця іконка використовується не лише біля адресного рядка браузера і на вкладках, але також і на робочому столі ПК, планшеті та смартфоні. Правда, її розмір на цих девайсах набагато більше, та й розширення файлу вже не «.ico», а «.png».

Про те, як відобразити фавікон на мобілці, я детально розповім трохи нижче, а зараз, не забігаючи вперед, починаємо установку «favicon.ico» на сайт. Поїхали!

Як відобразити favicon сайту в браузері і додатках

Встановлюємо іконку на сайт

Щоб «favicon.ico» нашого сайту відображався у всіх браузерах і будь-яких веб-додатках, потрібно зробити наступне:

  1. Зайти на сервер через файловий менеджер хостингу або FTP-клієнт.

  2. Відкрити кореневу директорію сайту (або папку використовуваної теми Вордпрес), та перетягнути туди файл «favicon.ico» зі свого комп'ютера. Про всяк випадок, додай фавікон і в корінь сайту, і в папку теми, щоб боти знайшли її за будь-яких розкладів. Адже браузер разом з роботом пошукової системи, перш за все лізуть шукати «favicon.ico» в корінь сайту, і, не знайшовши останньої, продовжують сканувати всі доступні папки движка. Щоб скоротити час на пошуки фавіконки ботами, потрібно покласти цей файл "на вітрину", тобто на найвиднішому місці.

  3. Відкрити на редагування файл «header.php» (тема WordPress) в «Notepad++», та відредагувати його, прописавши два рядки HTML коду, які зображені нижче. Якщо сайт на самописному двіжку або статичний, значить відкриваємо файл «index.php» або «index.html», який лежить в кореневій директорії.

Файл «header.php» підключення «favicon.ico»

Виділена область, рядки 24-28, — це і є той самий HTML-код, який вказує роботам та браузеру, де потрібно шукати файл «favicon.ico». Код нижче можна скопіювати, і вставити у вказане місце (як на малюнку вище). Тобто код потрібно помістити до закриваючого тегу </head>. Дивись не переплутай його з тегом </header>, бо це зовсім різні за типом HTML-елементи.

<link rel="shortcut icon" type="image/x-icon"href="http://mysite.com/wp-content/themes/twentyseventeen/favicon.ico"><link rel="icon" type="image/x-icon"href="http://mysite.com/wp-content/themes/twentyseventeen/favicon.ico">Фавікон в закладці браузера

В даному коді переноси рядків не обов'язкові. Я їх зробив лише для того, щоб вмістити код в скріншот, зберігши його читабельність. Рядок «mysite.com» не забудь замінити на ім'я свого сайту. Також заміни ім'я теми Вордпрес «twentyseventeen» на ту, яку ти зараз використовуєш, інакше кіна не буде.

Після збереження файлу «header.php», заливаєш його назад на сервер в папку з використовуваною темою, після чого відкриваєш сайт, милуєшся фавіконочкою в адресному рядку браузера і на вкладці.

Фавікон в панелях вебмайстрів Google та Yandex

Фавікон в панелі вебмайстрів Google

Ця ж іконка буде присутньою в закладках обраних сайтів. Але найголовніше, favicon, через деякий час, з'явиться біля адреси сторінки твого блогу в пошуковій системі Yandex.

Шкода, що Google прибрав фавіконки з видачі, красиво раніше було. Але фавіконку сайту все ж буде видно в панелі веб-майстра, поруч з ім'ям веб-ресурсу. Фавікон твого блогу також буде відображатися на більшості ресурсів для аналізу сайтів, та подібних до них сервісах.

Навіщо потрібні майже однакові рядки коду?

Майже однакові рядки коду потрібні для сумісності з різними браузерами. Якісь браузери розуміють одні атрибути директив, а інші й гадки не мають що це таке, і ігнорують той чи інший код. Тому варто прописувати обидва варіанти вище зазначеного HTML-коду, щоб фавікон зміг відображатися у всіх браузерах.

Коли favicon буде відображено у видачі пошукових систем

Перевіряємо видимість favicon

Зображення «favicon» буде відображено у видачі пошукової системи Yandex приблизно через 2-3 тижні після заливки файлу на сервер. Як уже сказано вище, у видачі Google фавікон вже не відображається. Щоб перевірити, чи проіндексував Google фавікон, для цього досить зайти в панель вебмайстрів та глянути. Якщо все ґуд, іконка буде біля імені сайту, див. скріншот вище. Точно так само і в Яндекс.Вебмайстрі. Якщо є фавіконка, значить все чудово.

Для впевненості, можеш забити в адресний рядок ось такий запит (ім'я мого сайту заміни на своє): «favicon.yandex.net/favicon/realcase.lviv.ua», і подивитися чи все в порядку. З'явилася фавіконка, значить все ґуд. Таким же ж нехитрим способом можна перевірити доступність фавікона для бота Ґуґла. Для цього, знову ж таки, вбиваємо в той ж таки рядок запит «www.google.com/s2/favicons?domain=realcase.lviv.ua». За секунду все завантажується, дивимося і милуємося результатом, див. скріншот нижче.

Перевірка видимості favicon в Google

Брендування блогу

Щоб твій блог був пізнаваний користувачами, так би мовити, "здалеку", потрібно створити для нього правильний логотип. Я вже розповідав як це зробити, тому зараз повторюватися не буду. Минулого разу ми з тобою створили логотип і фавікон, а сьогодні встановимо наш логотипчик на своє законне місце.

Відкриваємо блог та заходимо в адмінку

На скріншоті нижче зображено тестовий сайт, на якому я приведу приклад установки логотипу та іконки для мобільних пристроїв. Почнемо з "прикручування" лого. Як видно з картинки нижче, поруч з назвою сайту і слоганом «REAL CASE — Зароби на своєму блозі» немає ніяких графічних елементів: логотипів, іконок та ін. Зараз ми виправимо це непорозуміння кількома кліками.

Сайт без логотипу виглядає сумно

Викликаємо панель налаштувань властивостей сайту

Отже, переходимо в адмін-панель, і відкриваємо редактор поточної теми. Для цього, натискаємо на кнопку «Налаштувати» → «Властивості сайту» → «Вибрати логотип», див. колаж з скріншотів нижче.

Налаштування властивостей сайту

Вибираємо логотип

Вибір логотипу також складається з трьох кроків. Спочатку вибираємо графічний файл на комп'ютері, натиснувши кнопку «Виберіть файли» (1), потім — «Вибрати» (2). Після цього натискаємо на іконку завантаженого файлу (3), та підтверджуємо свій вибір (4). Відкриється вікно «Обрізати зображення», погоджуємося з настройками розміру логотипу, клікнувши по однойменній кнопці (5), див. колажо-скріншот нижче.

Вибір файлу з логотипом

Останній штрих — клік по синій кнопці «Опублікувати», і логотип з'являється в шапці блогу, див. скрін нижче.

Логотип встановлено на сайті

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

Додаємо іконку фавікона з адмін-панелі WordPress

Формат іконки PNG

На початку статті, для підключення картинки «favicon.ico», ми прописували HTML-код в файл «header.php». Зараз я покажу яким чином можна підключити фавікон в форматі «PNG». Для цього нам не потрібно редагувати php-файли, достатньо зробити кілька кліків з адмінки сайту.

Точно так само, як і для додавання логотипу, відкриваємо «Властивості сайту», прокручуємо ліве меню налаштувань трохи вниз та тиснемо кнопку «Вибрати зображення» в блоці під назвою «Іконка сайту», див. скріншот нижче.

Кнопка «Вибрати зображення» в блоці налаштувань теми Вордпрес

Після цього, проходимо вже знайому нам процедуру, див. скріншоти нижче.

Вибираємо файл фавікон

У правій нижній області скріншота вище, видно, як буде відображено фавікон в браузері і в додатках. Клікаємо для підтвердження вибору іконки (3), повертаючись в початкову панель «Властивості сайту». Потім сміливо тиснемо знайому кнопку «Опублікувати», див. скріншот нижче.

Публікація іконки

Результат додавання фавіконки

Фавікон успішно встановлено на сайті

Виходимо з адмін-панелі, і дивимося результат. Так, все в порядку, наша ікона успішно "прикручена" до вкладки браузера, що підтверджує скріншот праворуч.

Тепер користувачеві не складе особливих труднощів знайти твій блог в закладках серед багатьох інших збережених сайтів.

Окрім фавікона для браузерних вкладок (розмір файлу 32x32 px), двіжок Вордпрес також згенерував іконки різних розмірів та HTML-код для мобільних пристроїв. Це можна побачити в початковому коді сайту.

Дивимося початковий код сайту

Натиснувши комбінацію клавіш «Ctrl+U», відкриється нова вкладка з початковим кодом, де прописані кілька рядків підключення фавікона в форматі «PNG», див. скріншот нижче (Код WordPress).

Початковий код сайту з підключенням фавіконок

Як видно з скріншоту вище, Вордпрес згенерував кілька рядків коду, який дозволить операційним системам «Windows», «IOS» та «Android» відображати фавікон в своїх додатках. Для ОС «Android» тут прописаний рядок з розміром файлу «192x192», тобто, максимальний розмір фавіконки.

Цей список можна розширити, додавши в блок з «нашим кодом» ще кілька рядків з розмірами файлів, наприклад, «16x16» і «96x96». Це сприяє більш гнучкому налаштуванню відображення даних іконок на гаджетах з різними роздільними здатностями дисплеїв та в браузерах на десктопі.

Стосовно ОС «IOS» та «Windows», то тут присутні лише два рядки з розмірами файлів «180x180» для «IOS», і «270x270» для «Windows». Цього, звичайно ж, недостатньо для сумісності з усіма можливими роздільними здатностями моніторів, тому, ці рядки також бажано доповнити іншими розмірами.

Наприклад, якщо заглянути в початковий код мого блогу, там ти побачиш величезний список всіх можливих розмірів фавіконок, так би мовити, на всі випадки життя. Можеш їх собі скопіювати та використовувати на своєму сайті. Але не забудь замінити шляхи до файлів та їх імена на свої.

Імена файлів не обов'язково повинні бути такими ж як у мене, вони можуть бути якими завгодно. Тут головне, щоб розміри були вказані правильно для кожного підключеного файлу. Ну і, звісно ж, попередньо потрібно буде створити і залити на сервер всі ці фавіконки з відповідними розмірами. Якщо виникнуть труднощі при підключенні файлів, сміливо задавай питання в коментарях, допоможу чим зможу.

Створення та підключення файлу «manifest.json»

А це що ще за диво?

Це "диво" називається просто: — недосконалість ОС «Android». Якщо ти старанно пропишеш в коді сайту все те, про що сказано вище, але не створиш і не підключиш файл «manifest.json», в такому випадку, фавікон буде відображатися лише в браузері десктопу — настільного ПК/ноутбука, але не на девайсі під управлінням ОС «Android».

Як створити файл «manifest.json»

Це робиться елементарно. Створюєш в будь-якому текстовому редакторі звичайний текстовий файл, потім зберігаєш його з ім'ям «manifest» і розширенням «.json». Після цього, прописуєш в ньому наступний код, див. скріншот нижче.

Файл «manifest.json» успішно створено

Щоб тобі було простіше перенести весь цей код в файл, можеш скопіювати його з блоку коду представленого нижче. Всі рядки коду позбавлені розриву рядків та не потрібних пробілів, тобто код стиснутий, і прописаний в один рядок. Значення атрибутів «name» і «short_name» заміни на ім'я свого сайту (1).

Це ім'я буде відображено відразу під фавіконом, див. перше зображення в статті. Якщо ім'я твого сайту досить довге, придумай скорочену версію, прописавши його в значення атрибуту «short_name». Наприклад, як це зроблено на скріншоті вище — «RealCase» (1). Рядки «ПАПКА» заміни на шлях до графічних файлів фавіконок (2). Щоб все запрацювало, також заміни імена файлів на власні (3).

{"name":"Real Case","short_name":"RealCase","icons":[{"src":"\/ПАПКА\/android-chrome-36x36.png","sizes":"36x36","type":"image\/png","density":0.75},{"src":"\/ПАПКА\/android-chrome-48x48.png","sizes":"48x48","type":"image\/png","density":1},{"src":"\/ПАПКА\/android-chrome-72x72.png","sizes":"72x72","type":"image\/png","density":1.5},{"src":"\/ПАПКА\/android-chrome-96x96.png","sizes":"96x96","type":"image\/png","density":2},{"src":"\/ПАПКА\/android-chrome-144x144.png","sizes":"144x144","type":"image\/png","density":3},{"src":"\/ПАПКА\/android-chrome-192x192.png","sizes":"192x192","type":"image\/png","density":4}]}

Підключаємо файл «manifest.json» в коді сторінки

Щоб підключити файл «manifest.json», потрібно відкрити все той же ж «index.php» з кореня сайту або «header.php», який ми редагували трохи раніше, і додати в нього код, виділений на скріншоті нижче, перед все тим же закриваючим тегом </head>.

Підключення файлу «manifest.json» в коді «header.php»

Скопіювати код для вставки в файл «header.php» можна з представленого блоку нижче.

<link rel="manifest"href="http://mysite.com/wp-content/themes/twentyseventeen/manifest.json">Фавікон на робочому столі смартфону з ОС «Android»

Як і раніше, рядок «mysite.com» міняєш на ім'я свого блогу, та не забувай замінити ім'я теми «twentyseventeen» на свою. Все, тепер твоя фавіконка буде красуватися на робочих столах смартфонів під управлінням ОС «Android».

Як видно на зображенні праворуч, ім'я сайту «Real Case» виявилося занадто довгим для даної роздільної здатності монітора. Тому, в скрипті «manifest.json» спрацював атрибут «short_name», в якому я прописав скорочену версію імені сайту, тобто значення — «RealCase».

Як перевірити коректність роботи коду

Існує багато онлайн-сервісів, які надають користувачам можливість перевірити свої сайти на предмет коректності відображення фавіконок. Ось один з них — «realfavicongenerator.net/favicon_checker». Забиваєш цю адресу в адресний рядок браузера, вводиш ім'я свого сайту, див. скріншот нижче, та переглядаєш результат.

Перевірка коректності відображення favicon

Якщо всі коди з картинками подружилися, і працюють як одна команда, ти побачиш приблизно таку ж картину, яка зображена на скріншоті нижче.

Перевірка валідності favicon пройшла успішно

Навіщо потрібен favicon.ico якщо є favicon.png

Сумісність та підтримка форматів браузерами

Власне, відповідь написана в підзаголовку. Графічний файл «favicon.ico» необхідно використовувати спільно з форматом іконок «favicon.png» через поліпшення сумісності з різними браузерами та додатками. Не всі браузери однаково підтримують той чи інший формат, тому, на поточний момент, доводиться використовувати все разом.

Favicon на панелі популярних сайтів в браузерах

Як це виглядає у Firefox

Додаємо сайт в обрані Firefox

Давай-но перевіримо, як вся ця краса буде виглядати в чудовому (мною улюбленому) браузері «Firefox», який досить суворо ставиться до різного роду багів в HTML-коді.

Отже, відкрили в браузері наш сайт, і дивимося на фавіконку у вкладці. Якщо все ґуд, додаємо сайт в обрані та відкриваємо стартову сторінку браузера.

Отже, в адресному рядку праворуч, натискаємо на білу зірочку, яка при кліці стане синьою (1), або комбінацію клавіш «Ctrl+D». У випадаючому вікні вибираємо в селекторі верхній пункт меню «Панель закладок» (2), і тиснемо «Готово».

Далі натискаємо на великий білий плюсик праворуч від вкладки (✚), і дивимося на збережені в закладках сторінки. На скріншоті нижче видно, що код працює коректно, і наша фавіконка, у всій своїй красі представлена на панелі популярних сайтів в браузері «Firefox». Також на скріншоті шапки сайту (в панелі обраних) чітко проглядається логотип блогу, що сприяє запам'ятовуванню бренду.

Панель популярних сайтів у Firefox

У не менш поважному та улюбленому мною браузері «Google Chrome», Favicon виглядає дещо простіше й дрібніше. Однак, він там також присутній в досить хорошій якості.

Маленька іконка з великими можливостями

Підбиваємо підсумки

Як бачимо, маленький Favicon володіє вельми не поганими здібностями, які підвищують впізнаваність бренду серед сотень тисяч інших сайтів. Також якісна фавіконка сайту може призвести до підвищення клікабельності у видачі деяких пошукових систем. Не можна недооцінювати цю маленьку іконку, адже її присутність поруч з ім'ям сайту грає важливу роль у просуванні сайту. Власне, на цьому все. Питання чекаю в коментарях. Бувай!

Щоб зрозуміти наскільки ти в темі, пройди тест 👇
  • 100 секунд на проходження тестуRealCase

    Тест
  • 5 питань по тематиці сайту
  • 4 варіанти відповідей на кожен
Готовий(-а) перевірити рівень своїх знань?

  •  Тест пройдено 10 раз.
  • Останнє проходження: 12.01.2020 01:32

   
  
 
 
📚Не проґав!
💬Коментарі (Ще немає... твій буде першим)  
    • Ліміт 2000 символів
    • залишилось: