Panduan

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.

Check favicons on any website

Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.

Install Chrome Extension

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. 1

    Hasilkan pakej favicon anda

    Gunakan penjana pakej FetchFavicon — menghasilkan setiap fail yang anda perlukan serta penanda sedia tampal.

  2. 2

    Lepaskan fail pada akar tapak

    favicon.ico, apple-touch-icon.png, android-chrome-192/512.png, site.webmanifest.

  3. 3

    Tampalkan coretan ke dalam <head>

    Enam <link> tag + satu <meta name="theme-color">.

Cuba sekarang

Dapatkan coretan HTML

Penjana Favicon

Soalan 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.

Alat berkaitan

Lagi panduan

Panduan