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

442

Крім того, що PNG є більш поширеним форматом зображення, чи є якісь технічні причини надати перевагу favicon.png проти favicon.ico?

Я підтримую сучасні браузери, які підтримують улюблені піктограми PNG.

png favicon ico

— Джон Галлоуей
джерело

233

Відповідь замінено (і перетворилося на Wiki Wiki) завдяки численним оновленням та нотаткам різних інших у цій темі:

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

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

— Бурштин
джерело

78

ICO також дозволяє альфа-каналу

— Альваро Гонсалес

58

-1 ICO підтримує кілька роздільних можливостей, включаючи повний альфа-канал. До речі, 1-бітна альфа відома як "прозорість". Єдиною реальною межею ICO була піктограма більшою або рівною 256 в довжину (в будь-якому напрямку), хоча вона була подолана в кілька разів.

— Крістіан

26

-1 .ico також дозволяє декілька роздільних можливостей в одному файлі (наприклад, 16x16 і 32x32). Тож icone залишається приємним, коли ви створюєте ярлик на робочому столі.

— гагарин

4

Більшість браузерів надає перевагу favicon.ico в корені над пов'язаним. З вашим рішенням більшість браузерів вибиратиме непрозорий .ico замість пов'язаного PNG.

— Лоде

@lode чому б він особливо вибирав непрозорий ico замість прозорого ico?

— Роб Грант

367

Усі сучасні браузери (тестовані на 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, який може їх створити.

— меркатор
джерело

6

Чудовий натяк на цей інструмент Динамічний привід! Миттєво вибране закладки. Дякую!

— Маркос Буарке

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, які роблять ярлик до веб-сайту.

— Wouter van Nifterick
джерело

16

PNG також може забезпечити альфа-канал

— Альваро Гонсалес

10

так, моя думка полягала в тому, що ico's може робити все, що може зробити png (альфа-прозорість) як favicon, і крім того, їх підтримують усі браузери з 0. року.

— Wouter van Nifterick,

Згідно з wikipedia, 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 Explorer).

Однак ця гарна ідея, як правило, стикається з реалізацією браузера.

— Альваро Гонсалес
джерело

У зв'язку з цим той факт , що IE9 використовує ці великі значки штифтом на win7 панель задач см: stackoverflow.com/questions/3723715 / ...

— GazB

Гм, теоретичний? Той самий значок, що постачається з Windows 7, можна використовувати в Windows 95 у 8-бітовому кольоровому режимі. Я думаю, це цілком практично, ні?

— Крістіан

Зверніть увагу, що ця відповідь була написана у 2009 році. Сцена браузера на той час була значно іншою, ніж зараз.

— Альваро Гонсалес

15

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

Для створення файлів Png та Icon я рекомендував би Gimp .

— пмолері
джерело

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 , -via paul lindner, яка входить в команду google plus. plus.google.com/117259934788907243749/about

— jdavid.net

Поміщення фавікону в корінь є де-факто стандартом, тому я б дотримувався його з причин, таких, як зазначено у цій відповіді.

— Штійн де Віт

8

Іко може бути PNG.

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

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

Будь-який дійсний png (цілий, включаючи заголовок), може бути попереджено за допомогою 6-байтного заголовка ico та 16-байтового каталогу зображень.
GIMP має вбудовану підтримку. Просто експортуйте як ico і поставте галочку "Стиснений (PNG)").

— Адрія
джерело

3

У будь-якому випадку уникайте PNG, якщо ви хочете надійної сумісності IE6.

— аельке
джерело

19

Немає причини, чому ви не можете використовувати і те, і інше - ico в дереві каталогів для IE6 та PNG, вказаний через <link>код сторінки у сучасних браузерах.

— Бурштин

10

Чому б ви використовували обидва? Якщо ви збираєтеся турбуватися про створення ico, яку користь отримає також png? Звичайно, це просто додаткова робота та додатковий код.

— Mr_Chimp

@Mr_Chimp, тому що png - це відкритий стандарт і більш перспективний? Це одна додаткова лінія розмітки.

— Wyatt8740

9

Привіт @Orcra - Я думаю, ви б не вважали це таким смішним, якби ви читали це ~ 8 років тому, коли я писав цю відповідь, і довелося враховувати такі речі, як IE6 :) щось актуальне сьогодні

— aehlke

3

@aehike у вас справедливий момент, моє погано за те, що не перевіряв часову позначку.

— Оркра

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
джерело