Должен ли быть значок 32x32 или 16x16?

Я хотел бы использовать одно изображение как обычный значок и дружественный iPhone/iPad.

Возможно ли это? Будет ли iPad-friendly размером 72x72 PNG, если он связан с обычным браузером? Или мне нужно использовать отдельный образ 16x16 или 32x32?

Ответ 1

Для 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, объявленных в отдельном файле XML под названием browserconfig.xml.

Safari для Mac OS X El Capitan представляет значок SVG для закрепленных вкладок.

Некоторые другие платформы ищут файлы PNG с различным разрешением, например, изображение 96x96 для Google TV или изображение 228x228 для Opera Coast.

Посмотрите этот список картинок избранного для полной справки.

TLDR: этот генератор значков может генерировать все эти файлы одновременно. Генератор также может быть реализован как плагин WordPress. Полное раскрытие: я автор этого сайта.

Ответ 2

Я не вижу обновленной информации, перечисленной здесь, поэтому здесь идет:

Чтобы ответить на этот вопрос сейчас, 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 х 60 - iPhone подправить до iOS7
64 x 64 - сайт Windows, боковая панель списка читателей Safari в HiDPI/Retina
70 x 70 - плитка Win 8.1 Metro
72 x 72 - iPad подправляется до iOS6
76 х 76 - iOS7
96 x 96 - GoogleTV
114 x 114 - сетчатка iPhone подправляется до iOS6
120 х 120 - iPhone Retina Touch с iOS7
128 x 128 - приложение Chrome Web Store для Android
144 x 144 - плитка IE10 Metro для закрепленного сайта, сетчатка iPad до iOS6
150 x 150 - плитка Win 8.1 Metro
152 x 152 - iPad Retina с сенсорным экраном iOS7
196 x 196 - Android Chrome
310 x 150 - плитка Metro Win шириной 8,1
310 x 310 - плитка Win 8.1 Metro

Ответ 3

Я не уверен, если/как браузеры масштабируют большие значки, но W3C предлагает следующий 1:

Формат выбранного изображения должен быть 16x16 пикселей или 32x32 пикселей, используя либо 8-битные, либо 24-битные цвета. Формат изображения должен быть одним из PNG (стандарт W3C), GIF или ICO.


1w3c.org: как добавить значок на свой сайт (черновик в разработке).

Ответ 4

На самом деле, чтобы ваш favicon работал правильно во всех браузерах, вам нужно добавить более 10 файлов в правильных размерах и форматах.

Мой друг и я создали приложение только для этого! вы можете найти его на faviconit.com

Мы сделали это, чтобы людям не приходилось создавать все эти изображения и правильные теги вручную, создавая их все, что меня очень раздражало!

Ответ 5

У вас может есть несколько размеров значков в одном файле. Я регулярно создаю значки (.ico файл), которые составляют 48, 32 и 16 пикселей. Вы можете добавить любое изображение любого размера. Вопрос в том, будет ли iPhone использовать файл ico?

ico также поддерживает прозрачность, но я не уверен, что это альфа-канал, такой как PNG; вероятно, больше похоже на GIF, где он или нет.

Ответ 6

Согласно Статья Википедии о Favicon, Internet Explorer поддерживает только формат ICO для значков.

Я бы придерживался двух разных значков.

Ответ 7

Фейвикон не должен быть 16x16 или 32x32. Вы можете создать значок 80x80 или 100x100, просто убедитесь, что оба значения имеют одинаковый размер и, очевидно, не делают его слишком большим или слишком маленьким, выберите разумный размер.

Ответ 8

Вам понадобятся отдельные файлы для каждой резолюции, которую я боюсь. На мониторе кампании есть действительно хорошая статья, описывающая, как они создавали и реализовывали свои значки для каждого устройства iOS:

http://www.campaignmonitor.com/blog/post/3234/designing-campaign-monitor-ios-icons/