Опубліковано 19.07.2023
Сам по собі цей значок із зображенням вашого логотипа не є чимось архіважливим, але його наявність позитивно сприймається як пошуковими системами, так і простими користувачами.
Тому радимо його встановити, а ми розповімо, як це зробити найпростіше.
Навіщо потрібна іконка сайту
Цей маленький логотип розміром 16 на 16 пікселів є мініатюрним відображенням вашого сайту, яке можна побачити у вкладці браузера поряд із заголовком сторінки (так званим, тайтлом).
Пошуковик Google відображає його в результатах пошуку перед назвою, що дає можливість, серед іншого, швидко відшукати свій ресурс, пробігшись очима по видачі.
Відсутність іконки теж виділятиме ваше творіння серед інших, але вже не на краще.
Іконки сайтів в пошуку Гугл
А коли у вас у браузері відкрито безліч вкладок, і вони стають зовсім маленькими, то за іконками можна легко орієнтуватися, де яка вкладка знаходиться. Це значно економить ваш час. А час, як відомо, гроші.
Знайти поглядом вкладку з іконкою набагато простіше
Це, так би мовити, основні плюси від встановлення іконки.
Загалом сайт без цієї важливої картинки викликає менше довіри, відсуваючи його в підсвідомості користувача на задній план.
Як зробити іконку сайту
Є безліч варіантів від “завантажити на спеціальних сервісах” цілу колекцію і вибрати відповідну до “зробити своїми руками”.
Другий варіант більш кращий, оскільки, завантажуючи вже готову іконку, ви завжди маєте шанс побачити в мережі ще сайт зі схожим, як дві краплі води, логотипом. А це не є добре.
Адже ми тільки думаємо, що дуже оригінальні, насправді таких “оригінальних” навколо багато. І якщо малюнок сподобався нам, то великий шанс, що хтось ще покладе на нього око.
Тож правильніше зробити цей маленький файлик самому.
Щоб довго творчо не мучитися, виберіть одну або пару літер із назви свого сайту на свій інтуїтивний розсуд.
Наприклад, я взяв першу та п’яту.
А потім у фотошопі або іншій програмі, з якою ви вмієте працювати, створіть файл розміром 128Х128 пікселів і впишіть літери в цей простір, красиво розмістивши їх відносно один одного.
Залишилося погратися з кольором, шрифтом та подбати, щоб літери були добре видно, коли будуть маленькими-маленькими…
Загалом стандартний розмір іконки 16х16 пікселів, але в такому розмірі ви нічого путнього не намалюєте.
А квадрат зі стороною 128х128 вже дозволяє зробити якусь творчу штуку.
У мене вийшло ось так:
Не шедевр, звісно, але він і не потрібний. Будь-які дрібні деталі не будуть видно все одно, тому чим простіше, тим краще. Та й розмір буде меншим.
Оскільки для створення іконки зі стандартним розширенням .ico потрібні спеціальні програми, то найпростіше зберегти ваш малюнок у форматі .png.
Всі браузери та пошукові системи чудово його розуміють і читають, а вам буде простіше працювати з цим форматом.
Зменшувати його до розміру 16Х16 або 32х32 не обов’язково.
Також нема потреби називати його стандартним ім’ям favicon.ico, оскільки ви все одно вказуєте шлях і назву файлу у спеціально створеному для цього рядку у файлі “шапки”.
Як встановити іконку на сайт
Залишилося найпростіше – встановити готову іконку на свій сайт.
Хоча, для когось може це найскладніше)))
У будь-якому випадку, спочатку дізнайтеся, чи не підтримує ваша тема завантаження іконки через адмінку Вордпрес, що для деяких значно спростить усі маніпуляції.
Дібратися до меню вставки файлу з малюнком можна, пройшовши шлях:
Зовнішній вигляд => Налаштувати => Заголовок сайту
Спустившись вниз, можна побачити меню вставки іконки:
Тут, правда, потрібен квадратний малюнок зі стороною 512 пікселів, що трохи більше того розміру, про який ми з вами говоримо
Деякі теми можуть не мати цього меню, але це зовсім не біда.
Ми встановимо іконку на сайт традиційним шляхом, як це робили ще наші діди.
Завантажуємо наш супер-пупер оригінальний малюнок на корінь сайту через FTP або адмінку вашого хостингу. Що вам простіше.
Тут я не описуватиму, як це робити. У мережі достатньо інформації на цю тему.
Другим кроком необхідно в папці вашої теми Вордпрес знайти файл “шапки” header.php і прописати в нього між тегами <head> всього один рядок:
<link rel="icon" type="image/png" href="/ім'я файлу іконки.png">
Замість “ім’я файлу іконки.png” ви вставляєте назву файлу.
Також рядок можна вставити через адмінку Вордпрес, пройшовши шляхом:
Зовнішній вигляд => Редактор => Заголовок (header.php)
Прописати рядок, вказаний вище та натиснути кнопку Оновити файл
Якщо ви завантажуєте завантажену іконку зі стандартним ім’ям favicon.ico, то ваш рядок буде виглядати:
<link rel="icon" type="image/ico" href="/favicon.ico">
Після того, як все прописано, чистимо кеш через адмінку Вордпрес.
Наприклад, за допомогою Hyper Cache.
Обновивши сторінку, ви можете побачити зроблену своїми руками іконку там, де їй і належить бути.
Через деякий час пошукові системи оновлять ваш сайт, і іконка з’явиться в пошуку.