Фавикон должен быть 32х32 или 16х16?

Question

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

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

Answer 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: этот генератор favicon может генерировать все эти файлы одновременно. Генератор также может быть реализован как плагин WordPress . Полное раскрытие: я автор этого сайта.

Answer 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 х 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 - плитка метро Win 8.1 шириной
310 х 310 - Win 8.1 Метро плитка

Answer 3

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

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

---

¹ w3c.org: Как добавитьa Favicon на ваш сайт (проект в разработке) .

Answer 4

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

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

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

Надеюсь, это поможет вам!

Answer 5

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

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

Answer 6

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

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

Answer 7

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

Answer 8

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

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