Як встановити фавікон на блог wordpress і на сайт-одностранічнік

При відкритті веб-сторінок в браузері, зліва від назви ресурсу часто ми бачимо яке-небудь зображення. Це зображення називається favicon і сталося це назва від злиття двох слів favorit і icon. Наявність даної іконки сприяє впізнаваності ресурсу, це свого роду візитна картка сайту.
По-перше, коли в браузері відкрито занадто багато вкладок, то знайти потрібну вам сторінку буде набагато легше, якщо у неї буде видно зображення.
По-друге фавікон видно у видачі пошукових систем і якщо у вашого сайту є іконка, це буде тільки йому на користь, так як адреси ресурсів з іконками відразу кидаються в очі і по ним роблять більше переходів.

Якщо ви хочете, щоб ваш сайт був пізнаваний не тільки за назвою, а й по іконці, яка буде відображатися ліворуч від його назви, потрібно обов`язково додати її на ваш ресурс.
У цій статті ви знайдете кілька порад на тему, як встановити фавікон на блог під керуванням CSM WordPress і як додати іконку на звичайний сайт, який не має движка, наприклад на продає сторінку.

Де можна знайти або намалювати іконку для сайту

Просту іконку для сайту можна намалювати самому, за допомогою графічних редакторів або онлайн генераторів іконок типу:

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

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

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

Як встановити іконку для сайту на WordPress

Додати favicon в WordPress можна різними способами, за допомогою чистого HTML коду і за допомогою спеціальних функцій WordPress.
Спочатку розглянемо варіант за допомогою спеціальних функцій движка, так як цей варіант найбільш універсальний.

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

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

Виглядає такий код приблизно так, як на знімку, в файлі header.php (Тема), між тегами head повинна бути такий рядок:

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

Для цього відкрийте в редакторі файл header.php (заголовок) і між тегами:

Відео: Установка фавікона на WordPress

вставте один з варіантів коду для відображення фавікона.

Перший варіант коду:

Другий варіант коду:

Насправді ці два коду однакові, різняться вони лише функцією, яка показує движку, шлях до файлу із зображенням, так виглядає цей код без цих функцій:

А це ті самий функції, які потрібно додати в цей код:

Відео: Як встановити фавікон на блог wordpress (відео-урок № 8)

Вибирайте будь-яку і замініть рядок: "Http: // шлях до файлу" на одну з цих функцій.

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

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

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

Щоб дізнатися, який потрібно прописати шлях до файлу, зайдіть в панель адміністратора.

Потім перейдіть по шляху: "Медіафайли - Бібліотека" і там знайдіть заздалегідь завантажений favicon.

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

І тут уже ви побачите посилання на свій favicon. Просто скопіюйте її в буфер обміну і вставте в код, замінивши шлях до файлу. Ось і все, перезагрузив браузер ви побачите свою іконку.
Якщо для зберігання зображень ви використовуєте інший каталог, наприклад папку "images" в кореневому каталозі вашого домену, тоді вкажіть шлях до нього: "адрес_сайта / images".

У видачі пошукових систем ваша іконка з`явиться не відразу, але вона обов`язково з`явиться через кілька днів і ваш сайт придбає індивідуальність.

Як встановити іконку на продає сторінку або сайт одностранічнік

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

Для такого сайту також не обов`язково встановлювати іконку з розширенням ico і дозволом 16х16px, тут навіть не обов`язково, щоб файл називався favicon, відображатися буде іконка з будь-якою назвою, головне її ім`я прописати в коді.
Вставте між тегами head Наступного код і фавікон буде встановлено:

Для того, щоб цей код спрацював, потрібно зображення помістити в кореневий каталог сайту і називатися воно повинно favicon.ico, якщо у вас зображення знаходяться в іншому каталозі, тоді змініть шлях до нього в коді. Теж саме потрібно зробити і з розширенням файлу.
Також допоможе прикрасити ваш блог оформлення постів, як наприклад, за допомогою красивих блоків.
Успіхів!