Apakah saya masih memerlukan favicon.ico pada tahun 2026?

Ya. Browsers, crawlers, dan feed readers meminta /favicon.ico dari root site Anda berdasarkan konvensi tanpa membaca HTML Anda, jadi file yang hilang berarti 404 dan ikon kosong dalam konteks tersebut. Buat ICO multi-ukuran yang tepat dengan entri 16, 32, dan 48 pixel daripada konversi ukuran tunggal, sehingga tidak ada yang perlu menskalakannya.

Mengapa ikon saya muncul sebagai kotak hitam di iPhone?

iOS mengisi area transparan dari apple-touch-icon dengan warna hitam pekat alih-alih latar belakang netral. Ratakan ikon ke warna latar belakang eksplisit sebelum mengekspor. Generator favicon FileTinker melakukan ini secara otomatis menggunakan warna latar belakang yang Anda pilih. Lewati juga sudut yang dibulatkan sebelumnya – iOS menerapkan masker sudutnya sendiri.

Bisakah saya hanya menggunakan satu favicon SVG dan melewati PNG?

Belum sebagai satu-satunya ikon Anda. Favicon SVG bagus di mana didukung – sangat tajam, kecil, dan mampu beradaptasi dengan mode gelap dengan kueri media tertanam – tetapi dukungannya tidak merata, Safari menjadi pengecualian yang terkenal, dan apa pun yang meminta /favicon.ico berdasarkan konvensi tidak akan menemukan SVG. Kirim SVG sebagai peningkatan di atas set ICO dan PNG, bukan sebagai penggantinya.

Mengapa Android memerlukan ikon 512-pixel ketika tab berukuran 16 pixel?

Ikon manifest melakukan pekerjaan yang berbeda. Versi 192-pixel menjadi ikon layar beranda ketika seseorang menambahkan situs Anda, dan versi 512-pixel digunakan untuk prompt instalasi dan layar splash yang ditampilkan saat aplikasi web yang diinstal diluncurkan, dirender besar pada tampilan berdensitas tinggi. Ikon ini hanya diunduh saat dibutuhkan.

Saya mengganti favicon saya tetapi yang lama masih muncul. Mengapa?

Favicon di-cache secara agresif – browsers menyimpannya jauh lebih lama daripada gambar normal, terkadang selama berminggu-minggu. Periksa di jendela pribadi untuk mengonfirmasi file baru yang diterapkan. Untuk pengunjung biasa, dibutuhkan waktu, meskipun menambahkan string kueri versi ke URL ikon di tag tautan Anda memaksa pengambilan baru.

Ukuran dan Format Favicon di 2026: Yang Sebenarnya Dibutuhkan Situs Anda

5 Juli 2026Waktu baca 7 mnt

Cari saran favicon dan Anda akan menemukan daftar periksa yang menuntut lebih dari dua puluh berkas ikon: PNG untuk setiap generasi iPad, gambar ubin Windows, browserconfig.xml, topeng tab yang disematkan. Sebagian besar dari itu adalah praktik buta yang tersisa dari tahun 2014, untuk platform yang sudah mati atau telah kembali ke ikon standar. Pada tahun 2026 Anda membutuhkan enam berkas gambar, satu manifest, dan sekitar lima baris HTML. Itu mencakup tab browser, bookmark, hasil pencarian Google, layar utama iOS, dan Android termasuk aplikasi web yang terinstal. Panduan ini membahas berkas mana yang penting, mengapa masing-masing ada, apa yang dapat Anda hapus dengan aman, dan cara menghasilkan seluruh set dari satu logo tanpa menginstal apa pun atau mengunggah karya seni Anda ke mana pun.

Di mana ikon Anda benar-benar muncul

Favicon sudah lama bukan hanya sekadar dekorasi tab. Kumpulan gambar kecil yang sama kini digunakan di tempat-tempat yang sangat krusial, masing-masing dengan ukuran dan format yang disukainya.

Tab browser, bookmark, dan riwayat merender ikon Anda pada 16x16 piksel CSS, digandakan menjadi 32x32 pada layar berdensitas tinggi. Google menampilkan favicon di sebelah hasil pencarian, jadi ikon yang hilang atau buram membuat daftar Anda terlihat kurang sah daripada pesaing di atasnya. Ketika seseorang menyimpan situs Anda ke layar utama iPhone, iOS menggunakan apple-touch-icon Anda sebagai ikon aplikasi penuh. Di Android, Chrome menggunakan ikon manifest Anda untuk pekerjaan yang sama, dan jika situs Anda dapat diinstal sebagai aplikasi web, ikon 512-piksel menjadi grafik layar sembur saat dimuat.

Itulah seluruh daftar yang layak untuk didesain. Tile Layar Mulai Windows, siluet tab yang disematkan Safari, dan selusin kepadatan iPad lama tidak ada di dalamnya - lebih lanjut tentang itu di bawah.

Paket 2026: tujuh berkas, lima baris HTML

Berikut adalah semua yang dibutuhkan site normal. Jika daftar periksa memberi tahu Anda untuk menghasilkan lebih dari ini, itu adalah tambahan yang tidak perlu.

File-file masuk ke root site Anda (favicon.ico secara khusus berada di sana). HTML terdiri dari beberapa tag link di bagian head: satu untuk ICO, satu untuk masing-masing dua PNG, satu rel apple-touch-icon, dan satu rel manifest yang menunjuk ke webmanifest.

favicon.ico - satu wadah ICO yang berisi versi 16, 32, dan 48 piksel. Jangkar kompatibilitas; lebih lanjut tentang mengapa ia bertahan di bawah.
favicon-16x16.png dan favicon-32x32.png – PNG yang tajam untuk tab dan bilah bookmark pada tampilan standar dan berdensitas tinggi.
apple-touch-icon.png berukuran 180x180 – ikon layar utama iOS. Satu ukuran sekarang mencakup semua iPhone dan iPad saat ini; iOS menskalakannya ke bawah jika diperlukan.
android-chrome-192x192.png dan android-chrome-512x512.png – direferensikan dari manifest, digunakan untuk layar utama Android, pengalih aplikasi, dan layar splash instalasi.
site.webmanifest – berkas JSON kecil yang mencantumkan dua ikon Android plus nama aplikasi dan warna tema Anda. Diperlukan agar ikon Android terdeteksi dan agar situs dapat diinstal.
Opsional: favicon SVG melalui tag link dengan tipe image/svg+xml. Ia menskalakan dengan sempurna dan dapat mengubah gayanya sendiri untuk tab gelap dengan kueri media tersemat, tetapi tetap simpan fallback PNG dan ICO di sampingnya.

Mengapa favicon.ico menolak untuk mati

ICO adalah format Windows tahun 1990-an, dan meskipun menghilangkannya masih merupakan kesalahan pada tahun 2026. Alasannya adalah bahwa browser, perayap, pembaca RSS, dan banyak scraper meminta /favicon.ico dari root site Anda berdasarkan konvensi, tanpa membaca HTML Anda sama sekali – setiap log server web menunjukkan aliran permintaan tersebut yang stabil. Jika berkasnya hilang, mereka mendapatkan 404 dan ikon Anda muncul kosong dalam konteks tersebut.

Format ini juga memiliki satu trik asli: satu file .ico adalah wadah yang dapat menampung beberapa ukuran sekaligus. favicon.ico yang benar membawa gambar berukuran 16, 32, dan 48 pixel secara internal, dan apa pun yang membacanya akan memilih kecocokan terdekat alih-alih memperbesar gambar yang ukurannya salah menjadi buram. Itulah sebabnya favicon.ico yang dikonversi dari satu file PNG pada satu ukuran merupakan penurunan kualitas - renderan kecil akan diubah ukurannya secara langsung dan kehilangan tepinya.

Jadi aturannya praktis: sajikan favicon.ico multi-ukuran di root untuk semua yang meminta berdasarkan konvensi, dan sajikan PNG 16 dan 32 piksel melalui tag link untuk browser modern, yang lebih menyukainya.

Jebakan iOS: transparansi berubah menjadi hitam

Ikon apple-touch-icon memiliki tepi tajam yang menarik perhatian hampir semua orang setidaknya sekali. iOS tidak menggabungkan ikon transparan ke latar belakang yang bagus — ia mengisi area transparan dengan warna hitam pekat. Logo yang diekspor dengan latar belakang transparan terlihat bagus di tempat lain, namun berubah menjadi kotak hitam dengan logo yang terlihat melayang di layar utama iPhone.

Solusinya adalah meratakan ikon ke warna latar belakang yang eksplisit sebelum diekspor: putih, warna merek Anda, apa pun yang disengaja. iOS kemudian membulatkan sudutnya sendiri, jadi jangan membulatkannya terlebih dahulu – ikon yang sudah dibulatkan akan mendapatkan potongan kedua dan menampilkan potongan gelap di sudut-sudutnya.

Berikan juga ruang bernapas pada tanda: karena iOS menerapkan masker sudutnya sendiri, karya seni yang menyentuh tepi kanvas 180x180 akan terpotong. Menjaga logo di sekitar 80 persen tengah adalah aturan praktis yang aman, dan juga terlihat lebih baik sebagai ikon aplikasi.

Apa yang sudah usang (hapus ini dari pikiran Anda)

Markup favicon lama jarang merusak apa pun, tetapi membebani setiap pemuatan halaman dan membuat pemelihara mencari file gambar yang tidak digunakan. Semua berikut ini dapat dihapus:

browserconfig.xml dan tag meta msapplication-TileColor / TileImage. Keduanya digunakan untuk ubin Layar Mulai Windows 8 dan Internet Explorer 11. Sekarang keduanya sudah tidak ada.
apple-touch-icon-precomposed. Ini menekan efek kilau yang ditambahkan iOS 6 ke ikon. Kilau itu mati dengan iOS 7 pada tahun 2013; rel apple-touch-icon polos adalah semua yang Anda butuhkan.
Tangga ukuran apple-touch-icon: 57, 72, 76, 114, 120, 144, 152. Ini cocok dengan kepadatan iPhone dan iPad lama tertentu. Satu ikon 180x180 mencakup setiap perangkat saat ini.
rel shortcut icon. Kata shortcut adalah keanehan Internet Explorer, bukan standar. rel icon polos telah berfungsi di mana-mana selama lebih dari satu dekade.
SVG mask-icon untuk tab yang disematkan di Safari. Safari modern menggunakan favicon reguler Anda untuk tab yang disematkan, sehingga berkas mask monokrom menjadi beban mati.
Tautan PNG pada 96, 128, 196, 228 piksel untuk perilaku Chrome dan Opera lama. Ikon manifest menggantikan ini di Android; desktop tidak pernah membutuhkannya.

Mendesain tanda yang bertahan pada 16 piksel

Pertanyaan format adalah bagian yang mudah. Bagian sulitnya adalah ikon Anda harus berfungsi pada 16x16, di mana logo 256-piksel menjadi buram. Beberapa aturan membantu.

Sederhanakan secara agresif. Gunakan simbol dari logo Anda, bukan wordmark - teks tidak dapat dibaca di bawah sekitar 32 piksel kecuali itu satu atau dua huruf. Jika merek Anda bersifat tipografi, monogram satu huruf pada warna solid mengungguli logo penuh yang diperkecil setiap saat.

Lebih memilih bentuk tebal dan kontras tinggi daripada detail. Garis tipis menghilang pada ukuran kecil, dan gradien halus menjadi noise. Periksa icon terhadap bilah tab terang dan gelap; tanda navy gelap menghilang dalam tema gelap kecuali memiliki garis luar yang lebih terang, chip latar belakang, atau varian SVG yang menukar warna melalui aturan prefers-color-scheme.

Akhirnya, lihat hasilnya pada zoom 100 persen, bukan diperbesar di alat desain Anda. Render seukuran tab adalah satu-satunya pratinjau yang jujur.

Membuat seluruh paket dari satu logo, di browser

Anda tidak memerlukan Photoshop atau mantra ImageMagick baris perintah untuk semua ini. Generator favicon FileTinker mengambil satu gambar dan menghasilkan paket lengkap yang dijelaskan di atas dalam satu langkah: favicon.ico multi-ukuran dengan entri 16, 32, dan 48 piksel, favicon-16x16.png dan favicon-32x32.png, apple-touch-icon.png 180x180 yang diratakan ke warna latar belakang sehingga tidak akan menjadi hitam di iOS, android-chrome-192x192.png dan android-chrome-512x512.png, site.webmanifest yang menghubungkan ikon Android, dan cuplikan head copy-paste dengan tag tautan yang sesuai. Semuanya tiba sebagai zip tunggal, dan pemrosesan terjadi seluruhnya di browser Anda - logo tidak pernah meninggalkan mesin Anda.

Mulai dari versi logo terbesar dan terbersih yang Anda miliki; 512 piksel atau lebih ideal, karena output terbesar adalah 512x512 dan memperbesar sumber kecil menjadi buram. Jika sumbernya tidak persegi, generator menawarkan kecocokan cover dan contain: cover mengisi bingkai dan memotong luapan, contain menyesuaikan seluruh gambar di dalam dan mengisi sisanya dengan warna latar belakang yang Anda pilih. Untuk kontrol yang tepat atas bagian mana dari logo lebar yang bertahan, buat persegi sendiri terlebih dahulu dengan alat crop, lalu masukkan persegi ke generator.

Pilih warna latar belakang dengan sengaja bahkan jika logo Anda tidak memiliki transparansi - itu adalah apa yang dilihat pengguna iOS di belakang tanda Anda dan apa yang mengisi letterboxing contain. Kemudian unzip paket ke root site Anda, tempel cuplikan ke head Anda, dan deploy. Jika Anda hanya membutuhkan satu .ico cepat untuk proyek sampingan, konversi PNG ke ICO dari konverter gambar menghasilkan ikon satu ukuran dalam hitungan detik, tetapi untuk apa pun yang menghadap publik, paket lengkap sepadan dengan satu menit ekstra.