Створення іконки сайту (favicon)

Радий вітати читачів мого блогу!

Сьогодні я розповім про те, як створити іконку сайту (так званий favicon), яка додасть індивідуальності вашому ресурсу.

Що таке favicon?

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

Саме слово favicon утворено з двох інших, а саме FAVorites ICON, що перекладається на російську мову як «значок для обраного». Щоб ви могли наочно оцінити, що з себе представляє іконка сайту favicon, розміщую скріншот, на якому стрілками позначені іконки різних інтернет-ресурсів:

Створення іконки сайту (favicon)

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

Створення іконки сайту (favicon)

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

Далі це зображення потрібно створити за допомогою графічного редактора, наприклад Photoshop. Можна також скористатися сайтом http://www.favicon.cc, на якому є можливість створити свій власний або завантажити вже існуючий favicon в рубриці Top Rated Favicons.

У будь-якому випадку, в результаті повинен вийти файл із зображенням розміром 16×16 або 32×32 пікселів з розширенням gif або png. Після цього перейменовуємо його в favicon.ico і завантажуємо з допомогою FTP-клієнта на хостинг в корінь (або будь-яке інше місце, головне запам’ятати шлях до файлу) вашого сайту.

Тепер, коли обрана для вашого сайту іконка вже завантажена на хостинг, залишилося лише знайти у файлі header.php вашого шаблону WordPress тег <head></head> і перед закриваючим тегом </head> (з використанням текстового редактора, рекомендую використовувати notepad++ по FTP, або в адмін-панелі знайти пункт Зовнішній вигляд → Редактор → header.php) вставити наступний код, що відповідає за відображення цієї самої іконки сайту:

<link href=”http://имя сайту/шлях до файлу favicon.ico/favicon.ico” rel=”shortcut icon” type=”image/png” />

Зберігаємо зміни, оновлюємо сторінку і спостерігаємо з’явилася іконку вашого сайту/блогу.

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

На цьому створення іконки сайту (favicon) для сайту/блогу на WordPress завершено!

Підписуйтесь на оновлення мого блогу, щоб не пропустити публікацію нових статей!