Руководство по созданию Favicon для всех платформ в 2019 году

Добро пожаловать в руководство по проектированию favicon. В этой статье мы подробно расскажем, как создать идеальный favicon, с конкретными советами по созданию иконок для Apple Touch, Windows 8, Android, Chrome, Opera и Safari. Также вы найдете удобное руководство по различным размерам и форматам favicon.

Итак, во-первых, что такое favicon? Сокращенно от англ. FAVorite ICON — «иконка для избранного» – это маленькие символы, которые появляются в строке URL и списке закладок. Сегодня favicon расширяет бренд сайта за пределы окна браузера во многих контекстах, но мы вернемся к этому позже.

На заре Интернета, создание favicon заключалось в прикреплении ссылки на файл иконки размером 16x16px, и на этом все. В настоящее время все немного сложнее – существуют разные размеры и процессы для разных контекстов. Создание правильного favicon – это наука.

В этой статье вы узнаете, как создать favicon. Мы начнем с советов о том, как он должен выглядеть, а затем перейдем к конкретным советам о том, как создать favicon для различных контекстов.

Мы будем использовать шаблон Apply Pixels, чтобы легко генерировать различные требуемые размеры иконок, а в качестве примера – иконку Apply Pixels.

Логотип Apply Pixels, который используется в качестве примера favicon в этой статье

1. Сделайте его узнаваемым

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

2. Используйте свой логотип

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

3. Он должен быть понятным

Есть также несколько моментов, которые вы должны избегать. Не используйте favicon в качестве маркетингового инструмента – это означает отсутствие ценников, баннеров «new» или «updated» и т. д. На самом деле, вообще не помещайте текст в favicon. Текст плохо масштабируется, и высока вероятность, что он будет неразборчивым. Наконец, не используйте фотографию – она ​​будет размытой и неузнаваемой в таком мелком размере.

4. Создайте две версии

Когда в Internet Explorer 5 впервые появились favicon, они появились в строке URL-адреса и в списке закладок. Сегодня они также отображаются во многих других контекстах, включая списки закладок, контекстные меню и даже домашние экраны мобильных устройств и телевизоров. Из-за этого довольно трудно прогнозировать, как ваш значок будет отображаться для конечного пользователя.

Чтобы ваш favicon выглядел хорошо в различных контекстах, вы должны предоставить его в двух стилях:

• Логотип на прозрачном фоне. Эта версия отображается в строке URL-адреса, списках закладок и в других местах, где favicon отображается рядом с URL-адресом или именем вашего веб-сайта.
• Логотип на фоне со сплошной заливкой: эта версия используется в сетчатых закладках и контекстных меню, где браузер или устройство применяет маску к фону, для достижения единообразного контекста.

5. Создание favicon для десктопного браузера

Давайте начнем с самого простого favicon, который вам нужно создать: классическая иконка для классических десктопных браузеров. Этот тип favicon лучше всего работает на прозрачных фонах, так как зачастую он отображается в строке URL и в списках закладок

Favicon в классическом стиле отображается на панели закладок и в строке URL в Google Chrome

Вам нужно будет предоставить этот тип иконки в трех размерах, все в формате PNG с прозрачным фоном:

• 16×16
• 32×32
• 48×48

Добавьте этот favicon в HTML

, как показано ниже:

6.

Создание иконки Apple Touch

Apple iOS использует иконки Apple Touch для представления веб-сайтов, сохраненных на домашнем экране iOS, в качестве закладок. Это означает, что иконка Apple Touch, как все иконки приложений iOS, будет округлена c помощью маски в форме суперэллипса, называемого сквиркл (squircle).

Он также будет отображаться на любом фоне, который пользователь

выбрал для своего домашнего экрана. Поэтому ваша иконка Apple Touch должна иметь сплошную заливку фона.

Вы можете использовать иконку Apple Touch 180×180, которая автоматически масштабируется для различных размеров iPhone и iPad. Это подойдет для большинства случаев. Если нет, вы можете предоставить дополнительные размеры для различных устройств Apple

Favicon Apple должна быть в формате PNG. Вы можете использовать иконку Apple Touch 180x180, которая автоматически масштабируется для различных размеров iPhone и iPad. Это подойдет для большинства случаев.

Если нет, вы можете предоставить дополнительные размеры для различных устройств Apple:

• 60×60
• 76×76
• 120×120
• 152×152
• 180×180 (Обязательно)

Добавьте этот favicon в HTML

, как показано ниже:

7. Плитка Windows 8 и файл browserconfiguration.xml

Хотя Windows 8 больше не поддерживается Microsoft, многие пользователи планшетов продолжают работать на этой ОС. В зависимости от вашей пользовательской базы, вы можете также создать favicon для этой платформы.

Вот как могла бы выглядеть favicon Apply Pixels, в качестве плиток Windows 8:

Плитка Windows 558×270 является единственным не квадратным favicon.

Windows 8 использует плитки для представления веб-сайтов в пользовательском интерфейсе. Всего поддерживается пять размеров, один размер для Windows 8.0 и четыре размера для Windows 8. 1.

Плитка Windows 8 состоит из двух компонентов:

• Передний план: ваш favicon с прозрачным фоном.
• Фон: фон плитки, сгенерированный Windows.

Все плитки Windows должны быть в формате PNG с прозрачным фоном. Это размеры, которые вам нужно использовать.

Для Windows 8:

• 144×144

И для Windows 8.1:

• 128×128
• 270×270
• 558×270
• 558×558

Windows 8.0

Цвет фона указывается в HTML-тегах и файле browserconfig.xml, которые необходимо предоставить:

Windows 8.1

Включает browserconfiguration.xml в корневой каталог вашего сайта:

<?xml version=»1.0″ encoding=»utf-8″?>

#2b5797

Примечание: Указанные размеры favicon в файле browserconfiguration.

xml не соответствуют размерам, указанным выше. Это связано с тем, что в целях масштабирования Microsoft рекомендует предоставлять изображения, размер которых превышает стандартные размеры плитки.

8. Android, Chrome и Opera

Android, Chrome и Opera используют android-chrome-192×192.png и android-chrome-512×512.png, которые рекомендует Google.

С момента появления в Android адаптивных иконок к иконкам веб-сайтов, добавленных на домашний экран Android, будет применена маска 192×192. Поэтому иконка приобретает форму предпочитаемого пользователем стиля маскирования. Это может быть сквиркл, эллипс, прямоугольник, прямоугольник с закругленными углами или каплевидная фигура.

В этом случае favicon со сплошной заливкой маскирован в форме сквиркл операционной системы Android Pie. Другие фигуры включают в себя эллипсы, прямоугольник, прямоугольник с закругленными углами и каплевидную фигуру

Вам необходимо создать favicon в формате PNG со сплошным фоном следующих размеров:

• 192×192
• 512×512

Установите эти иконки, добавив файл site. webmanifest на свой сайт и разместив ссылку на него в тегах

:

Ниже приведен код для файла site.webmanifest:

{
«name»: «»,
«short_name»: «»,
«icons»: [
{
«src»: «/android-chrome-192×192.png»,
«sizes»: «192×192»,
«type»: «image/png»
},
{
«src»: «/android-chrome-512×512.png»,
«sizes»: «512×512»,
«type»: «image/png»
}
],
«theme_color»: «#ffffff»,
«background_color»: «#ffffff»,
«display»: «standalone»
}

9. Закрепленная вкладка Safari

Это единственный favicon, который необходимо предоставить в

векторном формате в виде SVG-файла. Он отображается в виде пиктограммы, когда пользователь прикрепляет вкладку к окну браузера Safari.

В отличие от остальных favicon, этот создается из изображения в формате SVG

Эта иконка должна быть 100% черным SVG-файлом с прозрачным фоном. SVG может быть только одним слоем, и Safari требует, чтобы атрибут viewBox для SVG был установлен в «0 0 16 16».

Добавьте этот favicon в HTML

, как показано ниже:

10. Как насчет Google TV, Chrome Web Store и иконок Apple Touch для версий предшествовавших iOS 7?

А что насчет Google TV, Chrome Web Store и иконок Apple Touch для версий, предшествовавших iOS 7? Существует ряд размеров и форматы favicon, которые не были включены в эту статью, либо потому, что они практически устарели, либо потому, что они редко актуальны для обычного веб-разработчика. В общем, разработчики и дизайнеры должны стремиться поддерживать как можно более широкий спектр устройств и операционных систем, но иногда это просто не имеет смысла.

Например: Google TV был заменен на Android TV в 2014 году, а SDK был вовсе упразднен. Chrome Web Store, вероятно, имеет значение только в том случае, если вы создаете приложение, расширение или тему Chrome, а процент устройств iOS работающих под управлением iOS 7 или более ранней версии сейчас менее, чем ~1 %.

Шпаргалка

Итак, если вы хотите поддерживать полный набор устройств и браузеров, в таблице ниже указаны соответствующие размеры. Ранее favicon должен был быть предоставлен в формате ICO. Сегодня можно использовать файлы в формате PNG (за исключением иконки закрепленной вкладки Safari, которая должна быть представлена в формате SVG).

Если хотите узнать простой способ проектирования и экспорта всех размеров favicon, взгляните на наш шаблон.

Размеры

Фон

Формат

Классические десктопные браузеры

16×16

Прозрачный

PNG

32×32

Прозрачный

PNG

48×48

Прозрачный

PNG

Apple iOS

180×180

Сплошная заливка

PNG

Windows 8.0

144×144

Прозрачный

PNG

Windows 8.1

128×128

Прозрачный

PNG

270×270

Прозрачный

PNG

558×270

Прозрачный

PNG

558×558

Прозрачный

PNG

Google Android и Chrome

192×192

Сплошная заливка

PNG

512×512

Сплошная заливка

PNG

Opera Coast

228×228

Сплошная заливка

PNG

Safari Pinned Tab

Vector

Прозрачный

SVG

---

Перевод статьи applypixels. com

просто 16×16 или содержащую в себе разные размеры?

Максим! По моей просьбе ведущий технолог бюро Артём Поликарпов подробно исследовал вопрос, чтобы ввести единые требования в бюро. И вот что получилось. Необходимый и достаточный пакет 16 и 48 favicon.ico 114 apple-touch-icon.png, apple-touch-icon-precomposed.png (для Андроида) Такой набор иконок обеспечит хорошее качество на всех платформах, представляющих для нас интерес: Виндоус, Мак, АйОС и Андроид. Три файла с указанными названиями достаточно положить в корень сервера — они подключатся автоматически. Некоторые размеры и их применение ИКО 16 Настольные браузеры, мобильные, если нет специального размера 32 «Список для чтения» в настольном Сафари и в мобильном на Айпаде и Айфоне без «ретины», панель задач Виндоуса 7 48 Ярлык на рабочем столе Виндоуса 64 «Список для чтения» на Айфоне с «ретиной» ПНГ 32 и 64 «Список для чтения», как выше — ПНГ приоритетнее ИКО 36, 48, 72 Рабочий стол Андроида для разных разрешений (в точках/дюйм) Иконка домашнего экрана 57 Айфон без «ретины» 72 Айпад 114 Айфон с «ретиной» Спотлайт 29 Айфон без «ретины» 50 Айпад 58 Айфон с «ретиной» Создание иконки И в ИКО, и в ПНГ можно использовать альфа-канал. Лучший способ упаковать несколько размеров для настольных браузеров — мультифайл favicon.ico. Браузер сам определит, какой размер когда использовать. Не нужно химичить с определением браузера на сервере или клиенте. Без альфа-канала: С альфа-каналом: Программа для создания правильных .ico — «Аксиалис Айкон-воркшоп». Работает только под Виндоусом. Родная маковская «Айкон Компоузер» гораздо приятнее в работе, но делает иконки, которые не отображаются в ИЕ. Иконки для мобильных устройств не могут быть объединены в один файл ПНГ, но они легко таргетируются при помощи атрибутов в ХТМЛ или по названию файла. См. о мобильных иконках (на английском): Спецификация Эпла Матье Бино. Всё что вы хотели знать о тач-иконках Примеры Иллюстрации ниже поясняют, как получен необходимый и достаточный пакет. Яндекс не использует мульти-фавыконку, а для ИЕ специально выводит иконку 48×48, в остальных браузерах — 16×16. Поэтому в «Списке для чтения» в Сафари, на ярлыке Хрома и на панели задач «Я» выглядит плохо: Могла бы лучше: если подставить 48-й размер, в списке он ужимается до 32, в адресной строке до 16 — не отличить от оригинальных 16×16: Аналогично и на панели задач: Набор сайта Эпла: favicon.ico — 32×32, 16×16 вообще нет (о своём «списке для чтения» подумали, а об ИЕ и Виндовых ярлыках забыли) apple-touch-icon.png — загадочные 129×129 Если проявить педантизм, выдрючить и специально подключить каждый размер, то стоимость такой иконки непомерно вырастет. Но устройства и сами неплохо масштабируют картинки. Вот как выглядят эпловские 129, уменьшенные до 64 в «списке для чтения»: Если иконка маленькая, Виндоус не растягивает её на рабочем столе, но растягивает на панели задач:

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

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

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

• фавикон

1

Обновление для 2020 г.: Придерживаясь исходного вопроса о значках 16×16 против 32×32 : текущая рекомендация должна состоять в том, чтобы предоставить значок 32×32, полностью пропуская 16×16. Все современные браузеры и устройства поддерживают значки размером 32×32. Размер значка обычно увеличивается до 192×192 в зависимости от среды (при условии, что больших размеров нет или система их не распознала). Масштабирование сверхнизкого разрешения имеет заметный эффект, поэтому лучше придерживаться 32×32 в качестве наименьшего базового уровня.

---

Для IE Microsoft рекомендует 16×16, 32×32 и 48×48, упакованные в файл favicon.ico.

Для iOS Apple рекомендует определенные имена файлов и разрешения, максимум 180×180 для последних устройств с 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 с различными разрешениями, например изображение 96×96 для Google TV или изображение 228×228 для Opera Coast.

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

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

4

Фавикон должен быть набором картинок 16×16, 32×32 и 48×48 в формате ICO. Формат ICO отличается от PNG. Неквадратные изображения не поддерживаются.

Для создания фавиконки, по многим причинам, описанным ниже, я советую вам использовать этот генератор фавиконки. Полное раскрытие: я автор этого сайта.

Фавикон должен быть квадратным. Настольные браузеры и Apple iOS не поддерживают неквадратные значки.

Фавикон поддерживается несколькими файлами:

• A значок favicon.ico .
• Некоторые другие иконки PNG.

Чтобы получить наилучшие результаты в настольных браузерах (Windows/IE, MacOS/Safari и т. д.), вам необходимо комбинировать оба типа значков.

favicon.ico

Хотя все настольные браузеры могут работать с этим значком, в первую очередь он предназначен для более старых версий IE.

Формат ICO отличается от формата PNG. Этот момент сложен, потому что некоторые браузеры достаточно умны, чтобы правильно обрабатывать изображение PNG, даже когда он был ошибочно переименован с расширением ICO.

Файл ICO может содержать несколько изображений, и Microsoft рекомендует размещать версии значка 16×16, 32×32 и 48×48 в favicon.ico . Например, IE будет использовать версию 16×16 для адресной строки и 32×32 для ярлыка на панели задач.

Объявить значок с помощью:

Тем не менее, рекомендуется поместить favicon.ico в корневой каталог веб-сайта и вообще не объявлять его, а позволить современным браузерам выбирать значки PNG.

Значки PNG

Современные настольные браузеры (IE11, последние версии Chrome, Firefox…) предпочитают использовать значки PNG. Обычные ожидаемые размеры — 16×16, 32×32 и «как можно больше». Например, MacOS/Safari использует значок 196×196, если он самый большой из возможных.

Каковы рекомендуемые размеры? Выберите свои любимые платформы:

• Большинство настольных браузеров: 16×16, 32×32, «как можно больше»
• Android Chrome: 192×192
• Google TV: 96×96
• . .. и другие, более-менее задокументированные.

Значки PNG объявляются с помощью:

 

...
 

Осторожно: Firefox не поддерживает атрибут размеров и использует последний найденный значок PNG. Убедитесь, что картинка 32×32 объявлена ​​последней: она достаточно хороша для Firefox, и это предотвратит загрузку большой картинки, которая ему не нужна. edit: исправлено в 2016 году.

Также обратите внимание, что Chrome не поддерживает атрибут размеров и имеет тенденцию загружать все заявленные значки. Лучше не объявлять слишком много иконок. edit: исправлено в 2018 году.

Мобильные платформы

Этот вопрос касается фавиконки на рабочем столе, поэтому нет необходимости слишком углубляться в эту тему.

Apple определяет сенсорный значок для платформы iOS. iOS не поддерживает неквадратные значки. Он просто масштабирует неквадратные изображения, чтобы сделать их квадратными (посмотрите на пример Kioskea).

Android Chrome использует значок Apple Touch, а также определяет значок PNG размером 192×192.

Microsoft определяет изображение плитки и файл browserconfig.xml .

Заключение

Создать фавиконку, которая будет работать везде, довольно сложно. Я советую вам использовать этот генератор favicon. Полное раскрытие: я автор этого сайта.

15

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

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

4

Стандарты 2021 благодаря faviconit

Я использую faviconit.com для наилучшей поддержки браузеров и устройств. Вы загружаете изображение, и этот сайт предоставляет вам код, преобразованные изображения и файл конфигурации браузера.

---

Мы могли бы просто вручную загрузить фавикон на наш веб-сайт размером 16×16, и он, вероятно, будет отображаться практически в любом браузере.

Но когда вы отметите его как один из любимых на своем смартфоне или планшете, нам потребуются изображения большего размера (от 60×60 до 144×144).

Допустим, один из наших пользователей создает ярлык на рабочем столе. В таком случае 196×196 выглядит лучше!

---

Пример кода того, что выдаст faviconit рядом со всеми конвертированными изображениями:

 

<ссылка rel="icon" href="/favicon.ico">
<ссылка rel="icon" type="image/png" href="/favicon-192.png">
<ссылка rel="icon" type="image/png" href="/favicon-160.png">
<ссылка rel="icon" type="image/png" href="/favicon-96.png">
<ссылка rel="icon" type="image/png" href="/favicon-64.png">
<ссылка rel="icon" type="image/png" href="/favicon-32.png">
<ссылка rel="icon" type="image/png" href="/favicon-16.png">





 png">



 

---

Начиная с Windows 8

Но это еще не все. Начиная с Windows 8 мы можем создавать ярлыки для веб-сайтов с плитками!

---

Browserconfig.xml

Загрузите файл с именем browserconfig.xml (чтобы включить плитки в окнах >8)

 <конфигурация браузера>
    
        <плитка>
            
            
            
            #FFFFFF
        
    

 

0

16×16 пикселей, формат *. ico.

6

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

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

---

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

5

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

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

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

0

Использовать одно(!) изображение SVG

Если вам не нужна поддержка Safari, вы можете использовать один значок SVG:

  svg" type="image/svg +xml">
 

Используйте одно(!) PNG-изображение

Если вам нужна полная поддержка*, добавьте это в заголовок документа:

Последняя ссылка для Apple (главный экран), вторая для Android (главный экран) и первая для остальных.

Размер точно соответствует размеру домашнего экрана Android. Размер значка на главном экране Apple составляет 60 пикселей (3x), то есть 180 пикселей, и он будет уменьшен. Другие платформы используют значок ярлыка по умолчанию, который также будет уменьшен.

* Обратите внимание, что это решение не поддерживает «плитки» в Windows 8/10. Однако он поддерживает изображения в ярлыках, закладках и вкладках браузера.

4

В Википедии написано:

Кроме того, такие файлы значков можно размером 16×16 или 32×32 пикселя, и либо 8-битный, либо 24-битный цвет глубина (обратите внимание, что файлы GIF имеют ограничено, 256 элементов цветовой палитры).

Я думаю, что лучше всего использовать gif 32×32 и протестировать его в разных браузерах.

1

Использовать значок SVG :

• Поддерживается основными браузерами (кроме Safari в 2021 г.) и Living Standard
• Только 1 короткая строка кода, легко запоминающаяся
• Другие атрибуты, такие как тип и размеры не нужны
• масштабируется намного лучше при любом размере по сравнению с PNG
• Давайте покончим с безумием фавиконок с сотнями разных размеров…

1

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

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

3

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

Я бы поставил две разные иконки.

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

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

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

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

Нет, вы не можете использовать нестандартный размер или размер, так как это вызовет хаос в браузерах людей, где бы ни отображались значки. Вы можете сделать его 12×16 (с четырьмя пикселями белого/прозрачного отступа на 12-пиксельной стороне), чтобы сохранить соотношение сторон, но вы не можете сделать его больше (ну, вы можете, но браузер уменьшит его).

0

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

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

2

Формат фавикона должен быть квадратным, иначе браузер его растянет. К сожалению, Internet Explorer < 11 не поддерживает типы файлов .gif или .png, а только формат Microsoft .ico. Вы можете использовать какое-нибудь приложение-генератор favicon, например: http://favicon-generator.org/

favicon.ico 16×16

  ico"/>
 

И я использую эти, чтобы быть красивыми на мобильных устройствах и планшетах:

Важно использовать имя «favicon.ico» в корне, потому что многие браузеры сначала попытаются найти там.

Кажется, ваш файл должен быть .ico тип.

Проверьте этот пост о фавиконках:

http://www.html-kit.com/support/favicon/image-size/

1

формат выбранного вами изображения должен быть 16×16 пикселей или 32×32 пикселя с использованием 8-битных или 24-битных цветов. Формат изображение должно быть в формате PNG (стандарт W3C), GIF или ICO. — Как добавить Favicon на свой сайт — QA @ W3C

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

1

Напомню всем, что вопрос был:

Я хочу использовать одно изображение как в качестве обычного фавикона, так и в качестве фавикона для iPhone/iPad? Это возможно? Будет ли масштабироваться формат PNG 72×72 для iPad, если на него ссылаться как на обычную иконку браузера? Или мне нужно использовать отдельное изображение 16×16 или 32×32?

Ответ: ДА, это возможно! ДА, он будет масштабироваться. НЕТ, вам не нужен «обычный значок браузера». Пожалуйста, посмотрите на этот ответ: https://stackoverflow.com/a/48646940/2397550

html — Favicon Standard — 2022 — svg, ico, png и размеры?

Отказ от ответственности: я являюсь автором RealFaviconGenerator, который, как я ожидаю, будет актуальным (в основном, см. ниже). Так что не удивляйтесь, если этот ответ совпадает с тем, что генерирует RFG.

Нет универсального значка. Вы не можете создать один значок SVG и ожидать, что он будет работать везде.

С технической точки зрения было бы неплохо иметь один значок SVG. Но с точки зрения UI и UX это нежелательный результат. Сравните iOS и Android. В iOS все значки на главном экране представляют собой квадраты с закругленными углами (iOS заполняет прозрачные области значков Touch черным цветом). На Android значки на главном экране часто имеют неквадратную форму и прозрачность (включая значки приложений Google). Отправьте один сенсорный значок, и Android Chrome будет использовать его. Но вы не сможете соответствовать рекомендациям по значкам Android, тогда как выделенный значок может.

Поэтому я советую сознательно избегать использования одной иконки. Лучше ориентируйтесь на каждую платформу отдельно, когда это возможно (это не всегда так).

iOS Safari

iOS Safari ожидает сенсорный значок. На сегодняшний день это изображение размером 180×180 PNG. Это изображение не должно использовать прозрачность, и его углы будут автоматически округлены при добавлении на главный экран. Объявлено с:

С годами этот значок стал «значком с высоким разрешением по умолчанию» для многих браузеров. Так вы найдете его в другом месте, при добавлении в закладки и т. д.

Android Chrome

Android Chrome использует манифест веб-приложения. Хотя этот манифест не посвящен Android Chrome, в настоящее время он является его основным сторонником. Так что на данный момент все еще вполне безопасно считать значки из манифеста веб-приложения для Android Chrome.

Как следует из названия, манифест веб-приложения предназначен для веб-приложений. Но любой веб-сайт может использовать его как ссылку на некоторые значки.

Android ожидает значок PNG размером 192×192, прозрачность разрешена и приветствуется.

Манифест объявлен с помощью:

Edge и IE 12

Microsoft представила файл browserconfig, XML-документ, в котором перечислены различные значки, соответствующие пользовательскому интерфейсу Metro.

Файл и цвет фона объявляются с помощью:

Классические настольные браузеры

Windows/macOS Chrome, Windows/macOS Firefox, Safari, IE… Здесь все немного размыто. Исторически существовал единственный файл favicon.ico , который до сих пор поддерживается. Однако самые последние браузеры предпочитают значки PNG, которые легче. Кроме того, некоторые браузеры не могут выбрать правильный значок в файле ICO (этот формат может включать несколько версий значка), что приводит к неправильному использованию значка с низким разрешением.

Можно было бы отказаться от старого favicon.