Cara Menambah Favicon dalam HTML
Tiga tag meliputi kebanyakan tapak; lima teg memberi anda persediaan gred PWA. Tutorial ini menerangkan setiap atribut, menunjukkan coretan salin-tampal untuk tindanan biasa, menjawab Soalan Lazim dan membetulkan isu caching yang menjadikan ikon kelihatan tersekat.
Teg minimum
Pengisytiharan sah terkecil ialah satu baris dalam <head>:
<link rel="icon" href="/favicon.ico">
Penyemak imbas menganggap rel="icon" sebagai petunjuk untuk mengambil URL tersebut untuk paparan tab. Laluan relatif akar bermula dengan / bertahan tanpa mengira laluan halaman semasa.
Walaupun dengan teg ini, ramai pelanggan masih menyiasat /favicon.ico secara automatik. Simpan fail di akar tapak untuk permintaan tersirat.
Use our favicon generator, PNG to ICO converter, SVG to ICO converter, and live favicon tester to build and verify your icon set, and read the companion guide for a condensed walkthrough.
Set yang disyorkan moden
Untuk pemaparan yang jelas merentas tab desktop, iOS dan mod gelap, gunakan:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
Pesanan kurang penting daripada kesempurnaan. Penyemak imbas memilih jenis yang disokong terbaik: SVG jika tersedia, sebaliknya bingkai PNG atau ICO yang sepadan.
Tambahkan type="image/svg+xml" pada baris SVG supaya penghidu MIME tidak pernah menyalahlabelkan fail.
Gesaan pemasangan PWA
Pautkan manifes anda: <link rel="manifest" href="/site.webmanifest">.
Di dalam site.webmanifest, isytiharkan ikon dengan src, saiz, jenis dan tujuan. Entri berguna minimum ialah fail 192×192 dan 512×512 PNG.
Penggilap tema pilihan: <meta name="theme-color" content="#0f172a"> menjajarkan bar status Android dengan jenama anda semasa aliran pemasangan.
Contoh salin-tampal
Tapak HTML biasa — tampal di dalam <head>:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
Next.js App Router — tambahkan baris yang sama pada app/layout.tsx di dalam metadata atau blok <head> manual. Fail secara langsung di /public.
Create React App — letak ikon dalam /public dan edit public/index.html. CRA berkhidmat/awam pada akar domain dalam binaan pengeluaran.
Memahami setiap atribut
rel="icon" menandakan calon favicon. rel="apple-touch-icon" ialah ikon skrin utama khusus iOS. rel="manifest" menunjuk ke JSON dengan metadata PWA.
saiz memberitahu penyemak imbas resolusi yang diwakili oleh PNG. Ia diperlukan untuk ikon PNG apabila anda mengisytiharkan berbilang saiz secara eksplisit.
href mesti boleh dicapai dalam pengeluaran. Elakkan hotlinking kepada CDN pihak ketiga untuk favicons — anda mahukan kawalan penuh semasa penjenamaan semula.
Soalan lazim
Bolehkah saya menggunakan URL mutlak dalam href? Ya, tetapi /favicon.ico relatif akar lebih mudah merentas domain pementasan dan pengeluaran.
Adakah saya memerlukan kedua-dua rel="ikon pintasan" dan rel="ikon"? Tidak. rel="icon" adalah standard; jalan pintas sudah usang.
Di manakah sebenarnya <head>? Anak langsung <html>, sebelum <body>. Sesetengah rangka kerja menyuntiknya melalui komponen susun atur.
Patutkah favicons hidup pada CDN? Mereka boleh, tetapi mengemas kini semua <link> URL bersama-sama apabila berhijrah. Laluan relatif akar mengelakkan masalah itu.
Menyelesaikan masalah
Ikon berfungsi pada halaman utama tetapi bukan /blog/slug: anda menggunakan href relatif seperti favicon.ico tanpa garis miring. Gunakan /favicon.ico sebaliknya.
Safari menunjukkan ikon lama: kosongkan data tapak web atau namakan semula fail sekali. Safari menyimpan favicons lebih lama daripada HTML.
HTML yang sah tetapi 404 dalam tab Rangkaian: fail tidak digunakan pada akar pelayan atau kes yang salah (Favicon.ico vs favicon.ico pada Linux).
SVG diabaikan: tiada jenis="image/svg+xml" atau pelayan menyediakan Jenis Kandungan yang salah. Betulkan pemetaan MIME dalam nginx atau Apache.
Peletakan khusus rangka kerja
Vite / Vue / React SPA: letakkan ikon dalam /public dan rujukan /favicon.ico dalam index.html. Pelayan pembangun dan binaan pengeluaran kedua-duanya berkhidmat /awam pada akar domain.
Next.js App Router: tambah ikon pada /app melalui API metadata atau letakkan fail statik di /public. Elakkan pendua tag di kedua-dua tempat.
Nuxt: gunakan /public atau konfigurasikan app.head.link dalam nuxt.config.ts untuk pengurusan teg berpusat merentas laluan.
SvelteKit: aset statik dalam peta statik/ folder ke /. Kemas kini app.html <head> sekali untuk keseluruhan apl.
Astro: direktori awam/ serta komponen Ketua yang dikongsi dalam reka letak anda memastikan setiap halaman mengandungi teg ikon yang sama tanpa drift salin-tampal.
WordPress dan pengguna CMS lain mungkin tidak memerlukan teg manual sama sekali — lihat tutorial WordPress kami jika teras menjana penanda Site Icon untuk anda.
Mengesahkan persediaan HTML anda
Lihat sumber halaman pada pengeluaran, bukan localhost, untuk mengesahkan HTML yang digunakan sepadan dengan repo anda. Talian paip CI kadangkala menyuntik susun atur yang berbeza bagi setiap persekitaran.
Gunakan curl untuk mengambil setiap URL ikon yang dikembalikan dalam <link href>. Status 200 dengan Panjang Kandungan yang betul bermakna laluan adalah nyata, bukan hanya diisytiharkan.
Pengesahan penanda W3C adalah pilihan untuk favicon, tetapi sarang <head> yang tidak sah (teg di dalam <body>) boleh menyebabkan penyemak imbas mengabaikan ikon anda sepenuhnya.
Jalankan audit Lighthouse PWA jika pemasangan penting — ia membenderakan ikon manifes yang tiada walaupun apabila tab kelihatan baik.
Tandai halaman, tutup penyemak imbas sepenuhnya, buka semula dan sahkan bar penanda halaman masih menunjukkan tanda anda. Itu menguji kelakuan cache favicon yang berterusan.
Pengepala keselamatan dan laluan ikon
Content-Security-Policy default-src tidak menyekat muatan favicon dari asal yang sama. URL ikon silang asal memerlukan elaun img-src atau default-src yang jelas.
Integriti Subsumber jarang digunakan pada favicons. Pengehosan asal yang sama kekal sebagai lalai selamat yang paling mudah.
Jika ikon hidup pada subdomain CDN, gunakan URL https:// mutlak dalam href dan pastikan CORS tidak relevan — favicons dimuatkan sebagai imej, bukan ambil.
Elakkan data: URI favicons dalam pengeluaran HTML. Mereka membebankan cache HTML, memintas caching CDN dan merumitkan CSP.
Perintah tag dan pendua
Teg rel=icon pendua dengan bait buangan href yang sama tetapi jarang memecahkan pemaparan. Pendua href bercanggah mengelirukan penyahpepijatan — alih keluar teg lapuk.
Sesetengah tema WordPress mencetak teg Site Icon manakala pemalam menambah set lain. Gunakan Sumber Pandangan untuk mengesan pendua selepas pemasangan pemalam.
Letakkan pautan ikon sebelum blok skrip besar di kepala. Penemuan awal membantu melukis dahulu walaupun ikon adalah muat turun keutamaan rendah.
HTML5 tidak memerlukan garis miring penutup pada elemen kosong. Kedua-dua <link ...> dan <link ... /> mengesahkan.
Legasi dan kes tepi
Komen bersyarat IE sudah mati. Jangan balut tag ikon untuk pelayar usang.
Teg asas dalam kepala mengubah resolusi href relatif. Laluan ikon bermula dengan / adalah kebal; relatif favicon.ico terputus pada laluan bersarang apabila pangkalan ditetapkan.
Shadow DOM dan komponen web tidak mewarisi halaman favicon menjadi akar bayang — ikon peringkat dokumen masih digunakan pada tab.
benaman iframe menunjukkan dokumen terbenam favicon, bukan induk. Setiap bingkai memerlukan tag sendiri jika anda mengawal kedua-duanya.
Ujian fail:// setempat mungkin tidak menyelesaikan /favicon.ico. Gunakan pelayan pembangun setempat untuk tingkah laku ikon yang realistik.
Penanda halaman dan sambungan penyemak imbas tidak boleh menukar tapak anda favicon untuk pengguna lain — hanya krom tempatan anda. Hantarkan tag yang betul di sebelah pelayan.