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

Question

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

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

Answer 1

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

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

Существует также бесплатный подключаемый модуль Photoshop , который может их создавать.

Answer 2

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

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

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

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

Answer 4

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

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

Answer 5

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

. Для создания файлов Png и Icon я бы порекомендовал The Gimp .

.

Answer 6

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

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

Answer 7

ICO может быть png.

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

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

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

Answer 8

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