Який робити фавиконку сайту: просто 16 × 16 або містить в собі різні розміри?

1. Необхідний і достатній пакет
2. Деякі розміри та їх застосування
3. створення іконки
4. приклади

Максим!

На моє прохання провідний технолог бюро Артем Полікарпов докладно дослідив питання, щоб ввести єдині вимоги в бюро. І ось що вийшло.

Необхідний і достатній пакет

16 і 48 favicon.ico 114 apple-touch-icon.png, apple-touch-icon-precomposed.png (для Андроїда)

Такий набір іконок забезпечить гарну якість на всіх платформах, які представляють для нас інтерес: Віндоус, Мак, Агіос і Андроїд. Три файлу з вказаними назвами досить покласти в корінь сервера - вони підключаться автоматично.

Деякі розміри та їх застосування

16 Настільні браузери, мобільні, якщо немає спеціального розміру 32 «Список для читання» в настільному Сафарі і в мобільному на Айпад і айФоні без «ретини», панель задач Віндоуза 7 48 Ярлик на робочому столі Віндоуза 64 «Список для читання» на айФоні з «ретиной» ПНГ 32 і 64 «Список для читання», як вище - ПНГ приоритетнее ІКО 36, 48, 72 Робочий стіл Андроїда для різних дозволів (в точках / дюйм) Іконка домашнього екрану 57 Айфон без «ретини» 72 Айпад 114 Айфон з «ретиной» Спотлайт 29 Айфон без «ретини» 50 Айпад 58 Айфон з «ретиной»

створення іконки

І в ІКО, і в ПНГ можна використовувати альфа-канал.

Кращий спосіб упакувати декілька розмірів для настільних браузерів - мультіфайл favicon.ico. Браузер сам визначить, який розмір коли використовувати. Не потрібно хімічити з визначенням браузера на сервері або клієнта.

Без альфа-каналу:

З альфа-каналом:

Програма для створення правильних .ico - « Аксіаліс Айкон-воркшоп ». Працює тільки під Віндоус. Рідна Маковська «Айкон Компоузер» набагато приємніше в роботі, але робить іконки, які не відображаються в ИЕ.

Іконки для мобільних пристроїв не можуть бути об'єднані в один файл ПНГ, але вони легко таргетір за допомогою атрибутів в ХТМЛ або за назвою файлу.

• Див. Про мобільних іконках (англійською):
• Специфікація еплан
• Матьє Біно. Все що ви хотіли знати про тач-іконках

приклади

Ілюстрації нижче пояснюють, як отриманий необхідний і достатній пакет.

Яндекс не використовує мульти-фавиконку, а для ІЕ спеціально виводить іконку 48 × 48, в інших браузерах - 16 × 16. Тому в «Списку для читання» в Сафарі, на ярлику Хрома і на панелі завдань «Я» виглядає погано:






Могла б краще: якщо підставити 48-й розмір, в списку він скорочується до 32, в адресному рядку до 16 - не відрізниш від оригінальних 16 × 16:






Аналогічно і на панелі завдань:






Набір сайту еплан:



favicon.ico - 32 × 32, 16 × 16 взагалі немає (про своє «списку для читання» подумали, а про ИЕ і віндового ярликах забули)



Якщо проявити педантизм, видрючіть і спеціально підключити кожен розмір, то вартість такої іконки непомірно зросте. Але пристрою і самі непогано масштабують картинки. Ось як виглядають епловскіе 129, зменшені до 64 в «списку для читання»:






Якщо іконка маленька, Віндоус не розтягувати її на робочому столі, але розтягує на панелі завдань: