Як додати іконку сайту в адресну стрічку браузера?

Влад Мержевич

Тема:Сайт

Під час завантаження сайту в адресному рядку браузера іноді можна побачити невелике зображення, яке пов'язане з тематикою сайту. Та сама іконка відображається поруч із посиланням при додаванні його до закладок браузера.

Отображение иконки в строке браузера

Щоб встановити подібну «фічу», необхідно намалювати зображення розміром 16х16 пікселів і зберегти його у форматі ICO в корені сайту під іменем favicon.ico.

Adobe Photoshop не розуміє формат ICO і не зберігає у ньому зображення, тому для цієї мети потрібний додатковий плагін.

Для роботи плагіна файл потрібно розпакувати і зберегти в папці Plug-Ins\File Formats. Зазвичай програма Photoshop CS під Windows встановлюється в папці c:\Program Files\Adobe\Photoshop CS. Тоді повний шлях для файлу плагіна буде c:\Program Files\Adobe\Photoshop CS\Plug-Ins\File Formats.

Розміщення плагіна для збереження файлів у форматі ICO

Після додавання плагіна, при збереженні зображення у списку доступних форматів з'являється новий пункт «Windows Icon».

Тип файла для збереження іконки

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

Файл не обов'язково повинен розміщуватися в корені сайту, але тоді слід вказати браузеру, де він знаходиться. Це робиться через тег <link>, як показано нижче.

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

Атрибут href вказує розташування та ім'я файлу.

Формат зображення не обов'язково повинен бути ICO, також допускається використання GIF і PNG. При цьому необхідно змінити значення атрибута type на image/gif або image/png, в залежності від типу зображення.

<head>
 <link rel="shortcut icon" href="/images/favicon.png" type="image/png">
</head>
SEO текст: Навчіться додавати власну іконку сайту для покращення його візуального вигляду та розпізнаваності в браузерах. Встановіть фічу, яка буде автоматично відображати вашу іконку в адресному рядку та закладках браузера.

Часті запитання