Home / Questions / 22067
Accepted
Alvaro Montoro
Asked: 2020-08-31 06:27:12 +0800 CST 2020-08-31 06:27:12 +0800 CST

Фавикон: формат ico или png и какой rel?

  • 772

Я обычно включаю фавикон на свои веб-страницы со значком .ico, делая что-то вроде этого:

<link rel="icon" href="./favicon.ico" />

Но я видел довольно много веб-сайтов, делающих это с изображениями с расширением .pngи с разными значениями атрибута rel(например, «значок ярлыка» или «иконка Apple-Touch»).

Какой формат изображения больше подходит для фавиконки в современных браузерах? Каковы преимущества использования одного над другим? И то же самое для атрибута rel: есть ли разница между «значком» или «значком ярлыка»? (при условии, что «apple-touch-icon» относится к устройствам Apple)

html

2 Answers

  1. Best Answer

    Почти все браузеры уже имеют обширную поддержку различных форматов изображений для отображения значка страницы, а Internet Explorer и Safari (обычные подозреваемые) имеют наименьшую поддержку. Вот список.

    край : .ico, .png,.gif

    Firefox : .ico, .png, .gif, .gifанимированный, .jpg, .pngанимированный,.svg

    Chrome : .ico, .png, .gif, .gifанимированный,.jpg

    ИП : .ico, .png,.gif

    Опера : .ico, .png, .gif, .gifживая, .jpg, .pngживая,.svg

    сафари : .ico, .png, .gif,.jpg

    Как вы увидите, почти всегда общим фактором является ico, pngи gif. Оказывается, последний не очень хорош в прозрачности или качестве изображений, как вы можете прочитать в самой Википедии , что оставляет нам только два идеальных типа для этой цели; icoи png.

    Иконки могут иметь размеры 16×16, 32×32, 48×48 или 64×64 пикселя и 8-битную, 24-битную или 32-битную глубину цвета. Я лично использовал pngогромные и непропорциональные размеры (в качестве эксперимента), и браузер отрисовал их без проблем, что делает этот формат идеальным (на мой взгляд).

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

    Если найдены ссылки как для фавиконов PNG, так и для ICO, браузеры, совместимые с PNG, выбирают, какой формат и размер использовать, следующим образом:

    • Firefox и Safari будут использовать фавиконку, которая появится последней.

    • Chrome для Mac будет использовать все, что находится в формате ICO, в противном случае он будет использовать все, что имеет размер 32x32 пикселя.

    • Chrome для Windows будет использовать фавикон, который идет первым, если он имеет размер 16x16 пикселей, в противном случае — ICO.

    • Если ни одно из вышеперечисленных действий невозможно, оба Chrome будут использовать тот значок, который появится первым, что является полной противоположностью Firefox и Safari. На самом деле Chrome для Mac будет игнорировать 16 x 16 и использовать 32 x 32, а затем масштабировать его до 16 x 16 на устройствах без сетчатки.

    • Opera выберет иконку совершенно случайно.

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

    <link rel="[tipo enlace][espacio][tipo enlace]..."/>

    Типы ссылок , о которых вы говорите, это iconи shorcut.

    • icon: определяет ресурс для представления страницы в пользовательском интерфейсе, обычно значок (звуковой или визуальный).

      По сути, это изображение, которое идентифицирует вашу страницу.

    • shorcut: Не входит в стандарт.

      Он используется по историческим причинам.

    По историческим причинам ключевому слову значка может предшествовать ключевое слово «ярлык». Если присутствует «ярлык», за ним должен сразу следовать значок, и оба должны быть разделены одним символом U + 0020 ПРОБЕЛ.

    В принципе iconдостаточно, если вы не собираетесь поддерживать старые браузеры на своем сайте.

    • 14

  2. Я бы продолжал использовать .icoего, так как это наиболее поддерживаемый формат во всех браузерах. Теперь, насколько я помню, я видел, что на одном из моих занятий в университете атрибут rel="shortcut icon" фавикона был определен Internet Explorer и должен был указывать на связь между icon и page , так было до тех пор, пока Появление HTML5 (правда не знаю, в каком это было году xD) было тогда, когда было заявлено, что это iconбудет стандартизированный идентификатор, то есть, по моему мнению, только браузеры, не основанные на IE , могут использовать фавикон без потребность в shortcut.

    Chrome, Firefox, Opera и Safari принимают значки PNG ... Но Chrome и Safari всегда будут выбирать .icoего, если оба существуют .

     <!-- Chrome, Safari, IE -->
<link rel="shortcut icon" href="path/to/favicon.ico">

<!-- Firefox, Opera  -->
<link rel="icon" href="path/to/favicon.png">

    Так как появилось использование PNG, множественные разрешения не включены, их пришлось бы набирать вручную:.

    <link rel="icon" href="favicon-16.png" sizes="16x16">
<link rel="icon" href="favicon-32.png" sizes="32x32">
<link rel="icon" href="favicon-48.png" sizes="48x48">
<link rel="icon" href="favicon-64.png" sizes="64x64">
<link rel="icon" href="favicon-128.png" sizes="128x128">

    Поэтому не будет вопроса , какой формат наиболее подходящий? .icoтак как xD всегда будет в приоритете

    Поскольку «Сенсорные значки» — это фавиконы для мобильных устройств и планшетов, iOS автоматически добавляет некоторые визуальные эффекты для согласования со значками, встроенными на главный экран (как это происходит со значками приложений). В частности, IOS добавляет:

    Закругленные углы

    падение тени

    светоотражающий блеск

    Начиная с iOS 2.0, вы можете избежать добавления этих эффектов, используя precompose :

    <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

    На самом деле у него много свойств, здесь это очень хорошо объяснено:

    https://mathiasbynens.be/notes/touch-icons

    • 5