favicon.png против favicon.ico - почему я должен использовать PNG вместо ICO?
Вопрос
Помимо того факта, что 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.