.ico все ще є очікуваним форматом у корені сайту, і більшість онлайн-конвертерів просять вас завантажити зображення на їхній сервер. Ось як отримати правильний багаторозмірний favicon.ico з PNG, нічого не завантажуючи.
.ico — це не просто перейменоване зображення
Перейменування logo.png на favicon.ico недостатньо. ICO — це формат контейнера з власним заголовком: він описує, скільки зображень містить, які розміри та де у файлі починається кожне з них. Перейменований PNG не має такого заголовка, і суворіші браузери відмовляються відтворювати його.
Правильний ICO вбудовує кілька роздільних здатностей однієї піктограми. Браузер читає заголовок, вибирає варіант, найближчий до потрібного йому розміру, і нічого не збільшує.
Перетворіть PNG на ICO за три кроки
Крок перший, підготуйте джерело. Квадрат PNG принаймні 512×512 пікселів дає найкращий результат, оскільки кожен розмір буде отримано шляхом зменшення масштабу. Якщо ваше зображення має прозорий фон, вирішіть, чи залишити його: воно ідеально підходить для вкладки, але iOS і Android замінять його чорним.
Крок другий — створіть зображення потрібних розмірів. Файл має містити щонайменше 16×16, 32×32 і 48×48. Використовуйте якісний фільтр передискретизації, інакше дрібні зображення втратять читабельність.
Крок третій, упакуйте їх. Три зображення зібрано в один контейнер ICO із заголовком, що описує кожен запис. Результат надходить у корінь сайту під назвою favicon.ico, де браузери знаходять його навіть без тегу HTML.
Чому важливе локальне перетворення
Більшість конвертерів PNG в ICO працюють, завантажуючи ваш файл на сервер, який обробляє його та надсилає результат назад. Ваш логотип, часто ще до того, як він був запущений публічно, потрапляє на машину, якою ви не керуєте, відповідно до політики збереження, яку ви не читали.
Проте сучасний браузер може зробити все це самостійно: декодувати PNG, змінити його розмір на полотні, повторно закодувати кожен розмір і зібрати контейнер ICO. Це те, що робить LFFavicon. Жоден запит не містить вашого зображення, а закриття вкладки очищає все.
Перевага не лише теоретична: перетворення відбувається миттєво, воно працює в автономному режимі після завантаження сторінки, немає черги та щоденного ліміту.
Одного тільки .ico вже недостатньо
Перетворення вашого PNG на ICO обробляє вкладки та застарілі клієнти, але залишає непокритими три контексти: сучасні браузери, які віддають перевагу SVG, який залишається чітким за будь-якого розміру, головний екран iOS, якому потрібен непрозорий 180×180 PNG, і Android, який читає вебманіфест.
Оскільки ви все одно обробляєте зображення один раз, виготовте весь набір за один прохід. Ось що робить генератор: одне джерело подає піктограми .ico, SVG, Apple Touch icon і маніфест із попереднім переглядом кожного контексту перед завантаженням.
Першоджерела
Поширені запитання
Який розмір PNG вам потрібен, щоб створити ICO?
Квадрат принаймні 512×512 пікселів. Нижче 128×128 більші розміри в пакеті потрібно збільшити, і результат виглядає розмитим. SVG ще краще, оскільки він не має обмеження роздільної здатності.
Чи зберігається прозорість у .ico?
Так, формат ICO підтримує повний альфа-канал, а прозорий PNG залишається прозорим на вкладці. Однак слідкуйте за значком iOS: система заповнює прозорі області чорним кольором, тому створіть фон.
Де має бути файл favicon.ico?
У корені домену, доступному за адресою https://yoursite.com/favicon.ico. Браузери та сканери запитують точну адресу за угодою, навіть якщо жоден тег посилання не оголошує її.