favicon.png vs favicon.ico - dlaczego powinienem używać PNG zamiast ICO?

442

Poza faktem, że PNG jest bardziej popularnym formatem obrazu, czy istnieje jakiś techniczny powód, aby favicon.png vs. favicon.ico?

Wspieram nowoczesne przeglądarki, które obsługują ulubione ikony PNG.

png favicon ico Jon Galloway
źródło

Odpowiedzi:

233

Odpowiedź została zastąpiona (i zmieniła się w Wiki Wiki) z powodu licznych aktualizacji i notatek od innych osób w tym wątku:

  • Zarówno ICO, jak i PNG zapewniają pełną przejrzystość opartą na kanale alfa
  • ICO pozwala na kompatybilność wsteczną ze starszymi przeglądarkami (np. IE6)
  • PNG ma zapewnioną szerszą obsługę narzędzi dla przezroczystości, ale można również znaleźć narzędzia do tworzenia kanału ICO kanału alfa, takie jak narzędzie Dynamic Drive i wtyczka Photoshop wspomniane przez @mercator.

Aby uzyskać więcej informacji, zapoznaj się z innymi odpowiedziami tutaj.

Bursztyn
źródło
78
ICO zezwala również na kanał alfa
Álvaro González
58
-1 ICO obsługuje wiele rozdzielczości, w tym pełny kanał alfa. Nawiasem mówiąc, 1-bitowa alfa jest znana jako „przezroczystość”. Jedynym prawdziwym ograniczeniem, jakie miał ICO, były ikony o długości większej lub równej 256 (w dowolnym kierunku), choć zostało to kilkakrotnie pokonane.
Christian
26
-1 .ico pozwala również na wiele rozdzielczości w jednym pliku (na przykład 16x16 i 32x32). Tak więc icone pozostaje miły, gdy tworzysz skrót na pulpicie.
gagarine
4
Większość przeglądarek preferuje favicon.ico w katalogu głównym nad połączonym. Z twoim rozwiązaniem większość przeglądarek wybrałaby nieprzezroczysty .ico zamiast połączonego png.
Lode
@lode dlaczego miałby w szczególności wybierać nieprzezroczyste ico zamiast przezroczystego ico?
Rob Grant,
367

Wszystkie nowoczesne przeglądarki (testowane z Chrome 4, Firefox 3.5, IE8, Opera 10 i Safari 4) zawsze będą żądać, favicon.icochyba że podasz ikonę skrótu za pośrednictwem <link>. Więc jeśli nie określisz go jednoznacznie, najlepiej zawsze mieć favicon.icoplik, aby uniknąć 404. Yahoo! sugeruje, aby był mały i buforowalny.

I nie musisz wybierać PNG tylko dla przezroczystości alfa. Pliki ICO wspaniale obsługują przezroczystość alfa (tj. Kolor 32-bitowy), chociaż prawie żadne narzędzia nie pozwalają na ich tworzenie. Regularnie używam generatora FavIcon firmy Dynamic Drive do tworzenia favicon.icoplików z przezroczystością alfa. Jest to jedyne znane mi narzędzie online, które może to zrobić.

Istnieje również bezpłatna wtyczka Photoshop, która może je tworzyć.

mercator
źródło
6
Świetna wskazówka dla tego narzędzia Dynamic Drive! Natychmiast dodany do zakładek. Dzięki!
Marcos Buarque
3
ponownie narzędzia, jest to w dużej mierze nieprawda; istnieje kilka narzędzi do projektowania ikon. W przeszłości sam napisałem prosty.
Christian
4
Dla tych, którzy nie mają 650 dolarów za Photoshopa, możesz użyć pixlr.com (za darmo) do tworzenia, edytowania i zapisywania plików .png z pełnym nakładaniem warstw i przezroczystością :)
Scott B
3
@Pacerier .icoEdycja w PS jest niezwykle trudna . I nawet jeśli to zrobisz, wynik końcowy jest tak zły, pomyślałbyś, że .bmpbył to lepszy format (dodaje wiele metadanych, co sprawia, że ​​ponowna edycja jest ogromnym problemem).
Christian
4
@mikevoermans: Nadal jest czytany jako PNG; większość współczesnych przeglądarek nie dba o rozszerzenia plików. BTW, to najlepsza odpowiedź i powinna być zaakceptowana.
rvighne
48

Pliki .png są ładne, ale pliki .ico zapewniają również przezroczystość kanału alfa, a ponadto zapewniają zgodność wsteczną.

Zobacz, jakiego typu używa StackOverflow (zauważ, że jest przezroczysty):

<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 jest przeznaczony dla użytkowników iPhone'ów, którzy tworzą skrót do strony internetowej.

Wouter van Nifterick
źródło
16
PNG może również zapewnić kanał alfa
Álvaro González
10
tak, chodziło mi o to, że ico może robić wszystko, co potrafi png (przezroczystość alfa) jako favicon, a dodatkowo są obsługiwane przez wszystkie przeglądarki od roku 0
Wouter van Nifterick
według wikipedii Internet Explorer nie będzie obsługiwał takiej linii: <link rel = "icon" type = "image / vnd.microsoft.icon" href = " example.com/image.ico " />
frankster
2
Możliwe, że witryna nie obsługuje przeglądarek od roku 0, więc po co się tym przejmować? Spróbuj załadować nowoczesną stronę internetową w IE6 i zobacz, co się stanie;)
Dominic
26

Teoretyczną zaletą plików * .ico jest to, że są to pojemniki, które mogą pomieścić więcej niż jedną ikonę. Możesz na przykład przechowywać obraz z kanałem alfa i wersją 16 kolorów dla starszych systemów, lub możesz dodać ikony 32x32 i 48x48 (które pojawiałyby się np. Podczas przeciągania linku do Eksploratora Windows).

Ten dobry pomysł jednak koliduje z implementacjami przeglądarki.

Álvaro González
źródło
Związany z tym jest fakt, że IE9 używa również tych dużych ikon do przypięcia do paska zadań win7, patrz: stackoverflow.com/questions/3723715/…
GazB
Uhm, teoretyczny? Tej samej ikony dostarczonej z systemem Windows 7 można używać w systemie Windows 95 w 8-bitowym trybie kolorów. Myślę, że to całkiem praktyczne, nie?
Christian
Pamiętaj, że ta odpowiedź została napisana w 2009 roku. Scena przeglądarki była wtedy znacznie inna niż obecnie.
Álvaro González
15

PNG ma 2 zalety: ma mniejszy rozmiar i jest szerzej stosowany i obsługiwany (z wyjątkiem przypadków ulubionych). Jak wspomniano wcześniej ICO, może mieć wiele rozmiarów ikon, co jest przydatne w aplikacjach komputerowych, ale nie za bardzo w witrynach internetowych. Polecam umieścić favicon.ico w katalogu głównym aplikacji. Jeśli masz dostęp do nagłówka stron swojej witryny, użyj tagu, aby wskazać plik png. Starsza przeglądarka wyświetli plik favicon.ico, a nowsze - png.

Do tworzenia plików PNG i ikon polecam The Gimp .

pmoleri
źródło
3
Nie tyle na stronach internetowych? Poczekaj, aż wszyscy zaczną używać wyświetlaczy podobnych do siatkówki; nagle pojawi się bardzo dobry powód, dla którego można dołączyć rozmiar 32 x 32 lub większy do ich ulubionych ...
Roman Starkov
1
Mówimy o ulubionych, więc kwestia wsparcia jest w rzeczywistości przeciwieństwem tego, co mówisz
David Heffernan
1
+1 Adresuje oryginalne pytanie i nie ugrzęznie w przejrzystości. Wspomina też aplikację, która robi formatu wsparcie .ico.
kovacsbv,
12

Niektóre narzędzia społecznościowe, takie jak Google+, wykorzystują prostą metodę uzyskania favikonu dla zewnętrznych linków, pobierając http://your.domainname.com/favicon.ico

Ponieważ nie pobierają wstępnie treści HTML, <link>tag nie będzie działać. W takim przypadku możesz użyć reguły mod_rewrite lub po prostu umieścić plik w domyślnej lokalizacji.

jdavid.net
źródło
1
Nie wiem, czy to prawda, czy fałsz, ale był to decydujący argument dla mnie, aby przejść do tworzenia favicon.ico w katalogu głównym oprócz png I.
Alexei Tenitski
2
Wiem o tym z pracy na telly.com , -via Paul Lindner , który jest członkiem zespołu Google Plus. plus.google.com/117259934788907243749/about
jdavid.net
Umieszczenie favikonu w katalogu głównym jest de facto standardem, więc trzymałbym się go z powodów takich jak wspomniane w tej odpowiedzi.
Stijn de Witt
8

ICO może być png.

Dokładniej, możesz przechowywać jeden lub więcej png w tym minimalnym formacie kontenera, zamiast zwykłej mapy bitowej + alfa, którą wszyscy silnie kojarzą z ico.

Obsługa jest stara, pojawia się w systemie Windows Vista (2007) i jest dobrze obsługiwana przez przeglądarki, choć niekoniecznie przez oprogramowanie do edycji ikon.

Każdy prawidłowy png (łącznie z nagłówkiem) może być poprzedzony 6-bajtowym nagłówkiem ico i 16-bajtowym katalogiem obrazów.
GIMP ma natywne wsparcie. Wystarczy wyeksportować jako ico i zaznaczyć „Compressed (PNG)”.

Adria
źródło
3

Unikaj PNG, jeśli chcesz niezawodną kompatybilność z IE6.

aehlke
źródło
19
Nie ma powodu, dla którego nie można używać obu - ico w drzewie katalogów dla IE6 i PNG określonego za pomocą <link>kodu strony dla nowoczesnych przeglądarek.
Amber
10
Dlaczego miałbyś używać obu? Jeśli masz zamiar zawracać sobie głowę zrobieniem ico, jakie korzyści przyniosłoby użycie png? Z pewnością to tylko dodatkowa praca i dodatkowy kod.
Mr_Chimp
@Mr_Chimp, ponieważ png to otwarty standard i bardziej przyszłościowy? To jedna dodatkowa linia znaczników.
Wyatt8740,
9
Cześć @Orcra - Myślę, że nie byłoby tak zabawne, gdybyś czytał to ~ 8 lat temu, kiedy napisałem tę odpowiedź, i musiałem rozważyć takie rzeczy jak IE6 :) StackOverflow umożliwia edytowanie odpowiedzi, więc możesz ją zaktualizować samodzielnie coś istotnego dzisiaj
aehlke
3
@aehike masz rację, mój zły, że nie sprawdziłeś znacznika czasu.
Orcra
0

Dla tego, co warto, robię to:

    <!-- 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">

I nadal trzymam favicon.ico w katalogu głównym.

s3c
źródło