Підключаємо іконку на сайт, favicon

Персональна сторінка shra, блог фріленсерів, веб-розробника на PHP. Тут я ділюся своїм досвідом і думками, проводжу досліди над людьми, збираю нематеріальні свідоцтва власної дурості. Використовуючи приклади програмного коду з даного сайту, ви приймаєте всю відповідальність за можливі наслідки їх використання, включаючи ваше психічне здоров'я і інтереси третіх осіб.

Блог / Програмування / Підключаємо іконку на сайт, favicon

Іконка, яка відображається на вкладці браузера, перед назвою сторінки називається favicon (від англ. FAVorite ICON - «значок для обраного»). Ці іконки використовуються в списках обраного в браузері, ви можете побачите їх в результатах пошуку Яндекс і багатьох інших місцях.

Підключаємо іконку на сайт, favicon

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

Чому назва файлу іконки - favicon.ico?

При підключенні, зазначеним вище способом, ви взагалі-то можете задати довільну назву файлу, наприклад, my-icon.ico. А назва favicon пов'язано з історією появи значка.

Сучасні браузери, при відсутності опису в HTML, спробують перевірити наявність файлу favicon.ico в корені сайту.

Всі сучасні браузери можуть використовувати в якості іконки jpeg, png або gif зображення. Деякі з них (firefox і opera) працюють в тому числі і з анімованими іконками.

Як підключити іконку в іншому форматі. Для цього в секцію head потрібно додати ось такий HTML код (покажу відразу кілька прикладів):