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
источник