Як поставити іконки на сайт

Як поставити іконки на сайт

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

Інструкція

  1. Таку іконку прийнято називати «Favicon» (Favorite Icon) і являє вона собою картинку розміром 16 на 16 піксель. Деякі з сучасних браузерів можуть відображати та іконки великих розмірів, але якщо вам важлива кросбраузерність, то орієнтуватися слід на цей мінімальний стандарт.

    Створити таку картинку ви можете самі в будь-якому графічному редакторі. Сучасні браузери вміють читати іконки як у їхньому рідному форматі ico, так і в стандартних графічних форматах gif, png, bmp і т.д. Однак, якщо ви хочете охопити максимальну кількість модифікацій браузерів, то варто орієнтуватися на формат ico. Є можливість намалювати потрібну вам зображення в редакторі, зберегти в одному із стандартних форматів, а потім конвертувати в формат ico за допомогою одного з онлайн сервісів. Деякі з таких сервісів можуть запропонувати і створення favicon повністю в онлайн-режимі.
  2. Коли іконка створена, її слід завантажити на сервер вашого сайту під ім’ям favicon.ico. Деякі з браузерів не вимагають, щоб іконка називалася саме так, але, знову ж таки, маючи на увазі максимальну кросбраузерність, варто орієнтуватися на найжорсткіші вимоги. Саму процедуру завантаження найпростіше провести через файл-менеджер, який є в складі будь-якої системи управління сайтом або панелі адміністрування вашого хостинг-провайдера. Помістити файл найкраще в кореневу папку сайту — саме там за замовчуванням шукають її браузери і пошукові роботи, якщо в коді сторінки немає явної вказівки адреси.
  3. На завершення слід додати вказівку на іконку у вихідний html-код сторінок сайту. Відповідний тег для Internet Explorer виглядає так:

    <link rel=»icon» type=»image/vnd.microsoft.icon» href=»favicon.ico»>

    Решта браузери розуміють інше значення атрибута «rel»:

    <link rel=»shortcut icon» type=»image/x-icon» href=»favicon.ico»>

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

    Ці два рядки потрібно розмістити між тегами <head> і </ head>. Тобто вам треба відкрити потрібну сторінку в редакторі сторінок системи управління, переключити його в режим редагування html-коду, знайти рядок, що містить тег </ head> і додати перед нею два рядки, наведені вище. Потім збережіть зроблені в сторінці зміни.