favicon.png vs favicon.ico - mengapa saya harus menggunakan PNG dan bukan ICO?

442

Selain fakta bahwa PNG adalah format gambar yang lebih umum, apakah ada alasan teknis untuk memilih favicon.png vs. favicon.ico?

Saya mendukung browser modern yang semuanya mendukung ikon favorit PNG.

png favicon ico Jon Galloway
sumber

Jawaban:

233

Jawaban diganti (dan mengubah Wiki Komunitas) karena berbagai pembaruan dan catatan dari berbagai yang lain di utas ini:

  • ICO dan PNG keduanya memungkinkan transparansi berbasis saluran alpha penuh
  • ICO memungkinkan kompatibilitas mundur ke peramban lama (mis. IE6)
  • PNG mungkin memiliki dukungan tooling yang lebih luas untuk transparansi, tetapi Anda dapat menemukan alat untuk membuat ICO alpha-channel juga, seperti Dynamic Drive tool dan plugin Photoshop yang disebutkan oleh @mercator.

Silakan berkonsultasi dengan jawaban lain di sini untuk lebih jelasnya.

Amber
sumber
78
ICO juga memungkinkan saluran alfa
Álvaro González
58
-1 ICO mendukung banyak resolusi termasuk saluran alpha penuh. Omong-omong, alpha 1-bit dikenal sebagai "transparansi". Satu-satunya batasan nyata yang dimiliki ICO adalah dengan ikon yang lebih besar atau sama dengan 256 panjangnya (arah apa pun), meskipun telah diatasi beberapa kali.
Christian
26
-1 .ico juga memungkinkan beberapa resolusi dalam satu file (16x16 dan 32x32 misalnya). Jadi icone tetap bagus saat Anda membuat pintasan di desktop.
gagarine
4
Sebagian besar browser menyukai favicon.ico di root daripada yang terhubung. Dengan solusi Anda, sebagian besar browser akan memilih .ico yang tidak transparan alih-alih png yang tertaut.
Lode
@lode mengapa itu terutama memilih ico non-transparan daripada ico transparan?
Rob Grant
367

Semua browser modern (diuji dengan Chrome 4, Firefox 3.5, IE8, Opera 10 dan Safari 4) akan selalu meminta a favicon.icokecuali Anda telah menentukan ikon cara pintas melalui <link>. Jadi, jika Anda tidak secara khusus menentukan satu, yang terbaik adalah selalu memiliki favicon.icofile, untuk menghindari 404. Yahoo! menyarankan Anda membuatnya kecil dan dapat disimpan dalam cache.

Dan Anda tidak harus menggunakan PNG hanya untuk transparansi alfa. File ICO mendukung transparansi alfa dengan baik (yaitu warna 32-bit), meskipun hampir tidak ada alat yang memungkinkan Anda untuk membuatnya. Saya secara teratur menggunakan Generator FavIcon Dynamic Drive untuk membuat favicon.icofile dengan transparansi alfa. Ini satu-satunya alat online yang saya tahu dapat melakukannya.

Ada juga plug-in Photoshop gratis yang dapat membuatnya.

mercator
sumber
6
Petunjuk bagus alat Dynamic Drive ini! Ditandai secara instan. Terima kasih!
Marcos Buarque
3
ulang alat, sebagian besar tidak benar; ada beberapa alat perancangan ikon. Saya menulis yang sederhana sendiri di masa lalu.
Christian
4
Bagi mereka yang tidak memiliki $ 650 dolar untuk Photoshop, Anda dapat menggunakan pixlr.com (gratis) untuk membuat, mengedit, dan menyimpan file .png dengan layering penuh dan transparansi :)
Scott B
3
@Pacerier Sangat sulit untuk .icomengedit di PS. Dan bahkan jika Anda melakukannya, hasil akhirnya sangat buruk, Anda akan berpikir .bmpitu format yang lebih baik (itu menambahkan banyak meta-data yang membuat pengeditan ulang menjadi masalah besar).
Kristen
4
@mikevoermans: Masih dibaca sebagai PNG; sebagian besar browser modern tidak terlalu peduli tentang ekstensi file. BTW, ini adalah jawaban terbaik dan harus diterima.
rvighne
48

File .png bagus, tetapi file .ico juga memberikan transparansi saluran alpha, plus file tersebut memberi Anda kompatibilitas.

Lihatlah jenis yang digunakan StackOverflow sebagai contoh (perhatikan bahwa ini transparan):

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

The apple-itouch thingy adalah untuk pengguna iphone yang membuat jalan pintas ke situs web.

Wouter van Nifterick
sumber
16
PNG juga dapat menyediakan saluran alfa
Álvaro González
10
ya, maksud saya adalah bahwa ico dapat melakukan semua yang dapat dilakukan png (alfa-transparansi) sebagai favicon, dan selain itu mereka didukung oleh semua browser sejak tahun 0.
Wouter van Nifterick
menurut wikipedia internet explorer akan gagal mendukung garis seperti ini: <link rel = "icon" type = "image / vnd.microsoft.icon" href = " example.com/image.ico " />
frankster
2
Kemungkinan situs web tidak mendukung browser sejak tahun 0 jadi mengapa repot-repot? Coba dan muat situs web modern di IE6 dan lihat apa yang terjadi;)
Dominic
26

Keuntungan teoretis dari file * .ico adalah bahwa file-file tersebut adalah sebuah wadah yang dapat menampung lebih dari satu ikon. Misalnya Anda dapat menyimpan gambar dengan saluran alfa dan versi 16 warna untuk sistem lawas, atau Anda dapat menambahkan ikon 32x32 dan 48x48 (yang akan muncul ketika misalnya menyeret tautan ke Windows explorer).

Namun, ide bagus ini cenderung berbenturan dengan implementasi browser.

Álvaro González
sumber
Terkait dengan ini adalah fakta bahwa IE9 juga menggunakan ikon-ikon besar untuk menyematkan ke taskbar win7 lihat: stackoverflow.com/questions/3723715/…
GazB
Uhm, teoretis? Ikon yang sama yang dikirimkan dengan Windows 7 dapat digunakan di Windows 95 dalam mode warna 8bit. Saya pikir itu cukup praktis, bukan?
Christian
Harap perhatikan bahwa jawaban ini ditulis pada 2009. Adegan browser pada saat itu sangat berbeda dari sekarang.
Álvaro González
15

PNG memiliki 2 keunggulan: ukurannya lebih kecil dan lebih banyak digunakan dan didukung (kecuali dalam kasus favicons). Seperti disebutkan sebelumnya ICO, dapat memiliki beberapa ikon ukuran, yang berguna untuk aplikasi desktop, tetapi tidak terlalu banyak untuk situs web. Saya akan merekomendasikan Anda untuk meletakkan favicon.ico di root aplikasi Anda. Jika Anda memiliki akses ke Kepala halaman situs web Anda gunakan tag untuk menunjuk ke file png. Jadi browser yang lebih lama akan menampilkan favicon.ico dan yang lebih baru png.

Untuk membuat file Png dan Ikon saya akan merekomendasikan The Gimp .

pmoleri
sumber
3
Tidak terlalu banyak untuk situs web? Tunggu sampai semua orang mulai menggunakan tampilan seperti retina; tiba-tiba akan ada alasan yang sangat bagus mengapa seseorang mungkin memasukkan ukuran 32x32 atau lebih besar dalam favicon mereka ...
Roman Starkov
1
Kita berbicara tentang favicons sehingga masalah dukungan sebenarnya bertentangan dengan apa yang Anda katakan
David Heffernan
1
+1 Mengatasi pertanyaan awal dan tidak terjebak dalam transparansi. Juga menyebutkan sebuah aplikasi yang tidak Format dukungan .ico.
kovacsbv
12

Beberapa alat sosial seperti Google+ menggunakan metode sederhana untuk mendapatkan favicon untuk tautan eksternal, mengambil http://your.domainname.com/favicon.ico

Karena mereka tidak mengambil konten HTML, <link>tag tidak akan berfungsi. Dalam hal ini, Anda mungkin ingin menggunakan aturan mod_rewrite atau letakkan saja file di lokasi default.

jdavid.net
sumber
1
Tidak tahu apakah itu benar atau salah tetapi itu adalah argumen yang menentukan bagi saya untuk pergi dan membuat favicon.ico di root selain png yang saya miliki.
Alexei Tenitski
2
Saya tahu ini dari pekerjaan di telly.com , -via paul lindner yang ada di tim google plus. plus.google.com/117259934788907243749/about
jdavid.net
Menempatkan favicon di root adalah standar de facto , jadi saya akan mematuhinya untuk alasan seperti yang disebutkan dalam jawaban ini.
Stijn de Witt
8

Ico bisa menjadi png.

Lebih tepatnya, Anda dapat menyimpan satu atau lebih png di dalam format wadah minimal ini, bukan bitmap + alpha biasa yang semua orang kaitkan dengan ico.

Dukungan sudah tua, muncul di Windows Vista (2007) dan didukung dengan baik oleh peramban, meskipun tidak harus dengan perangkat lunak pengedit ikon.

Setiap png yang valid (keseluruhan termasuk tajuk) dapat ditambahkan oleh 6 byte ico header dan direktori gambar 16 byte.
GIMP memiliki dukungan asli. Cukup ekspor sebagai ico dan centang "Compressed (PNG)".

Adria
sumber
3

Hindari PNG dalam hal apa pun jika Anda ingin kompatibilitas IE6 yang andal.

aehlke
sumber
19
Tidak ada alasan mengapa Anda tidak dapat menggunakan keduanya - ico di pohon direktori untuk IE6 dan PNG yang ditentukan melalui <link>dalam kode halaman untuk peramban modern.
Amber
10
Mengapa Anda menggunakan keduanya? Jika Anda akan repot-repot membuat ico apa manfaat menggunakan png juga? Tentunya itu hanya kerja ekstra dan kode tambahan.
Mr_Chimp
@ Mr_Chimp karena png adalah standar terbuka dan lebih berwawasan ke depan? Ini satu garis tambahan markup.
Wyatt8740
9
Hai @ Orcra - Saya pikir Anda tidak akan menganggapnya lucu jika Anda telah membaca ini ~ 8 tahun yang lalu ketika saya menulis jawaban ini, dan harus mempertimbangkan hal-hal seperti IE6 :) StackOverflow memungkinkan mengedit jawaban jadi jangan ragu untuk memperbaruinya sendiri untuk sesuatu yang relevan hari ini
aehlke
3
@ sama seperti Anda memiliki poin yang adil, saya buruk karena tidak memeriksa cap waktu.
Orcra
0

Untuk apa nilainya, saya melakukan ini:

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

Dan saya masih menyimpan favicon.ico di root.

s3c
sumber