Генератор favicon для значка сайту

Одне зображення, цілий набір: справжній багаторозмірний ICO, сенсорна піктограма Apple, згладжена так, як цього хоче Apple, PNG-файли маніфесту, сам веб-маніфест і блок HTML для вставлення. Він також показує масковану обрізку Android, перш ніж вона кусається, саме там більшість значків тихо втрачають свої краї.

Перетягніть сюди зображення або натисніть, щоб вибрати
Квадрат працює найкраще, принаймні 512 пікселів. Прозорий PNG дає найчистіший результат.
Що поміщається під піктограмою на головному екрані.
Заповнює прозорість там, де це заборонено, і заповнює піктограму, яку можна маскувати.
ФайлРозмірЩо це використовує

    

Чому .ico все ще має значення

Одного PNG достатньо для більшості браузерів, і якщо вам потрібен лише значок вкладки, ви можете зупинитися на цьому. ICO заслуговує на своє місце, оскільки містить кілька роздільних здатностей в одному файлі, і операційна система вибирає правильну — вкладка використовує 16, закріплений ярлик або посилання на робочому столі використовує 32 або 48, і кожне малюється з растрового зображення, створеного для цього розміру, а не стискається з великого на льоту. Файл, який створюється, є контейнером PNG із маленьким заголовком, який читає кожен браузер, випущений цього століття.

Безпечна зона, що маскується

Android не обіцяє відображати ваш значок у вигляді квадрата. Залежно від панелі запуску він може обрізати його до кола, закругленого або заокругленого квадрата, і ви гарантовано отримаєте лише внутрішнє коло — вісімдесят відсотків ширини, по центру. Мистецтво, яке закінчується, — це саме те мистецтво, яке втрачає свої краї. Додавання піктограм маніфесту до цієї безпечної зони є виправленням, а попередній перегляд тут малює кадрування, щоб ви могли побачити його раніше, ніж користувач.

Чому сенсорний значок Apple не прозорий

iOS поєднує піктограму на головному екрані у власну заокруглену форму та не виконує альфа-канал так, як ви сподіваєтесь; прозорі області виходять чорними. Таким чином, перед кодуванням один файл зрівнюється з вашим фоновим кольором, тоді як маніфест PNG зберігає свою альфа-версію, де вона обробляється належним чином.

Що робити з файлами

Розмістіть їх у корені сайту, а не в папці активів — браузери та сканери вгадують шлях до значка сайту, а деякі отримають його незалежно від того, зв’яжете ви його чи ні. Потім вставте блок HTML у заголовок вашої сторінки. Шлях до маніфесту — це єдиний рядок, який має збігатися, куди б ви фактично розмістили файл.

Поширені запитання

Чи потрібен мені favicon.ico, якщо я маю PNG?

Власне, ні. Практично так — багато сканерів, програм для читання оновлень і старіших інструментів запитують фавікон за шляхом і ніколи не переглядають вашу розмітку. Це коштує кілька кілобайт.

Мій значок виглядає каламутним на 16 пікселях. що я можу зробити

Тут нічого не можна виправити, тому що не вистачає місця. За такого розміру знак має приблизно десять розбірливих пікселів; логотип завжди перетворюватиметься на кашу. Надішліть спрощену версію — одна форма, одна літера — як джерело та збережіть повну блокування для всіх інших місць.

Чи слід вимкнути маскувальне покриття?

Лише якщо ваш твір мистецтва вже знаходиться в межах свого щедрого поля. Якщо він заповнює кадр, залиште його, або Android обрізатиметься в ньому.

Чи завантажено кудись моє зображення?

Ні. Кожен розмір намальований на полотні на цій сторінці, а архів збирається в пам’яті. Нічого не надсилається.

Створено командою GO AI. Генератор значків програм · Зміна розміру пакетів · Усі безкоштовні інструменти