Конвертуйте PNG у ICO для чіткого фавікона
Фавікон — це маленьке зображення, що є візуальною підписом сайту. Ви бачите його у вкладці браузера поруч із заголовком сторінки, у списку закладок, у випадаючому меню адресного рядка вашої браузерної історії, а іноді й поряд із результатами пошуку. Він маленький, але робить багато роботи: впізнаваний фавікон допомагає користувачам знайти вашу вкладку серед десятка інших і сигналізує, що сайт завершений і доглянутий. Класичний формат для такої маленької іконки — ICO, і найпростіший спосіб його створити — почати з чистого квадратного PNG та конвертувати.
Цей інструмент приймає PNG-зображення і перетворює його на ICO-фавікон прямо у вашому браузері. Конвертація виконується локально на вашому пристрої, тому обране зображення ніколи не завантажується на сервер. Це важливо, коли ваша іконка — логотип або брендовий актив, яким ви б не хотіли ділитися з третіми особами. Коли файл готовий — просто завантажте його.
Що таке формат ICO і чому він зберігає кілька розмірів
ICO — контейнерний формат іконок, що зародився в Microsoft Windows, де він зберігає іконки для програм, ярликів і папок. Його визначальна особливість — і причина, чому він став стандартом для веб-фавіконів — полягає в тому, що один ICO-файл може містити одне і те саме зображення одночасно в кількох роздільних здатностях. Замість одного фіксованого растрового зображення файл пакує невеликий набір квадратних зображень і дозволяє браузеру або операційній системі вибрати той розмір, що підходить для конкретного місця відображення іконки.
Це справді зручно. Вкладці браузера потрібна крихітна іконка, панелі закладок може знадобитися трохи більша, а закріплений ярлик на робочому столі може попросити ще більшу. Маючи ICO з кількома розмірами, кожен контекст бере відповідну версію, тому ваша іконка залишається чіткою, а не розмивається при масштабуванні від одного маленького растрового зображення. ICO також зберігає прозорість, що зберігає кути круглого або нестандартного логотипа чистими на будь-якому кольорі вкладки.
Рекомендовані розміри фавікона
Для фавікона сайту варто включити три розміри: 16×16, 32×32 та 48×48 пікселів. Версія 16 пікселів — та, яку більшість браузерів показує у вкладці та адресному рядку. Версія 32 пікселів використовується на екранах з вищою роздільною здатністю та в деяких видах закладок і журналу відвідань, тому зберігає чіткість на сучасних екранах. Версія 48 пікселів охоплює більші контексти, наприклад ярлики сайтів Windows. Оскільки всі вони живуть в одному ICO-файлі, ви постачаєте один актив і дозволяєте кожній поверхні вибирати потрібне.
Починайте з квадратного PNG, щоб нічого не розтягувалося. Якщо вихідне зображення прямокутне або занадто велике, спочатку обріжте або масштабуйте його до чистого квадрата за допомогою нашого змінювача розміру зображень, а потім виконайте конвертацію. Простий, контрастний дизайн читається набагато краще при 16 пікселях, ніж детальна ілюстрація — тому надавайте перевагу чітким формам перед дрібним текстом.
Як додати фавікон на ваш сайт
Коли ICO-файл готовий, завантажте його на сайт — традиційно в корінь сайту як favicon.ico. Багато браузерів знайдуть його там автоматично, але найкраща практика — явно оголосити його в заголовку HTML, щоб не було здогадок. Додайте тег link ось так:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
Помістіть цей рядок всередину розділу <head> ваших сторінок. Атрибут rel="icon" повідомляє браузеру, що цей ресурс є іконкою сторінки, а href вказує на місце зберігання файлу. Якщо ви використовуєте корінний відносний шлях, як у прикладі вище, та сама декларація працює для кожної сторінки вашого сайту. Після розгортання може знадобитися примусове оновлення або очищення кешу, перш ніж нова іконка з'явиться — браузери зберігають фавікони дуже наполегливо.
Приватна конвертація у вашому браузері
Все відбувається на вашому пристрої. Обраний PNG зчитується, декодується і перекодується як ICO локально, нічого не покидає вашу машину в процесі. Немає акаунту, черги чи серверного сховища — що робить це зручним навіть для ще не опублікованих логотипів або клієнтської роботи за угодою. Щоб підготувати та впорядкувати графіку іншими способами, перегляньте наш повний набір інструментів для зображень.
Часті запитання
Чи завантажується моє зображення кудись?
Ні. PNG конвертується у ICO повністю у вашому браузері на вашому пристрої. Нічого не надсилається на сервер і нічого не зберігається, тому ваше зображення залишається приватним.
Які розміри має містити мій фавікон?
Найкорисніші розміри — 16×16, 32×32 та 48×48 пікселів. Зображення 16 пікселів відображається у вкладках браузера, а більші зберігають чіткість іконки на екранах з вищою роздільною здатністю та ярликах робочого столу.
Чому використовувати ICO замість просто PNG?
ICO — давній стандартний формат фавікона, що може зберігати кілька розмірів в одному файлі. Браузери та операційна система вибирають роздільну здатність, що підходить для кожного контексту, тому іконка залишається чіткою замість масштабування від одного растрового зображення.
Чи зберігає ICO прозорість мого PNG?
Так. Формат ICO підтримує прозорість, тому прозорі ділянки вашого PNG зберігаються і іконка акуратно поєднується з будь-яким кольором вкладки або фону.
Як додати фавікон на мій сайт?
Завантажте ICO-файл на ваш сайт, зазвичай як favicon.ico в корінь, і додайте тег link у заголовок вашого HTML, наприклад: link rel icon type image x-icon href slash favicon.ico. Потім очистіть кеш браузера, щоб побачити його.
Моє вихідне зображення не квадратне. Що робити?
Спочатку обріжте або масштабуйте до квадрата, щоб воно не розтягувалося. Ви можете скористатися нашим змінювачем розміру зображень, щоб зробити чистий квадрат, а потім конвертувати його у ICO для найкращого вигляду фавікона.