Cara Kerja Format Favicon
Mengetahui cara kerja setiap format membantu Anda men-debug masalah "favicon saya tidak muncul" yang tak terhindarkan.
Check favicons on any website
Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.
Wadah .ico
File .ico adalah header yang diikuti oleh satu atau lebih entri gambar. Setiap entri dapat berupa BMP atau PNG, dan masing-masing memiliki lebar, tinggi, dan kedalaman bit.
Browser mengurai direktori, memilih entri yang cocok dengan ukuran yang diminta, dan mendekode yang itu saja.
PNG di dalam .ico
Untuk ukuran 64×64 ke atas, kompresi PNG memotong ukuran file sebesar 5-10x tanpa kehilangan visual. Generator modern (termasuk milik kami) melakukan ini secara otomatis.
favicon SVG
Favicon SVG adalah file SVG normal. Browser merendernya seperti SVG lainnya, dan blok <style> dapat mengadaptasi warna berdasarkan skema warna pilihan.
Bagaimana browser memilih
Jika Anda menyediakankan beberapa tag <link rel="icon">, browser akan memilih salah satu yang paling cocok dengan permukaannya (tab vs bookmark vs pemasangan). SVG lebih disukai bila didukung; .ico adalah penggantinya.
FAQ
What is inside a .ico file?
A header plus a directory of image entries. Each entry can be BMP or PNG at a specific width and height.
How do browsers choose which favicon to display?
Browsers read all <link rel="icon"> tags and pick the best match for the surface — tab, bookmark, or install prompt. SVG is preferred when supported; .ico is the fallback.
Why use PNG inside an .ico instead of BMP?
PNG compression cuts file size 5–10× at 64×256 with no visible loss, which speeds up page loads.
Can I use only SVG for favicons?
Not safely. Always ship favicon.ico as a fallback for older browsers, Windows shortcuts, and embedders that ignore SVG.