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


693

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

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


см. мой ответ stackoverflow.com/a/45301651/661584 намного проще. может помочь. спасибо
MemeDeveloper

Ответы:


1448

Для 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 . Полное раскрытие: я автор этого сайта.


138

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

Чтобы ответить на этот вопрос сейчас, 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 мозаика


8
Есть ли ссылка на этот список?
Абдулхамид

81

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

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


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


Еще в 2006 году я пришел к аналогичным выводам (в «Favicon Primer» (апрель 2006; от hakre) ), но не знал об этом материале W3C 2005 года (да, поиск + чтение помогает :)). Спасибо за резюме. В то время я писал и не или , но это было также о 4bit цветов.
13

2
Это был проект с 2005 года? Oo
mcont

7
Это использование должно быть заменено стандартом html5 сейчас. Он не имеет ограничений по размеру иконки и предоставляет пример с иконкой 32768x32768.
rhgb

1
@rhgb Спасибо! Я смущенно оглядывался, почему, черт возьми, [current year]мне все еще нужно иметь дело с какими-то дерьмовыми ограничениями, когда то, что вы можете сделать только с помощью css, достаточно удивительно, и я почти пропустил ваш ответ. Я просто буду использовать все, что захочу, и если что-то не поддерживает, это их проблема, согласно стандарту.
Сахсахэ

64

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

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

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


6

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

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


1
Я считаю, что XP и выше поддерживают PNG-подобный (сам по себе PNG) формат для изображений RGBA. egressive.com/tutorial/… показывает, как вы можете использовать GIMP для включения таких изображений в .icoфайл.
SamB

1
ICO использует 1-битный альфа-канал, тогда как PNG имеет 8 бит, как и на других каналах. ICO будет достаточно для простых значков, но в некоторых случаях PNG будет более желательным из-за этой разницы.
Стин Шютт

SamB почти прав, а Time Sheep наполовину прав. ICO поддерживает изображения PNG, которые должны быть встроены в него, и внедренные PNG должны быть 32-битными изображениями RGBA.
Кукурузные початки


2

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


3
извините, но в этом есть намного больше, чем предполагает ваш ответ. Пожалуйста, смотрите stackoverflow.com/a/45301651/661584 и читайте, если хотите - его безумный комплекс. может помочь. спасибо
MemeDeveloper

1

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

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


2
Вы можете иметь несколько размеров иконок в одном файле.
Брэд

Большое спасибо, это отличная статья. Все еще остается загадкой, что бы делали устройства Apple с ICO-файлами с изображениями нескольких размеров.
Алекс Г

1

Как я узнал, ни одно из этих нескольких решений не является идеальным. Использование генератора favicon - действительно хорошее решение, но их количество огромно, и его трудно выбрать. Я хотел бы добавить, что если вы хотите, чтобы на вашем сайте была включена поддержка PWA, вам необходимо предоставить значок 512x512, как указано в Google Devs :

значки, включая версию 192px и 512px

Я не встречал много генераторов favicon, которые применяют этот критерий ( firebase делает , но есть много вещей, которые он не делает). Таким образом, решение должно быть смесью многих других решений.

Я не знаю, сегодня, в начале 2020 года, предоставление 16x16, 32x32 все еще актуально. Я предполагаю, что это все еще имеет значение в определенном контексте, например, если ваши пользователи все еще используют IE по какой-то причине (это все еще происходит в некоторых частных компаниях, которые по некоторым причинам не переходят на более новый браузер)

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.