Який робити фавиконку сайту: просто 16 × 16 або містить в собі різні розміри?
Максим!
На моє прохання провідний технолог бюро Артем Полікарпов докладно дослідив питання, щоб ввести єдині вимоги в бюро. І ось що вийшло.
Необхідний і достатній пакет
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 в «списку для читання»:
Якщо іконка маленька, Віндоус не розтягувати її на робочому столі, але розтягує на панелі завдань: