Cara Menambah Favicon pada HTML
Menambah favicon pada halaman HTML biasa ialah perubahan satu baris — tetapi persediaan moden yang lengkap ialah enam baris dan meliputi pemasangan iOS, Android, mod gelap dan PWA.
Teg tunggal yang dihormati setiap penyemak imbas ialah <link rel="icon" href="/favicon.ico">. Lepaskan favicon.ico pada akar tapak anda dan anda sudah 80% selesai.
Baki 20% — apple-touch-icon, PNG varian, SVG dengan sokongan mod gelap dan manifes web — ialah yang memisahkan ikon lalai daripada pengalaman jenama yang digilap.
Cara ia berfungsi
- 1
Hasilkan pakej favicon anda
Gunakan penjana pakej FetchFavicon — menghasilkan setiap fail yang anda perlukan serta penanda sedia tampal.
- 2
Lepaskan fail pada akar tapak
favicon.ico, apple-touch-icon.png, android-chrome-192/512.png, site.webmanifest.
- 3
Tampalkan coretan ke dalam <head>
Enam <link> tag + satu <meta name="theme-color">.
Cuba sekarang
Dapatkan coretan HTML
Penjana FaviconSoalan lazim
Ke mana perginya tag <link>?+
Di dalam <head>, di mana-mana sahaja — pesanan tidak penting asalkan datang sebelum </head>.
Adakah saya memerlukan kedua-dua .ico dan PNG?+
ya. .ico ialah sandaran universal; PNG memaparkan paling tajam pada skrin DPI tinggi.
Bagaimana pula dengan mod gelap?+
Hantarkan varian SVG yang membenamkan pertanyaan media skema warna pilihan di dalam blok <style>nya.