Ukuran dan Format Favicon yang Benar-Benar Berfungsi

Mengapa ini masih membingungkan

Favicon memiliki salah satu sejarah terpanjang dan paling rumit dari aset web. Dimulai pada 1999 sebagai satu .ico 16×16 yang dicari Internet Explorer pada /favicon.ico, tanpa perlu tag HTML. Setiap platform yang muncul setelahnya — ikon layar utama iOS, ikon adaptif Android, pin ubin Windows, manifest PWA — menambahkan konvensinya sendiri tanpa menggantikan yang lama, karena mengubah perilaku aslinya akan merusak semua situs web yang sudah ada. Hasilnya adalah spesifikasi yang tidak pernah dirapikan, hanya diperluas, dan sebagian besar daftar ukuran yang beredar di web disalin dari masa ketika lebih banyak perluasan tersebut memang masih penting.

Peramban modern juga jauh lebih baik menangani apa pun yang diberikan. Chrome, Firefox, dan Safari dapat mengambil satu ikon yang dapat diskalakan dan membuat render kecil untuk tab. Daftar periksa panjang merupakan perlindungan untuk sistem lama, bukan persyaratan kini, dan sebagian besar aman dilewati untuk situs biasa.

Set yang benar-benar mencakup penggunaan nyata

Tiga berkas dalam praktik mencakup sebagian besar peramban dan perangkat:

• favicon.ico, berisi gambar 32×32 — tetap menjadi cadangan yang diperiksa setiap browser pada akar situs secara default, bahkan tanpa <link> tag tersedia. Format kontainer .ico secara teknis dapat memuat beberapa resolusi, tetapi satu gambar 32px di dalamnya sudah cukup untuk penggunaan browser saat ini.
• PNG 180×180 sebagai apple-touch-icon — yang digunakan iOS saat pengguna menambahkan situs ke layar utama. iOS sama sekali tidak membaca favicon.ico untuk tujuan ini; tanpa file ini, iOS mengambil tangkapan layar halaman, yang terlihat jauh lebih buruk sebagai ikon layar utama.
• Favicon SVG — diskalakan bersih ke ukuran tab dan kepadatan piksel apa pun, serta mendukung media query mode gelap yang dibahas di bawah. Browser modern mengutamakannya ketika SVG dan .ico sama-sama dideklarasikan.

Dalam head dokumen, bentuknya:

Semua di luar ketiganya — ikon PWA 512px, varian ikon adaptif Android, meta tag ubin Windows — hanya penting jika Anda membuat PWA yang dapat dipasang atau secara khusus menargetkan pin ubin Windows. Tambahkan ketika persyaratan itu nyata, bukan untuk berjaga-jaga.

Membuat bagian raster set itu secara manual berarti mengekspor karya sama pada beberapa ukuran dan mengemas .ico. Alat kami Pembuat Favicon melakukannya dari satu gambar sumber: favicon.ico, apple-touch-icon 180px, serta PNG 192 dan 512 saat Anda memang menginginkan manifes. SVG tetap harus berasal dari alat vektor Anda.

Apa yang sebenarnya diminta setiap platform

• Tab peramban desktop merender ikon kira-kira pada 16×16 piksel CSS, diperbesar untuk layar high-DPI. Itulah sebabnya SVG atau PNG kecil yang digambar baik lebih penting daripada gambar sumber besar — tab adalah tampilan ikon terkecil dan paling sering dilihat.
• layar utama iOS meminta apple-touch-icon pada 180×180 (mencakup iPhone terkini dengan kepadatan tertinggi; iOS memperkecil untuk perangkat lama). iOS juga otomatis menerapkan sudut membulat dan, pada beberapa versi, kilap halus — jangan membulatkan sudut sebelumnya pada sumber, agar tidak mengalami pembulatan ganda.
• Layar utama Android / PWA membaca ukuran dari site.webmanifest bukan tag link, biasanya 192×192 dan 512×512, dan mendukung varian "maskable" dengan padding area aman agar bentuk ikon adaptif (lingkaran, persegi membulat, tetesan air) tidak memangkas desain.
• Hasil pencarian (khususnya Google) akan menampilkan favicon kecil di samping entri situs Anda, yang diambil dengan cara yang sama seperti ikon tab peramban, dengan ukuran tampilan yang juga kecil.

site.webmanifest: kegunaannya

A site.webmanifest file adalah dokumen JSON kecil yang menjelaskan situs sebagai aplikasi yang dapat diinstal — nama, warna tema, warna latar, dan daftar ikon dengan ukuran yang dinyatakan. Inilah yang membuat "Tambahkan ke Layar Utama" berubah dari pintasan bookmark menjadi sesuatu yang terlihat dan dibuka seperti ikon aplikasi sungguhan di Android. Jika Anda tidak membuat PWA dan tidak membutuhkan kemampuan instalasi itu, Anda dapat melewatinya sepenuhnya; situs biasa dengan tiga file di atas bekerja baik tanpanya. Jika menambahkannya, tautkan dengan <link rel="manifest" href="/site.webmanifest"> dan referensikan ikon dengan jalur absolut dalam JSON.

Merancang agar terbaca pada 16px

Ikon tab peramban sangat kecil, dan kebanyakan desain favicon gagal bukan karena format berkas, melainkan karena karya sumbernya tidak pernah diperiksa pada ukuran tampilan sebenarnya. Detail yang terbaca jelas pada 512px — tulisan logo, garis halus, gradasi dengan beberapa pita yang terlihat — berubah menjadi noda abu-abu pada 16px.

• Sederhanakan menjadi satu bentuk atau bentuk huruf dominan. Satu glif tebal atau siluet ikon bertahan saat diperkecil; logo terperinci dengan banyak unsur tidak.
• Tingkatkan kontras dan sederhanakan warna. Dua atau tiga warna datar lebih mudah terbaca pada ukuran kecil daripada gradasi yang cenderung melebur menjadi satu warna rata-rata.
• Tebalkan goresan tipis. Garis rambut yang baik pada ukuran penuh dapat hilang sepenuhnya setelah antialias ke kisi 16px.
• Uji dengan benar-benar mengecilkan ekspor ke 16px dan melihatnya, bukan menilai karya ukuran penuh lalu menganggap tetap baik. Ini langkah paling sering dilewati dalam desain favicon.

Mode gelap

Bilah tab peramban dan antarmuka OS dapat gelap atau terang mengikuti tema sistem, dan favicon yang hanya dirancang untuk latar terang dapat menghilang pada bilah tab gelap (atau sebaliknya). Favicon SVG dapat meresponsnya langsung dengan prefers-color-scheme media query dalam blok style yang tertanam pada SVG, mengganti warna fill berdasarkan tema pengguna. Favicon PNG dan ICO tidak dapat melakukannya — keduanya gambar statis — sehingga jika dukungan mode gelap penting, favicon SVG bukan opsional, melainkan satu-satunya format yang mampu melakukannya.

Jika tidak demikian, memilih desain favicon dengan kontras cukup pada putih maupun hampir hitam — biasanya dengan garis tepi tipis atau warna menengah, bukan bergantung pada isian hitam atau putih murni — menangani kebanyakan kasus dengan baik tanpa kompleksitas tambahan.

Mengapa favicon tidak diperbarui, dan cara memperbaikinya

Favicon di-cache secara luar biasa agresif — peramban menganggapnya praktis statis dan tetap menampilkan ikon lama selama berhari-hari atau berminggu-minggu bahkan setelah memuat ulang halaman tanpa cache, karena permintaan favicon tidak terkait dengan pembatalan cache halaman biasa seperti skrip atau stylesheet. Tiga hal yang dapat diandalkan untuk mengatasinya:

1. Ganti nama berkas atau tambahkan string kueri versi — /favicon.ico?v=2 atau mengganti nama menjadi /favicon-v2.ico memaksa permintaan baru karena URL-nya sendiri berubah.
2. Bersihkan cache khusus favicon pada peramban, yang di Chrome terpisah dari pembersihan cache umum (chrome://favicon-internals atau hapus data penjelajahan dengan menyertakan "gambar dan berkas yang disimpan dalam cache").
3. Beri waktu. Bahkan dengan URL baru, beberapa peramban dan mesin pencari mengambil ulang serta menyimpan ulang favicon menurut jadwal sendiri, dan khusus favicon hasil pencarian dapat tertinggal berhari-hari dari situs aktif.

Pertanyaan yang sering diajukan