favicon.png против favicon.ico - почему я должен использовать PNG вместо ICO?

StackOverflow https://stackoverflow.com/questions/1344122

  •  20-09-2019
  •  | 
  •  

Вопрос

Помимо того факта, что PNG является более распространенным форматом изображения, есть ли какие-либо технические причины отдавать предпочтение favicon.png противфавикон.ico?

Я поддерживаю современные браузеры, которые все поддерживают любимые иконки в формате PNG.

Это было полезно?

Решение

Ответ заменен (и превращен в вики сообщества) из-за многочисленных обновлений и заметок от различных других пользователей в этой теме:

  • ICO и PNG обеспечивают полную прозрачность на основе альфа-канала
  • ICO обеспечивает обратную совместимость со старыми браузерами (напримерIE6)
  • PNG, вероятно, имеет более широкую поддержку инструментов прозрачности, но вы также можете найти инструменты для создания ICO с альфа-каналом, такие как Инструмент динамического привода и Плагин для Photoshop упомянуто @mercator.

Не стесняйтесь ознакомиться с другими ответами здесь для получения более подробной информации.

Другие советы

Все современные браузеры (протестированы с Chrome 4, Firefox 3.5, IE8, Opera 10 и Safari 4) всегда будут запрашивать favicon.ico если только вы не указали значок быстрого доступа через <link>.Поэтому, если вы явно не указываете один из них, лучше всегда иметь favicon.ico файл, чтобы избежать 404. Yahoo!предлагает вам сделать его небольшим и кэшируемым.

И вам также не обязательно использовать PNG только для альфа-прозрачности. Файлы ICO поддерживайте альфа-прозрачность просто отлично (т.е.32-битный цвет), хотя вряд ли какие-либо инструменты позволяют вам создавать их.Я регулярно использую Генератор значков динамического привода для создания favicon.ico файлы с альфа-прозрачностью.Это единственный известный мне онлайн-инструмент, который может это сделать.

Там также есть бесплатный Подключаемый модуль Photoshop это может их создать.

файлы .png хороши, но файлы .ico также обеспечивают прозрачность альфа-канала, plus они обеспечивают вам обратную совместимость.

Взгляните, какой тип Переполнение стека использует, например (обратите внимание, что он прозрачный):

<link rel="shortcut icon" href="http://sstatic.net/so/favicon.ico"> 
<link rel="apple-touch-icon" href="http://sstatic.net/so/apple-touch-icon.png"> 

Устройство Apple-itouch предназначено для пользователей iphone, которые создают ярлык для перехода на веб-сайт.

Теоретическое преимущество файлов *.ico заключается в том, что они являются контейнерами, которые могут содержать более одного значка.Например, вы могли бы сохранить изображение с альфа-каналом и 16-цветную версию для устаревших систем, или вы могли бы добавить значки размером 32x32 и 48x48 (которые должны появляться при перетаскивании ссылки в проводник Windows).

Однако эта хорошая идея имеет тенденцию вступать в противоречие с реализациями браузера.

PNG имеет 2 преимущества:он имеет меньший размер и более широко используется и поддерживается (за исключением значков case).Как упоминалось ранее, ICO может иметь иконки разного размера, что полезно для настольных приложений, но не слишком много для веб-сайтов.Я бы порекомендовал вам поставить значок.ico в корневом каталоге вашего приложения.Если у вас есть доступ к заголовку страниц вашего веб-сайта, используйте тег, чтобы указать на файл png.Таким образом, более старый браузер будет отображать значок.ico, а более новые - png.

Для создания файлов Png и значков я бы рекомендовал The Gimp ( Извращенец ).

Некоторые социальные инструменты, такие как Google+, используют простой метод получения значка для внешних ссылок, извлекая http://your.domainname.com/favicon.ico

Поскольку они не выполняют предварительную выборку содержимого HTML, <link> тег не будет работать.В этом случае вы можете захотеть использовать правило mod_rewrite или просто поместить файл в папку по умолчанию.

ico может быть файл в формате png.

Точнее, вы можете хранить один или несколько png внутри этого минимального формата контейнера, вместо обычного bitmap + alpha, который у всех прочно ассоциируется с ico.

Поддержка старая, появляется в Windows Vista (2007) и хорошо поддерживается браузерами, хотя и не обязательно программным обеспечением для редактирования значков.

Любой допустимый png (весь, включая заголовок) может быть дополнен 6-байтовый заголовок ico и 16-байтовый каталог изображений.
GIMP имеет встроенную поддержку.Просто экспортируйте как ico и отметьте "Сжатый (PNG)".

Избегайте PNG в любом случае, если вы хотите надежной совместимости с IE6.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top