Кажется, в моем канале всё больше набирают популярность две темы:
1. Реальные кейсы из опыта
2. Объяснение фронтенд-тем простым языком
Ну что, погнали!
Сегодня вашему вниманию тема: FavIcon — что это за зверь такой?
Есть люди, которые ни разу не добавляли его к реальному сайту — давайте разбираться.
---
Что такое Favicon?
Favicon (сокращение от *favorite icon*) — это маленький значок, который отображается:
* во вкладках браузера рядом с названием сайта
* в закладках
* и даже в истории посещений
Своё название favicon получил от функции "Favorites" в старом Internet Explorer — сейчас это просто "Bookmarks" или закладки в большинстве браузеров.
---
Форматы favicon
🔹 ICO — favicon.ico
Формат ICO был разработан Microsoft и является самым универсальным.
Он позволяет хранить в одном файле несколько изображений разного размера (например, 16x16, 32x32 и 48x48 пикселей), что удобно для разных экранов.
✅ Поддерживается всеми браузерами
⚠️ Это единственный формат, который работает в IE5–IE10
🔹 PNG — favicon.png
Формат, к которому все привыкли — легко создать в любом графическом редакторе.
На современных экранах PNG-иконки зачастую выглядят чётче, чем ICO.
❌ Но не поддерживается старыми IE (версии 5–10)
🔹 SVG — favicon.svg
SVG — это векторный формат, он лёгкий и масштабируется без потери качества.
Картинка остаётся чёткой на любом экране, и весит при этом очень мало.
❌ Пока поддерживается только в Chrome, Firefox и Opera
---
Какие размеры и как подключить?
🟡 Favicon должен быть квадратным.
* ICO: 16x16, 32x32, 48x48
* PNG: 16x16 и 32x32, но подойдут и любые другие квадратные размеры
* SVG: может быть любого размера — он масштабируется сам
📌 Чтобы подключить favicon к сайту, нужно добавить в
<head> HTML:<link rel="icon" href="favicon.ico" type="image/x-icon" />
А сам файл положить рядом с
index.html или указать путь вручную.---
📚 Полезные ссылки:
* https://favicon.io/tutorials/what-is-a-favicon/
* https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata#adding_custom_icons_to_your_site
* https://developer.mozilla.org/en-US/docs/Glossary/Favicon
