Apakah favicon harus berukuran 32x32 atau 16x16?

692

Saya ingin menggunakan gambar tunggal sebagai favicon biasa dan favicon ramah iPhone / iPad.

Apakah ini mungkin? Akankah skala PNG 72x72 yang ramah iPad jika ditautkan sebagai browser favicon biasa? Atau apakah saya harus menggunakan gambar 16x16 atau 32x32 yang terpisah?

favicon Alex G
sumber
lihat jawaban saya stackoverflow.com/a/45301651/661584 jauh lebih mudah. mungkin membantu. terima kasih
MemeDeveloper

Jawaban:

1448

Untuk IE, Microsoft merekomendasikan 16x16, 32x32 dan 48x48 yang dikemas dalam file favicon.ico .

Untuk iOS, Apple merekomendasikan nama dan resolusi file tertentu , paling banyak 180x180 untuk perangkat terbaru yang menjalankan iOS 8.

Android Chrome terutama menggunakan manifes dan juga bergantung pada ikon Apple touch.

IE 10 pada Windows 8.0 memerlukan gambar PNG dan warna latar belakang dan IE 11 pada Windows 8.1 dan 10 menerima beberapa gambar PNG yang dideklarasikan dalam file XML khusus yang disebutbrowserconfig.xml .

Safari untuk Mac OS X El Capitan memperkenalkan ikon SVG untuk tab yang disematkan .

Beberapa platform lain mencari file PNG dengan berbagai resolusi, seperti gambar 96x96 untuk Google TV atau gambar 228x228 untuk Opera Coast .

Lihatlah daftar gambar favicon ini untuk referensi lengkap.

TLDR: Generator favicon ini dapat menghasilkan semua file ini sekaligus. Generator juga dapat diimplementasikan sebagai plugin WordPress . Pengungkapan penuh: Saya adalah penulis situs ini.

philippe_b
sumber
136

Saya tidak melihat info terkini yang tercantum di sini, jadi begini:

Untuk menjawab pertanyaan ini sekarang, 2 favicons tidak akan melakukannya jika Anda ingin ikon Anda terlihat hebat di mana-mana. Lihat ukuran di bawah ini:

16 x 16 - Ukuran standar untuk browser
24 x 24 - IE9 menyematkan ukuran situs untuk antarmuka pengguna
32 x 32 - Tab halaman baru IE, tombol Windows 7+ taskbar, bilah samping Daftar Bacaan Safari
48 x 48 - Situs Windows
57 x 57 - iPod touch , iPhone hingga 3G
60 x 60 - iPhone sentuh hingga iOS7
64 x 64 - Situs Windows, bilah samping Daftar Pustaka Safari di HiDPI / Retina
70 x 70 - Menangkan 8.1 Metro tile
72 x 72 - iPad menyentuh hingga iOS6
76 x 76 - iOS7
96 x 96 - GoogleTV
114 x 114 - iPhone retina touch hingga iOS6
120 x 120 - iPhone retina touch iOS7
128 x 128 - Aplikasi Chrome Web Store, Android
144 x 144 - IE10 Metro tile untuk situs yang disematkan, retina iPad hingga iOS6
150 x 150 - Menangkan 8.1 Metro tile
152 x 152 - iPad retina touch iOS7
196 x 196 - Android Chrome
310 x 150 - Menangkan 8.1 Metro tile
310 x 310 - Win 8.1 Metro tile

Mat
sumber
8
Apakah ada referensi untuk daftar ini?
Abdulhameed
81

Saya tidak yakin jika / bagaimana browser skala ikon besar, tetapi The W3C menyarankan 1 berikut :

Format untuk gambar yang Anda pilih harus 16x16 piksel atau 32x32 piksel, menggunakan warna 8-bit atau 24-bit. Format gambar harus salah satu dari PNG (standar W3C), GIF, atau ICO.

1 w3c.org: Cara Menambahkan Favicon ke Situs Anda (Konsep sedang dikembangkan) .

Daniel Vassallo
sumber
Kembali pada tahun 2006 saya sampai pada kesimpulan yang sama (dalam "Favicon Primer" (Apr 2006; oleh hakre) ) tetapi tidak tahu tentang materi W3C 2005 (ya seraching + membaca membantu :)). Terima kasih untuk ringkasannya. Waktu itu saya menulis dan bukan atau tapi itu juga tentang 4bit warna.
hakre
2
Sudah konsep sejak 2005? Oo
mcont
7
Penggunaan ini harus diganti dengan standar HTML5 sekarang. Itu tidak memiliki batasan pada ukuran ikon dan memberikan contoh dengan ikon 32768x32768.
rhgb
1
@ rhgb Terima kasih! Saya telah mencari-cari bingung mengapa sih [current year]saya masih perlu berurusan dengan beberapa batasan omong kosong ketika hal-hal yang dapat Anda lakukan dengan css saja sudah cukup menakjubkan, dan saya hampir melewatkan jawaban Anda. Saya hanya akan menggunakan apa pun yang saya inginkan dan jika sesuatu tidak mendukungnya, itu masalah mereka, sesuai standar.
Sahsahae
63

Sebenarnya, untuk membuat favicon Anda berfungsi di semua browser dengan benar, Anda harus menambahkan lebih dari 10 file dalam ukuran dan format yang benar.

Teman saya dan saya telah membuat Aplikasi hanya untuk ini! Anda dapat menemukannya di faviconit.com

Kami melakukan ini, jadi orang-orang tidak perlu membuat semua gambar ini dan tag yang benar dengan tangan, buat semuanya yang sering mengganggu saya!

PedroHCan
sumber
6

Anda dapat memiliki beberapa ukuran ikon dalam file yang sama. Saya secara rutin membuat favicons ( .icofile) yang 48, 32, dan 16 piksel. Anda dapat menambahkan gambar ukuran apa pun yang Anda inginkan. Pertanyaannya adalah, apakah iPhone akan menggunakan icofile?

icojuga mendukung transparansi, tapi saya tidak yakin apakah ini saluran alpha seperti PNG; mungkin lebih seperti GIF di mana itu aktif atau tidak aktif.

Brad
sumber
1
Saya percaya XP dan lebih tinggi mendukung format seperti PNG (PNG sendiri?) Untuk gambar RGBA. egressive.com/tutorial/… menunjukkan bagaimana Anda dapat menggunakan GIMP untuk memasukkan gambar-gambar semacam itu dalam .icofile.
SamB
1
ICO menggunakan saluran alpha 1-bit sedangkan PNG memiliki 8 bit seperti pada saluran lainnya. ICO akan cukup untuk ikon biasa, tetapi dalam beberapa kasus PNG akan lebih diinginkan karena perbedaan ini.
Steen Schütt
SamB hampir benar dan Time Sheep setengah benar. ICO mendukung gambar PNG untuk disematkan di dalamnya, dan PNG yang disematkan harus berupa gambar RGBA 32-bit.
Cornstalks
2

Menurut Artikel Wikipedia tentang Favicon, Internet Explorer hanya mendukung format ICO untuk favicon.

Saya akan tetap dengan dua ikon berbeda.

Pekka
sumber
2

Favicon tidak harus berukuran 16x16 atau 32x32. Anda dapat membuat favicon yang berukuran 80x80 atau 100x100, pastikan saja kedua nilai memiliki ukuran yang sama, dan jelas jangan membuatnya terlalu besar atau terlalu kecil, pilih ukuran yang masuk akal.

Trevor
sumber
3
maaf tapi ada lebih banyak dari yang disarankan jawaban Anda. Silakan lihat stackoverflow.com/a/45301651/661584 dan baca jika Anda suka - kompleknya yang gila. mungkin membantu. terima kasih
MemeDeveloper
1

Anda perlu file terpisah untuk setiap resolusi yang saya khawatirkan. Ada artikel yang sangat bagus di monitor kampanye yang menjelaskan bagaimana mereka membuat dan menerapkan ikon mereka untuk setiap perangkat iOS juga:

http://www.campaignmonitor.com/blog/post/3234/designing-campaign-monitor-ios-icons/

Richard
sumber
2
Anda dapat memiliki beberapa ukuran ikon dalam file yang sama.
Brad
Terima kasih banyak, artikel yang sangat bagus. Masih sedikit misteri apa yang akan dilakukan perangkat Apple dengan file ico yang memiliki banyak gambar berukuran di dalamnya.
Alex G
1

Seperti yang saya pelajari, tidak ada satu pun dari beberapa solusi itu yang sempurna. Menggunakan generator favicon memang merupakan solusi yang baik tetapi jumlahnya sangat banyak dan sulit untuk dipilih. Saya ingin menambahkan bahwa jika Anda ingin situs web Anda diaktifkan PWA, Anda juga harus menyediakan ikon 512x512 seperti yang dinyatakan oleh Google Devs :

ikon termasuk versi 192px dan 512px

Saya tidak bertemu banyak generator favicon yang menegakkan kriteria itu ( firebase melakukannya , tetapi ada banyak hal yang tidak dilakukannya). Jadi solusinya harus campuran dari banyak solusi lain.

Saya tidak tahu, hari ini di awal tahun 2020 jika menyediakan 16x16, 32x32 masih relevan. Saya kira itu masih penting dalam konteks tertentu seperti, misalnya, jika pengguna Anda masih menggunakan IE untuk beberapa alasan (ini masih terjadi di beberapa perusahaan swasta yang tidak bermigrasi ke browser yang lebih baru karena beberapa alasan)

snoob dogg
sumber