favicon.png vs favicon.ico - ICO yerine neden PNG kullanmalıyım?

442

PNG'nin daha yaygın bir görüntü formatı olması dışında, favicon.png ve favicon.ico'ya karşı herhangi bir teknik neden var mı?

PNG favori simgelerini destekleyen modern tarayıcıları destekliyorum.

png favicon ico

— Jon Galloway
kaynak

233

Bu konudaki diğer pek çok güncelleme ve not nedeniyle cevap değiştirildi (ve Topluluk Wiki'ye döndü):

ICO'lar ve PNG'lerin her ikisi de tam alfa kanalı tabanlı şeffaflığa izin verir
ICO, eski tarayıcılarla (ör. IE6) geriye dönük uyumluluk sağlar
PNG muhtemelen saydamlık için daha geniş takım desteğine sahiptir, ancak @mercator tarafından belirtilen Dinamik Sürücü aracı ve Photoshop eklentisi gibi alfa kanalı ICO'ları oluşturmak için araçlar da bulabilirsiniz .

Daha fazla ayrıntı için diğer cevaplara danışmaktan çekinmeyin.

— Amber
kaynak

78

ICO ayrıca alfa kanalına da izin veriyor

— Álvaro González

58

-1 ICO, tam alfa kanalı dahil çoklu çözünürlükleri destekler. Bu arada, 1 bitlik alfa "saydamlık" olarak bilinir. ICO'nun sahip olduğu tek gerçek sınır, birkaç kez aşılmasına rağmen, uzunlukları 256 olan (herhangi bir yönde) daha büyük veya eşittir.

— Christian

26

-1 .ico ayrıca bir dosyada birden çok çözünürlüğe izin verir (örneğin 16x16 ve 32x32). Böylece masaüstünde bir kısayol oluşturduğunuzda icone güzel kalır.

— gagarine

4

Çoğu tarayıcı, bağlı olanın üzerinden favicon.ico'yu tercih eder. Çözümünüzle tarayıcıların çoğu bağlı png yerine saydam olmayan .ico'yu seçer .

— Lode

@lode neden şeffaf bir ico yerine özellikle şeffaf olmayan bir ico seçsin?

— Rob Grant

367

Tüm modern tarayıcılar (Chrome 4, Firefox 3.5, IE8, Opera 10 ve Safari 4 ile test edilmiştir) favicon.icoüzerinden bir kısayol simgesi belirtmediyseniz her zaman bir istekte bulunacaktır <link>. Bu nedenle, açıkça bir tane belirtmezseniz, favicon.ico404'ü önlemek için her zaman bir dosyaya sahip olmak en iyisidir . Yahoo! küçük ve önbelleğe alınabilir yapmanızı önerir.

Ve sadece alfa saydamlığı için bir PNG'ye gitmeniz gerekmez. ICO dosyaları alfa saydamlığını gayet iyi (yani 32 bit renk) destekler, ancak neredeyse hiç araç bunları oluşturmanıza izin vermez. Alfa saydamlığı olan dosyalar oluşturmak için düzenli olarak Dynamic Drive'ın FavIcon Generator yazılımını kullanıyorum favicon.ico. Bunu yapabileceğimi bildiğim tek çevrimiçi araç.

Bunları oluşturabilecek ücretsiz bir Photoshop eklentisi de var .

— merkator
kaynak

6

Bu Dinamik Sürücü aracına harika bir ipucu! Anında yer imi eklendi. Teşekkürler!

— Marcos Buarque

3

araçları yeniden, büyük ölçüde yanlış; çeşitli simge tasarım araçları vardır. Geçmişte basit bir tane yazdım.

— Christian

4

Photoshop için 650 dolara sahip olmayanlar için .png dosyalarını tam katmanlama ve saydamlıkla oluşturmak, düzenlemek ve kaydetmek için pixlr.com (ücretsiz) kullanabilirsiniz :)

— Scott B

3

@Pacerier PS'de .icodüzenleme yapmak inanılmaz derecede zor . Ve bunu yapsanız bile, sonuç çok kötü, .bmpdaha iyi bir format olduğunu düşünürdünüz (yeniden düzenlemek çok büyük bir acı veren çok fazla meta veri ekler).

— Christian

4

@mikevoermans: Hala bir PNG olarak okunuyor; çoğu modern tarayıcı dosya uzantılarını pek önemsemez. BTW, bu en iyi cevap ve kabul edilen cevap olmalı.

— rvighne

48

.png dosyaları güzeldir, ancak .ico dosyaları alfa kanalı saydamlığı da sağlar, ayrıca size geriye dönük uyumluluk sağlar.

StackOverflow'un örneğin hangi türü kullandığına bir göz atın (saydam olduğuna dikkat edin):

<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 şey, bir web sitesine kısayol yapan iphone kullanıcıları içindir.

— Wouter van Nifterick
kaynak

16

PNG ayrıca alfa kanalı da sağlayabilir

— Álvaro González

10

evet, benim

— noktam, ico'nun png'lerin

wikipedia'ya göre internet explorer böyle bir satırı destekleyemez: <link rel = "icon" type = "image / vnd.microsoft.icon" href = " example.com/image.ico " />

— frankster

2

Web sitesi 0 yılından beri tarayıcıları desteklemiyor olabilir, bu yüzden neden rahatsız oluyorsunuz? IE6'da modern bir web sitesini deneyin ve yükleyin ve ne olduğunu görün;)

— Dominic

26

* .İco dosyalarının teorik avantajı, birden fazla simge tutabilen konteynerler olmasıdır. Örneğin, eski sistemler için alfa kanalı ve 16 renkli sürümü olan bir görüntü depolayabilir veya 32x32 ve 48x48 simgeleri ekleyebilirsiniz (örneğin, bir bağlantıyı Windows Gezgini'ne sürüklerken görünür).

Ancak bu iyi fikir, tarayıcı uygulamalarıyla çakışma eğilimindedir.

— Álvaro González
kaynak

Bununla ilgili olarak,

— IE9'un

Uhm, teorik mi? Windows 7 ile gelen aynı simge, Windows 95'te 8 bit renk modunda kullanılabilir. Bence bu oldukça pratik, değil mi?

— Christian

Bu cevabın 2009'da yazıldığını lütfen unutmayın. O zamanki tarayıcı sahnesi şu anda olduğundan çok farklıydı.

— Álvaro González

15

PNG'nin 2 avantajı vardır: daha küçük bir boyuta sahiptir ve daha yaygın olarak kullanılır ve desteklenir (favicons hariç). ICO'dan önce de belirtildiği gibi, masaüstü uygulamaları için yararlı olan ancak web siteleri için çok fazla olmayan birden fazla boyut simgesine sahip olabilir. Uygulamanızın köküne bir favicon.ico koymanızı öneririm. Web sitenizin sayfalarının başına erişiminiz varsa, bir png dosyasını işaret etmek için etiketi kullanın. Böylece eski tarayıcı favicon.ico ve daha yeni olanları png gösterecektir.

Png ve Icon dosyaları oluşturmak için Gimp'i tavsiye ederim .

— pmoleri
kaynak

3

Web siteleri için çok fazla değil mi? Herkes retina benzeri ekranlar kullanmaya başlayana kadar bekleyin; Birdenbire, kendi favicon'larına 32x32 veya daha büyük bir boyut eklemek için çok iyi bir neden olacak ...

— Roman Starkov

1

Favicons hakkında konuşuyoruz, bu yüzden destek konusu aslında söylediklerinizin tam tersi

— David Heffernan

1

+1 Orijinal soruyu ele alır ve saydamlık içinde saplanmaz. Ayrıca bir uygulamayı bahseder yapar destek .ico formatında.

— kovacsbv

12

Google+ gibi bazı sosyal araçlar dış bağlantılar için site simgesi, alımlı almak için basit bir yöntem kullanmak http://your.domainname.com/favicon.ico

HTML içeriğini önceden getirmedikleri için <link>etiket çalışmaz. Bu durumda, bir mod_rewrite kuralı kullanmak veya dosyayı varsayılan konuma yerleştirmek isteyebilirsiniz.

— jdavid.net
kaynak

1

Doğru mu yanlış mı bilmiyorum ama sahip olduğum png'ye ek olarak kökte favicon.ico oluşturup benim için karar verme argümanı oldu.

— Alexei Tenitski

2

Bunu google plus ekibinde yer alan -via paul lindner telly.com'daki işten biliyorum . plus.google.com/117259934788907243749/about

— jdavid.net

Favicon'un kök içine yerleştirilmesi fiili standarttır, bu yüzden bu cevapta belirtildiği gibi nedenlerden dolayı ona bağlı kalacağım.

— Stijn de Witt

8

Bir ico edebilir olması bir png.

Daha doğrusu, herkesin ico ile güçlü bir şekilde ilişkilendirdiği olağan bitmap + alfa yerine bu minimum kapsayıcı biçiminde bir veya daha fazla png saklayabilirsiniz.

Windows Vista'da (2007) görünen destek eskidir ve simge düzenleme yazılımı tarafından desteklenmese de tarayıcılar tarafından iyi bir şekilde desteklenir.

Geçerli herhangi bir png (başlık dahil tümü), 6 baytlık ico başlığı ve 16 baytlık resim dizini ile eklenebilir .
GIMP yerel desteğe sahiptir. Sadece ICO olarak dışa aktarın ve "Sıkıştırılmış (PNG)" seçeneğini işaretleyin.

— Adria
kaynak

3

Güvenilir IE6 uyumluluğu istiyorsanız her durumda PNG'den kaçının.

— aehlke
kaynak

19

Her ikisini de kullanamazsınız - IE6 için dizin ağacında bir ico ve <link>modern tarayıcılar için sayfa kodunda bir ile belirtilen bir PNG .

— Amber

10

Neden ikisini de kullanasınız? Bir ico yapmak için uğraşacaksanız, bir png kullanmanın ne yararı olur? Elbette bu sadece ekstra iş ve ekstra kod.

— Mr_Chimp

@Mr_Chimp çünkü png açık bir standart ve daha ileri görüşlü mü? Fazladan bir işaretleme çizgisi.

— Wyatt8740

9

Merhaba @Orcra - Sanırım bu okuduktan sonra bu kadar komik bulamazsınız ~ 8 yıl önce bu yanıtı yazdığımda ve IE6 gibi şeyleri düşünmek zorunda kaldım :) StackOverflow cevapları düzenlemeye izin veriyor, bu yüzden lütfen kendiniz güncellemekten çekinmeyin bugün alakalı bir şey

— aehlke

3

@ adil bir noktanız var, zaman damgasını kontrol etmediğim için kötüyüm.

— Orcra

0

Değeri için, bunu yaparım:

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

Ve hala favicon.ico'yu kökünde tutuyorum.

— S3C
kaynak