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

442

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

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

png favicon ico Джон Галлоуэй
источник

Ответы:

233

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

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

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

янтарь
источник
78
ICO также позволяет альфа-канал
Альваро Гонсалес
58
-1 ICO поддерживает несколько разрешений, включая полный альфа-канал. Кстати, 1-битная альфа известна как «прозрачность». Единственный реальный предел, который имел ICO, был с иконками, большими или равными 256 по длине (в любом направлении), хотя он был преодолен несколько раз.
Кристиан
26
-1 .ico также разрешают множественное разрешение в одном файле (например, 16x16 и 32x32). Таким образом, icone остается приятным, когда вы создаете ярлык на рабочем столе.
Gagarine
4
Большинство браузеров предпочитают favicon.ico в корне над связанным. С вашим решением большинство браузеров выберет непрозрачный .ico вместо связанного png.
Лоде
@lode, почему он выбрал непрозрачный ico вместо прозрачного ico?
Роб Грант
367

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

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

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

Меркатора
источник
6
Отличный намек на этот инструмент Dynamic Drive! Мгновенно в закладки. Спасибо!
Маркос Бурке
3
Что касается инструментов, то это в значительной степени не соответствует действительности; Есть несколько инструментов для создания иконок. Я сам написал простую в прошлом.
Кристиан
4
Для тех, у кого нет $ 650 долларов для Photoshop, вы можете использовать pixlr.com (бесплатно) для создания, редактирования и сохранения файлов .png с полным наслоением и прозрачностью :)
Скотт Б
3
@Pacerier Невероятно сложно получить .icoредактирование в PS. И даже если вы это сделаете, конечный результат очень плохой, вы могли бы подумать, что .bmpэто лучший формат (он добавляет много метаданных, делая повторное редактирование огромной болью).
Кристиан
4
@mikevoermans: это все еще читается как PNG; большинство современных браузеров не заботятся о расширениях файлов. Кстати, это лучший ответ и должен быть принятым.
rvighne
48

Файлы .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, которые делают ярлык на сайт.

Воутер ван Нифтерик
источник
16
PNG также может предоставить альфа-канал
Альваро Гонсалес,
10
да, моя точка зрения заключалась в том, что ico может делать все, что может сделать png (альфа-прозрачность) в качестве значка, и, кроме того, они поддерживаются всеми браузерами начиная с года.
Wouter van Nifterick
в соответствии с википедией, Internet Explorer не сможет поддерживать такую ​​строку: <link rel = "icon" type = "image / vnd.microsoft.icon" href = " example.com/image.ico " />
frankster
2
Скорее всего, сайт не поддерживает браузеры с 0 года, так зачем? Попробуйте загрузить современный веб-сайт в IE6 и посмотрите, что произойдет;)
Доминик,
26

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

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

Альваро Гонсалес
источник
С этим
связан
Хм, теоретический? Тот же значок, поставляемый с Windows 7, можно использовать в Windows 95 в цветном режиме 8 бит. Я думаю, что это довольно практично, нет?
Кристиан
Обратите внимание, что этот ответ был написан в 2009 году. Сцена браузера в то время сильно отличалась от нынешней.
Альваро Гонсалес
15

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

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

pmoleri
источник
3
Не так много для сайтов? Подождите, пока все не начнут использовать сетчатые дисплеи; внезапно появится очень веская причина, по которой можно включить размер 32x32 или больше в их значок ...
Роман Старков
1
Мы говорим о фавиконах, поэтому вопрос поддержки фактически противоположен тому, что вы говорите
Дэвид Хеффернан,
1
+1 Адреса исходного вопроса и не увязнут в прозрачности. Также упоминается приложение , которое делает формат поддержки .ico.
kovacsbv
12

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

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

jdavid.net
источник
1
Не знаю, правда это или нет, но это был решающий аргумент для меня, чтобы пойти и создать favicon.ico в корне в дополнение к png, который у меня есть.
Алексей Теницкий
2
Я знаю это по работе на telly.com , - через Пола Линднера, который работает в команде Google Plus. plus.google.com/117259934788907243749/about
jdavid.net
Размещение favicon в корне является стандартом де-факто , поэтому я бы придерживался его по причинам, указанным в этом ответе.
Стейн де Витт
8

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

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

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

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

Adria
источник
3

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

aehlke
источник
19
Нет причин, по которым вы не можете использовать оба - ico в дереве каталогов для IE6 и PNG, указанный <link>в коде страницы для современных браузеров.
Amber
10
Почему вы используете оба? Если вы собираетесь заняться созданием ico, какую пользу принесет и png? Конечно, это просто дополнительная работа и дополнительный код.
Mr_Chimp
@Mr_Chimp, потому что png - открытый стандарт и более дальновидный? Это одна дополнительная строка разметки.
Wyatt8740 30.10.16
9
Привет, @Orcra. Думаю, тебе было бы не смешно, если бы ты читал это ~ 8 лет назад, когда я писал этот ответ, и мне приходилось учитывать такие вещи, как IE6 :) StackOverflow позволяет редактировать ответы, поэтому не стесняйся обновлять его до что-то актуальное сегодня
aehlke
3
@aehike у тебя есть справедливая точка зрения, мой плохой за то, что не проверил отметку времени.
Orcra
0

Для чего это стоит, я делаю это:

    <!-- Favicon - Generic -->
    <link rel="icon" href="path/favicon-32_x_32.png" sizes="32x32">
    <link rel="icon" href="path/favicon-57_x_57.png" sizes="57x57">
    <link rel="icon" href="path/favicon-76_x_76.png" sizes="76x76">
    <link rel="icon" href="path/favicon-96_x_96.png" sizes="96x96">
    <link rel="icon" href="path/favicon-128_x_128.png" sizes="128x128">
    <link rel="icon" href="path/favicon-192_x_192.png" sizes="192x192">
    <link rel="icon" href="path/favicon-228_x_228.png" sizes="228x228">
    <!-- Favicon - Android -->
    <link rel="shortcut icon" href="path/favicon-196_x_196.png" sizes="196x196">
    <!-- Favicon - iOS -->
    <link rel="apple-touch-icon" href="path/favicon-120_x_120.png" sizes="120x120">
    <link rel="apple-touch-icon" href="path/favicon-152_x_152.png" sizes="152x152">
    <link rel="apple-touch-icon" href="path/favicon-180_x_180.png" sizes="180x180">

И я до сих пор держу favicon.ico в корне.

S3C
источник