Я хотел бы использовать одно изображение как обычный значок, так и для iPhone / iPad.
Это возможно? Будет ли масштабируемый для iPad формат 72x72 в формате PNG, если он связан с обычным значком браузера? Или я должен использовать отдельное изображение 16x16 или 32x32?
Ответы:
Для IE Microsoft рекомендует 16x16, 32x32 и 48x48, упакованные в файл favicon.ico .
Для iOS Apple рекомендует конкретные имена и разрешения файлов , максимум 180x180 для последних устройств под управлением iOS 8.
Android Chrome в основном использует манифест, а также использует значок Apple Touch.
IE 10 в Windows 8.0 требует изображений PNG и цвета фона, а IE 11 в Windows 8.1 и 10 принимает несколько изображений PNG, объявленных в специальном файле XMLbrowserconfig.xml .
Safari для Mac OS X El Capitan представляет значок SVG для закрепленных вкладок .
Некоторые другие платформы ищут файлы PNG с различным разрешением, например, изображение 96x96 для Google TV или изображение 228x228 для Opera Coast .
Посмотрите на этот список изображений favicon для полной справки.
TLDR: этот генератор favicon может генерировать все эти файлы одновременно. Генератор также может быть реализован в виде плагина WordPress . Полное раскрытие: я автор этого сайта.
Я не вижу обновленной информации, перечисленной здесь, так что здесь идет:
Чтобы ответить на этот вопрос сейчас, 2 favicons не сделают этого, если вы хотите, чтобы ваша иконка везде выглядела великолепно. Смотрите размеры ниже:
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 обновляется до iOS6
76 x 76 - iOS7
96 x 96 - GoogleTV
114 x 114 - сетчатка iPhone обновляется до iOS6
120 x 120 - сенсорная сетка iPhone iOS7
128 x 128 - приложение Chrome Web Store, Android
144 x 144 - плитка метро IE10 для закрепленного сайта, сетчатка iPad до iOS6
150 x 150 - плитка Win 8.1 Metro
152 x 152 - iPad Retina Touch iOS7
196 x 196 - Android Chrome
310 x 150 - Win Metro мозаика шириной 8.1
х 310 - Win 8.1 Metro мозаика
Я не уверен, что / как браузеры масштабируют большие иконки, но W3C предлагает следующее 1 :
Формат изображения, которое вы выбрали, должен быть 16x16 пикселей или 32x32 пикселей с использованием 8-битных или 24-битных цветов. Формат изображения должен быть одним из PNG (стандарт W3C), GIF или ICO.
1 w3c.org: Как добавить Favicon на ваш сайт (проект в разработке) .
[current year]мне все еще нужно иметь дело с какими-то дерьмовыми ограничениями, когда то, что вы можете сделать только с помощью css, достаточно удивительно, и я почти пропустил ваш ответ. Я просто буду использовать все, что захочу, и если что-то не поддерживает, это их проблема, согласно стандарту.
На самом деле, чтобы ваш favicon работал правильно во всех браузерах, вам нужно добавить более 10 файлов в правильных размерах и форматах.
Мой друг и я создали приложение только для этого! вы можете найти его в faviconit.com
Мы сделали это, чтобы людям не приходилось создавать все эти изображения и правильные теги вручную, создавая их все, что меня очень раздражало!
Вы можете иметь несколько размеров иконок в одном файле. Я обычно создаю значки ( .icoфайлы) размером 48, 32 и 16 пикселей. Вы можете добавить в любой размер изображения, которое вы хотите. Вопрос в том, будет ли iPhone использовать icoфайл?
icoтакже поддерживает прозрачность, но я не уверен, что это альфа-канал, как PNG; вероятно, больше похоже на GIF, где он включен или выключен.
.icoфайл.
Согласно статье Википедии о Favicon, Internet Explorer поддерживает только формат ICO для значков.
Я бы придерживался двух разных иконок.
Фавикон не обязательно должен быть 16х16 или 32х32. Вы можете создать значок 80x80 или 100x100, просто убедитесь, что оба значения имеют одинаковый размер, и, очевидно, не делайте его слишком большим или слишком маленьким, выберите подходящий размер.
Я боюсь, вам понадобятся отдельные файлы для каждого разрешения. На мониторе кампании есть действительно хорошая статья, описывающая, как они создавали и реализовывали свои иконки для каждого устройства iOS:
http://www.campaignmonitor.com/blog/post/3234/designing-campaign-monitor-ios-icons/
Как я узнал, ни одно из этих нескольких решений не является идеальным. Использование генератора favicon - действительно хорошее решение, но их количество огромно, и его трудно выбрать. Я хотел бы добавить, что если вы хотите, чтобы на вашем сайте была включена поддержка PWA, вам необходимо предоставить значок 512x512, как указано в Google Devs :
значки, включая версию 192px и 512px
Я не встречал много генераторов favicon, которые применяют этот критерий ( firebase делает , но есть много вещей, которые он не делает). Таким образом, решение должно быть смесью многих других решений.
Я не знаю, сегодня, в начале 2020 года, предоставление 16x16, 32x32 все еще актуально. Я предполагаю, что это все еще имеет значение в определенном контексте, например, если ваши пользователи все еще используют IE по какой-то причине (это все еще происходит в некоторых частных компаниях, которые по некоторым причинам не переходят на более новый браузер)