Cara Menambahkan Favicon ke HTML
Menambahkan favicon ke halaman HTML biasa adalah perubahan satu baris — tetapi pengaturan modern dan lengkap terdiri dari enam baris dan mencakup instalasi iOS, Android, mode gelap, dan PWA.
Tag tunggal yang dihormati oleh setiap browser adalah <link rel="icon" href="/favicon.ico">. Letakkan favicon.ico di root situs Anda dan 80% selesai.
20% sisanya — varian apple-touch-icon, PNG, SVG dengan dukungan mode gelap, dan manifes web — inilah yang membedakan ikon default dari pengalaman merek yang disempurnakan.
Cara kerjanya
- 1
Hasilkan paket favicon Anda
Gunakan generator paket FetchFavicon — menghasilkan setiap file yang Anda perlukan ditambah markup siap tempel.
- 2
Letakkan file di root situs
favicon.ico, apple-touch-icon.png, android-chrome-192/512.png, situs.webmanifest.
- 3
Tempel cuplikan ke <head>
Enam tag <link> + satu <meta name="theme-color">.
Coba sekarang
Dapatkan cuplikan HTML
Pembuat FaviconFAQ
Kemana perginya tag <link>?+
Di dalam <head>, di mana saja — pesanan tidak menjadi masalah selama pesanan datang sebelum </head>.
Apakah saya memerlukan .ico dan PNG?+
Ya. .ico adalah pengganti universal; PNG menghasilkan tampilan paling tajam pada layar DPI tinggi.
Bagaimana dengan mode gelap?+
Kirimkan varian SVG yang menyematkan kueri media skema warna pilihan di dalam blok <style>-nya.