Розміри фавіконів, які браузери й пристрої насправді хочуть

Фавікон раніше означав одне маленьке зображення 16×16. Тепер вкладка браузера, ярлик на головному екрані телефону, панель закладок та іконка дотику Apple — кожен очікує свого власного розміру, і надання лише одного залишає деякі з цих контекстів або розмитими, або показуючими загальну резервну іконку замість вашої.

Чому одного розміру недостатньо

Іконка 16×16, збільшена, щоб заповнити слот іконки головного екрана 180×180, виглядає такою ж пікселястою, як будь-яке маленьке зображення, розтягнуте до великого розміру — немає способу додати деталь, якої не було в джерелі. Кожен контекст, де з'являється фавікон, має свою очікувану роздільну здатність, і сучасна практика — надавати набір розмірів, а не покладатися на браузер, який погано збільшить один маленький файл.

Розміри, які варто покрити

• 16×16 та 32×32 — класичні розміри фавіконів, що використовуються у вкладках браузера й списках закладок у більшості десктопних браузерів.
• 180×180 — розмір, очікуваний Apple для іконки головного екрана, коли сторінка додається до головного екрана iPhone чи iPad.
• 192×192 та 512×512 — використовуються Android і маніфестами вебзастосунків для іконок головного екрана й екранів завантаження в установлюваних вебзастосунках.

Збереження читабельності дизайну при 16px

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