WordPress — одна з найсучасніших та найпопулярніших платформ для ведення блогів, і при цьому в її роботі залишається безліч маловідомих областей налаштування та застосування.
У цьому пості мова піде про WordPress та favicon-файл. Так називається іконка, прив'язана до веб-сайту, яка відображається при додаванні сайту до закладок або увімкнення режиму показу іконок для сайтів у заголовку сторінки (на вкладці зі сторінкою сайту у браузері).
Файл є маленьким графічним зображенням розміром всього 16 х 16 пікселів, яке користувач бачить поряд з адресою сайту в рядку адреси або на вкладці веб-браузера під час перегляду сайту. Фавіконка є ідентифікатором для конкретного сайту або сторінки в Інтернеті.
Вікіпедія: Favicon (скор. від англ. FAVorites ICON - "значок для обраного", від назви папки із закладками в MSIE) - піктограма веб-сайту або веб-сторінки. Відображається браузером в адресному рядку перед URL сторінки, а також як картинка поруч із закладкою, у вкладках та інших елементах інтерфейсу. Традиційно використовувалися зображення розміру 16×16 пікселів формату ICO, розміщені у корені сайту під ім'ям favicon.ico
У цьому пості ви дізнаєтесь, як створити, налаштувати, завантажити та використовувати власний файл favicon на сайті, а також дізнаєтеся, як і для чого використовується цей файл та які вигоди від нього для вашого WordPress-сайту.
Переваги використання іконки проекту для сайту
Для користувачів WordPress-сайту є кілька переваг використання такого файлу на сайті.
По-перше, маленька іконка дозволяє вашому сайту виділитися в загальному потоці сайтів та веб-адрес, так що ваш сайт легко запам'ятовується.
Більшість сайтів на базі WordPress використовується звичайна стандартна фавіконка, а тому всі такі сайти "зливаються" в один суцільний потік, в якому можна запам'ятати платформу, на якій побудовано веб-ресурс, але не сам сайт.
Файл favicon надає вашому сайту "родзинку", робить його несхожим на "побратимів по движку".
По-друге, іконка для сайту може бути хорошим інструментом для онлайн-брендингу в процесі індексування сайту пошуковими системами. Грамотне використання цієї можливості допоможе залучити до сайту додатковий трафік. Подібно до логотипу та назви сайту, фавіконка допомагає створити професійний імідж для сайту серед ваших клієнтів.
И по-третє, при браузингу із застосуванням вкладок такі браузери, як Firefox, Google Chrome та ряд інших, допомагають швидко визначити потрібний сайт у цілій "пачці" відкритих вкладок, що робить серфінг по інтернету швидше та зручніше.
Розібралися з "плюсами" фавіконок? Тепер перейдемо до практики.
Як створити Favicon
Є кілька способів створити favicon. Одна з доступних опцій — створення графічного редактора, який дозволяє зберігати підсумкові файли з розширенням . Ico, Такі як GIMP,CorelМалювати або Photoshop. Навіть за допомогою MS Paint ви зможете створити власну фавіконку.
Найпридатніша для вас та програма, з роботою в якій ви знайомі.
Загалом, незалежно від того, який графічний редактор ви в результаті оберете, вам потрібно завантажити плагін для збереження підсумкового файлу у форматі . Ico.
Завантаживши та встановивши такий плагін, ви можете приступити до створення власної фавіконки для сайту. Якщо ваш сайт вже має свій логотип, ви можете просто змінити його розміри до пропорцій фавіконки, щоб подивитися, як виглядатиме така картинка.
Але завжди можна створити фавіконку з нуля. У створенні такого файлу постарайтеся використовувати колірну гаму вашого сайту, але не перестарайтеся. Врахуйте, що в результаті у вас вийде файл з невеликою роздільною здатністю і невеликим розміром, тому фавиконка повинна бути максимально простою і в той же час - унікальною, що запам'ятовується. Так, відвідувачі вашого сайту не сплутають ваш сайт з іншими схожими проектами.
Якщо у власних дизайнерських навичках ви не дуже впевнені, то краще найняти дизайнера для вирішення цього завдання. Але зазвичай ви і самі можете справитися з таким завданням. Кілька спроб - і в результаті у вас буде чудова іконка для своєї сторінки.
Врахуйте, що розмір 16 × 16 пікселів дуже маленький, тому не варто занадто ускладнювати зображення і використовувати занадто багато кольорів у складанні цієї картинки. Після зменшення готової картинки до 16 х 16 пікселів простежте, щоб картинка не попливла і не стала розмитою. Для цього в графічних редакторах зазвичай є інструмент підвищення рівня різкості. Готовий файл слід зберегти під назвою favicon.ico у папці на вашому комп'ютері.
Ще один спосіб отримати власну фавіконку - це застосувати онлайн-інструмент на зразок ConvertICO.org. З його допомогою можна отримати файл-іконку з 24bit-колірністю та прозорим фоном, причому виготовити фавіконку можна безкоштовно. Кожен з таких сервісів має набір покрокових інструкцій для створення фавіконки. Закінчивши редагування, ви просто зберігаєте готовий файл до себе на комп'ютер, а потім завантажуєте його в папку з веб-сайтом WordPress.
Крім файлів із розширенням . Ico можна також використовувати файли з розширеннями . Gif або . Png з роздільною здатністю 16 х 16 пікселів. Однак у формату . Ico є ряд переваг: його підтримують усі браузери без винятку, у нього менше помилок і він швидше завантажується, а також може містити кілька вкладених файлів.
Як встановити Favicon
Є кілька способів встановлення фавіконок для WordPress. Наприклад, для цієї мети є різні плагіни. Крім того, ви можете виконати дану процедуру і вручну, тут нічого складного немає.
Для початку треба завантажити фавіконку на сервер. Для цього нам потрібен FTP-клієнт, такий як FileZilla, щоб скинути фавіконку до кореневої папки сайту. Також можна копію фавіконки зберегти до головної папки та папки з темою сайту.
Якщо там уже є файл favicon, видаліть його перед тим, як завантажувати новий файл, інакше ваш новий файл не відображатиметься. Всі операції з файлами можна легко виконати за допомогою вашого FTP-клієнта. За замовчуванням фавіконки, які були у вас, треба видалити з кореневого каталогу і з каталогу з темою.
Працюємо зі старими версіями браузерів
Щоб наша фавіконка коректно працювала із застарілими версіями браузерів, треба ще трохи "помудрити".
Для початку зайдіть у свій обліковий запис у Панелі керування WordPress і клацніть на Зовнішній вигляд → Редактор. Тут вам потрібний файл під назвою Шапка (header.php): ми в нього внесемо пару правок
У цьому файлі знайдіть рядок коду, який починається з <link rel="shortcut icon" і закінчується на /favicon.ico" />. Якщо такий рядок вже заповнений, то замініть і вставте код, наведений нижче. В іншому випадку під тегомголова> додайте наступний код:
<link rel="shortcut icon" href="<?php bloginfo('stylesheet_directory'); ?>/favicon.ico" />Щоб зберегти та активувати внесені зміни, просто не забудьте натиснути на "Зберегти".
Тепер перейдіть до головної сторінки та подивіться, чи відображається нова фавіконка у верхньому рядку поряд з адресою сайту. У деяких випадках потрібно кілька хвилин, щоб запрацювало це оновлення.
Якщо файл favicon так і не відобразився, то перевірте, чи не пропустили ви щось на одному з попередніх етапів редагування та завантаження фавіконки на ваш сайт. Також можна повернутися до початку та виконати все завантаження та налаштування з нуля.
Висновок
Файл favicon — лише один із "штрихів" до онлайн-брендингу вашого проекту та можливість виділити ваш сайт серед безлічі конкурентів та аналогів у Мережі. Такі файли досить просто створюються і встановлюються, але ваш сайт завдяки їм стане цікавішим і помітнішим для аудиторії.
Джерело:WP.tutsplus.com
Коментарі до запису: 3
Ось якби її можна було чіпляти на всі рубрики.
Дякую! Дуже своєчасна посада вийшла ;)
Коли перебуваю в панелі адмінки, то іконка є, а коли на сайті як відвідувач, то іконки немає (що не так зробив?