Я хотів би використовувати одне зображення як звичайний фавікон, так і iPhone / iPad.
Чи можливо це? Чи буде зручна для iPad шкала PNG 72x72, якщо вона посилається на звичайний веб-переглядач? Або мені потрібно використовувати окреме зображення розміром 16x16 або 32x32?
Відповіді:
Для IE Microsoft рекомендує пасувати у файл favicon.ico 16х16, 32х32 та 48х48 .
Для iOS Apple рекомендує конкретні імена файлів та роздільну здатність , щонайменше, 180x180 для останніх пристроїв, на яких працює iOS 8.
Android Chrome в основному використовує маніфест, а також покладається на сенсорний значок Apple.
IE 10 для Windows 8.0 вимагає зображення PNG та кольору фону, а IE 11 для Windows 8.1 та 10 приймає кілька зображень PNG, оголошених у виділеному спеціальному XML-файліbrowserconfig.xml .
Safari для Mac OS X El Capitan представляє значок SVG для закріплених вкладок .
Деякі інші платформи шукають файли PNG з різною роздільною здатністю, наприклад, зображення 96x96 для Google TV або зображення 228x228 для Opera Coast .
Подивіться цей список фотографій Favicon для повної довідки.
TLDR: Цей генератор фавікону може генерувати всі ці файли одночасно. Генератор також може бути реалізований як плагін WordPress . Повне розкриття: Я автор цього сайту.
Я не бачу жодної оновленої інформації, переліченої тут, і ось:
Щоб відповісти на це запитання зараз, 2 фаворити не зроблять цього, якщо ви хочете, щоб ваша ікона виглядала чудово скрізь. Дивіться розміри нижче:
16 x 16 - Стандартний розмір для браузерів
24 x 24 - розмір закріпленого IE9 для інтерфейсу користувача
32 x 32 - нова вкладка IE, кнопка панелі завдань Windows 7+, бічна панель списку Safari
48 x 48 - веб-сайт Windows
57 x 57 - iPod touch , iPhone до 3G
60 x 60 - Дотик iPhone до iOS7
64 x 64 - Сайт Windows, бічна панель списку читачів Safari в HiDPI / Retina
70 x 70 - Win 8.1 Metro tile
72 x 72 - iPad touch до iOS6
76 x 76 - iOS7
96 x 96 - GoogleTV
114 x 114 - iPhone сітківки до iOS6
120 x 120 - iPhone сітківки touch iOS7
128 x 128 - додаток для веб-магазинів Chrome, Android
144 x 144 - плитка метро IE10 для вкладеного сайту, сітківка iPad до iOS6
150 x 150 - Виграйте плитку метро 8.1
152 x 152 - iPad retina touch iOS7
196 x 196 - Android Chrome
310 x 150 - Win 8,1 широкий метрополітен плитка
310 x 310 - Win 8.1 Metro tile
Я не впевнений, чи / як браузери масштабують великі значки, але W3C пропонує наступне 1 :
Формат обраного зображення повинен бути 16x16 пікселів або 32x32 пікселів, використовуючи 8-бітний або 24-бітний кольори. Формат зображення повинен бути у форматі PNG (стандарт W3C), GIF або ICO.
1 w3c.org: Як додати Favicon на свій сайт (проект у розробці) .
[current year]мені все ще доводиться стикатися з деякими фігняними обмеженнями, коли речі, які ти можеш зробити лише з CSS, є достатньо дивовижними, і я майже не пропустив твою відповідь. Я просто використовую все, що хочу тоді, і якщо щось не підтримує, це їхня проблема, як за стандартом.
Власне, для того, щоб ваш фавікон працював у всіх браузерах належним чином, вам доведеться додати більше 10 файлів правильних розмірів та форматів.
Ми з моїм другом створили додаток саме для цього! ви можете знайти його на faviconit.com
Ми це зробили, тож людям не потрібно створювати всі ці зображення та правильні теги вручну, створювати всі вони, які раніше мене дратували!
Ви можете мати кілька розмірів піктограм в одному файлі. Я регулярно створюю .icoфайлові файли ( файл), що мають 48, 32 та 16 пікселів. Ви можете додати зображення будь-якого розміру. Питання в тому, чи iPhone буде використовувати icoфайл?
icoтакож підтримує прозорість, але я не впевнений, чи це такий альфа-канал, як PNG; ймовірно, більше схожий на GIF там, де він увімкнений або вимкнений.
.icoфайл.
Відповідно до статті Вікіпедії про Favicon, Internet Explorer підтримує лише формат ICO для фавіконів.
Я би дотримувався двох різних ікон.
Фавікон не повинен бути 16x16 або 32x32. Ви можете створити фавікон розміром 80x80 або 100x100, просто переконайтесь, що обидва значення однакового розміру, і, очевидно, не робите його занадто великим або занадто малим, виберіть прийнятний розмір.
Вам потрібні окремі файли для кожної роздільної здатності, боюся. На моніторі кампанії є дійсно гарна стаття, де описано, як вони створювали та впроваджували свої піктограми для кожного пристрою iOS:
http://www.campaignmonitor.com/blog/post/3234/designing-campaign-monitor-ios-icons/
Як я дізнався, жодне з цих кількох рішень не є досконалим. Використання генератора фавікону - це справді хороше рішення, але кількість їх величезна, і важко вибрати. Я хочу додати, що якщо ви хочете, щоб ваш веб-сайт був включений PWA, вам потрібно також надати піктограму 512x512, як заявлено Google Devs :
іконки, включаючи версію 192px та 512px
Я не зустрічав багато генераторів фавікону , які виконували ці критерії ( Firebase робить , але є багато речей, які вона не робить). Тож рішення повинно бути сумішшю багатьох інших рішень.
Я не знаю, сьогодні, на початку 2020 року, якщо надання 16x16, 32x32 все ще актуально. Я думаю, це все-таки має значення в певному контексті, наприклад, якщо ваші користувачі все-таки користуються IE з якихось причин (це все-таки відбувається в деяких приватних компаніях, які з певних причин не переходять на новий браузер)