Посібники про фавікони
Прямі відповіді на запитання, які виникають під час створення піктограми: яких розмірів, яких форматів, який код вставити.
Розміри фавіконів: формати та призначення
Пошук за запитом «розмір фавікона» досі пропонує списки з п’ятнадцяти файлів, успадковані з 2014 року. Насправді сьогодні шість розмірів охоплюють вкладки браузера, пошукову видачу, iOS, Android і PWA. Розглянемо, які саме й навіщо.
Читати посібникБезкоштовне перетворення PNG на ICO
.ico все ще є очікуваним форматом у корені сайту, і більшість онлайн-конвертерів просять вас завантажити зображення на їхній сервер. Ось як отримати правильний багаторозмірний favicon.ico з PNG, нічого не завантажуючи.
Читати посібникІконка Apple Touch: розмір, формат і код
Apple Touch icon явно надає зображення, яке використовується, коли відвідувач додає ваш сайт на головний екран iPhone. Він залишається відокремленим від значка вкладки веб-переглядача та піктограм, оголошених у маніфесті вебзастосунку.
Читати посібникSVG-фавікон для темної теми
Чорний логотип на прозорому фоні ідеально виглядає на світлій вкладці та зникає на темній. Формат ICO не може адаптуватися, але фавікон SVG може: він містить правило CSS, яке змінює кольори залежно від теми браузера.
Читати посібникЯк додати фавікон у HTML
Надійне підключення фавікона в HTML не зводиться до одного чарівного тега. Потрібен невеликий набір доступних файлів і посилань у head. Ця процедура охоплює сучасні вкладки, старіші клієнти та мобільні ярлики без безлічі застарілих варіантів.
Читати посібникФавікон не з’являється або не оновлюється
Якщо піктограма веб-сайту відсутня, проблема не завжди у файлі. Браузер, CDN, сервіс-воркер і пошукова система можуть зберігати різні версії. Впорядкований діагноз дозволяє уникнути зміни кількох змінних одночасно.
Читати посібникФавікони в Next.js App Router
App Router може створювати елементи підключення іконок із файлів зі стандартними назвами або з об’єкта metadata. Обидва підходи придатні, але їх змішування без чіткого правила легко призводить до конкуруючих оголошень.
Читати посібникПосібник зі створення SVG-фавікона
SVG зберігає різкість країв за кожної щільності пікселів і може адаптувати кольори до теми. Ця гнучкість пов’язана з одним обмеженням: файл повинен залишатися самодостатнім, простим і читабельним у крихітному просторі.
Читати посібник