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

Ответ 1

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

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

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

Ответ 2

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

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

Там также есть бесплатный плагин Photoshop, который может их создать.

Ответ 3

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

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

<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 thingy для пользователей iphone, которые делают ярлык для веб-сайта.

Ответ 4

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

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

Ответ 5

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

Чтобы создать файлы Png и Icon, я бы рекомендовал Gimp.

Ответ 6

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

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

Ответ 7

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

Ответ 8

Ико может быть a png.

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

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

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