Imej ke Favicon: Cipta Ikon Laman Web Dari Sebarang Imej

Q: Bagaimana saya merujuk favicon dalam HTML?

Dengan tag yang menunjuk kepada setiap saiz dan format, ditambah pula untuk iOS. Pelayar akan memilih padanan terbaik. Set lengkap tag pautan meliputi setiap platform.

Dikemaskini pada: June 28, 2026. Sokongan favicon pelayar berevolusi; saiz dan format teras di sini meliputi landskap semasa.

Favicon ialah ikon kecil yang muncul dalam tab pelayar, senarai buku tanda, dan skrin utama telefon apabila seseorang menyimpan laman web anda. Menukar imej menjadi favicon bermaksud mencipta jenis fail yang betul pada saiz yang sesuai supaya ikon itu kelihatan jelas di mana sahaja ia muncul — dari tab pelayar 16-pixel hingga ikon Apple Touch 180-pixel. Panduan ini merangkumi saiz yang diharapkan oleh setiap platform, format fail untuk dijana, dan cara mengekalkan kebolehkenalan ikon pada saiz yang sangat kecil.

Jawapan ringkas: cara mencipta favicon daripada imej?

Mula dengan imej sumber berbentuk segi empat sama (atau potong kepada bentuk segi empat sama menggunakan image cropper), saizkan ia ke saiz favicon standard (16px, 32px, 180px, 512px), dan eksport sebagai PNG bersama fail ICO untuk pelayar lama. Rujuk ia dalam <head> HTML anda dengan tag pautan yang sesuai. Uji versi 16px dalam tab pelayar, kerana jika ikon tidak dapat dikenali pada saiz itu, tiada jumlah versi yang lebih besar akan membaikinya. Kekalkan juga versi SVG jika logo adalah vektor, untuk paparan yang tajam pada skrin high-DPI.

Saiz apa yang diperlukan oleh favicon?

Konteks yang berbeza memaparkan favicon pada saiz yang berbeza, dan menyediakan saiz yang betul memastikan ia tajam di mana-mana sahaja.

Size	File	Used for
16x16	ICO / PNG	Tab pelayar (warisan)
32x32	ICO / PNG	Tab pelayar (retina)
180x180	PNG	Ikon Sentuh Apple
192x192	PNG	Skrin utama Android
512x512	PNG	PWA / skrin permulaan
Any	SVG	Pelayar moden, DPI tinggi

Versi 16px adalah yang paling penting — ia adalah apa yang dilihat oleh kebanyakan orang dalam tab.
Ikon Sentuh Apple memerlukan 180px untuk paparan skrin utama yang tajam pada iOS.
SVG melayani pelayar moden pada sebarang resolusi tanpa fail berganda.
Satu ICO boleh mengumpulkan pelbagai saiz untuk sokongan warisan.

Bagaimana Cara Mereka Bentuk Favicon yang Berfungsi pada 16px?

Cabaran sebuah favicon ialah ia mesti boleh dikenali pada 16 piksel, yang sangat kecil. Perincian yang kelihatan bagus pada 512px akan hilang pada 16px, jadi reka bentuk mestilah ringkas.

Gunakan bentuk tunggal yang berani — huruf, tanda logo, ikon ringkas.
Elakkan garis nipis dan teks kecil — ia hilang pada 16px.
Gunakan kontras tinggi supaya bentuk itu jelas kelihatan berlatarkan latar belakang tab.
Uji versi 16px pada saiz sebenar sebelum menerbitkan.

Kesilapan biasa ialah menggunakan logo penuh dengan teks. Pada 16px, teks itu tidak boleh dibaca (illegible), jadi favicon kelihatan seperti kesan kotoran yang kabur. Penyelesaiannya adalah mengekstrak elemen paling mudah dikenali — ikon atau huruf pertama — dan menggunakannya sebagai favicon. Panduan SVG ke PNG meliputi pengeksportan tanda vektor pada saiz yang anda perlukan.

Format fail apa yang perlu anda hasilkan?

Favicon merangkumi beberapa format kerana sokongan pelayar telah berkembang dari masa ke masa, dan meliputi kesemuanya memastikan ikon berfungsi di mana-mana sahaja.

ICO — format warisan, menggabungkan pelbagai saiz, disokong oleh semua pelayar.
PNG — piawaian moden, satu fail bagi setiap saiz.
SVG — vektor, boleh diskalakan ke sebarang saiz, disokong oleh pelayar moden.
Apple Touch PNG — khusus 180x180, untuk ikon skrin utama iOS.

Format	Bila digunakan
ICO	Sokongan pelayar warisan, menggabungkan saiz
PNG	Pelayar moden, fail setiap saiz
SVG	Pelayar moden, fail boleh diskalakan tunggal
Apple Touch PNG	Skrin utama iOS

Hasilkan ICO untuk keserasian warisan, PNG pada setiap saiz untuk sokongan yang luas, dan SVG jika sumber adalah vektor. image converter mengendalikan penjanaan format, dan image cropper mendapatkan segi empat sumber dahulu.

Bagaimana cara merujuk favicon dalam HTML?

Fail yang dijana mesti dirujuk dalam <head> halaman supaya pelayar dapat mencarinya. Tag link memberitahu pelayar fail mana yang perlu digunakan untuk konteks tertentu.

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

ICO meliputi pelayar warisan dengan saiz yang digabungkan.
SVG berfungsi untuk pelayar moden pada sebarang resolusi.
Ikon Apple Touch meliputi simpanan skrin utama iOS.
Letakkan fail di akar tapak untuk keserasian maksimum.

Panduan favicon Mozilla mendokumentasikan tag link dan tingkah laku pelayar, manakala Web.dev app icons guide meliputi standard ikon boleh topeng untuk Android. Uji hasilnya dalam tab pelayar sebenar dan pada skrin utama telefon selepas menyebarkan (deploy), kerana keanehan rendering hanya muncul dalam konteks sebenar.

Merekabentuk favicon untuk mod terang dan gelap

Pelayar dan Sistem Operasi moden bertukar antara mod terang dan gelap, dan favicon yang kelihatan bagus pada tab terang boleh hilang pada tab gelap. PNG latar belakang telus atau SVG dengan warna adaptif mengendalikan kedua-dua konteks ini, kerana ikon tersebut menyesuaikan diri dengan chrome sekeliling berbanding membawa latar belakangnya sendiri.

Cabaran mod	Penyelesaian
Ikon gelap hilang pada tab gelap	Tambah garis luar halus atau gunakan ketelusan
Ikon terang hilang pada tab terang	Sama — garis luar atau warna adaptif
Kebolehbacaan sukar pada 16px	Permudahkan bentuk, tingkatkan kontras

Untuk favicon SVG, anda boleh menggunakan media query prefers-color-scheme di dalam SVG untuk menyajikan warna yang berbeza bagi konteks terang dan gelap, yang merupakan penyelesaian paling bersih. Bagi PNG, latar belakang telus dengan bentuk yang mempunyai kontras dalaman yang cukup berfungsi dengan baik pada kedua-duanya. Matlamatnya ialah favicon itu kelihatan di tab tanpa mengira sama ada pengguna menjalankan mod terang atau gelap, yang semakin menjadi lalai berbanding pengecualian.

Kesilapan favicon biasa

Terlalu banyak perincian — ikon tidak dapat dikenali pada 16px. Permudahkan.
Sumber bukan segi empat sama — potong kepada segi empat sama dahulu atau ikon akan herot.
Tidak ada ikon Sentuh Apple — simpanan iOS menunjukkan tangkapan skrin generik pula.
Tiada SVG — skrin high-DPI memaparkan PNG yang kabur berbanding vektor yang tajam.
Lupa menguji pada 16px — saiz yang paling ramai orang lihat adalah saiz yang paling sering diabaikan.

Favicon itu kecil tetapi ia muncul di mana sahaja tapak web anda diwakili — tab, penanda buku (bookmarks), skrin utama, hasil carian. Ikon yang tajam dan boleh dikenali pada setiap saiz mengukuhkan jenama dengan sekali pandang, manakala favicon yang kabur atau hilang menandakan kekurangan sentuhan akhir. Luangkan masa untuk memastikan versi 16px betul, jana set format dan saiz penuh, dan ikon itu akan mewakili tapak web dengan kemas di mana sahaja ia muncul. Pelaburan ini kecil — hanya satu petang kerja reka bentuk dan eksport — tetapi ia berbaloi setiap kali pengguna melihat tapak web anda dalam tab, penanda buku, atau skrin utama, yang jauh lebih kerap daripada yang disedari oleh kebanyakan pasukan.

Soalan Lazim

Saiz apa yang diperlukan untuk favicon?

Set moden: 16×16, 32×32, 48×48 (klasik), ditambah pula 180×180 (ikon sentuh Apple) dan 192×192 / 512×512 (Android). Satu imej induk menjana keseluruhan set. Pelayar akan memilih saiz yang sesuai mengikut konteks.

Bagaimana saya mereka bentuk favicon yang berfungsi pada 16px?

Kekalkan kesederhanaan — satu bentuk yang berani, kontras tinggi, tiada perincian halus atau teks. Pada 16px, apa-apa yang rumit akan menjadi kabur. Uji reka bentuk pada 16px sebelum membuat komitmen; jika ia tidak jelas di sana, ia terlalu kompleks.

Format fail apa yang patut digunakan oleh favicon?

ICO untuk keserasian warisan (legacy), PNG untuk pelayar moden dan ikon Apple/Android, dan SVG untuk versi bebas resolusi di mana disokong. Jana keseluruhan set; satu format tidak meliputi setiap peranti.

Bagaimana saya merujuk favicon dalam HTML?

Dengan tag <link rel="icon"> yang menunjuk kepada setiap saiz dan format, ditambah pula <link rel="apple-touch-icon"> untuk iOS. Pelayar akan memilih padanan terbaik. Set lengkap tag pautan meliputi setiap platform.

Bolehkah saya menggunakan satu imej untuk setiap saiz favicon?

Ya — satu imej induk segi empat (512×512 atau lebih besar) menjana keseluruhan set, dari 16×16 hingga 512×512. Reka bentuk induk itu agar jelas pada 16px (satu bentuk yang berani) supaya saiz terkecil masih berfungsi. Satu induk, banyak saiz.

Bagaimana saya menguji favicon?

Buka laman web dalam tab pelayar dan semak ikon pada 16px (saiz tab), 32px (bookmark), dan 180px (sentuhan Apple). Jika versi 16px tidak jelas, reka bentuk itu terlalu kompleks — ringkaskan kepada satu bentuk yang berani. Favicon adalah kecil tetapi muncul di mana-mana sahaja, jadi ikon yang tajam dan boleh dikenali pada setiap saiz mengukuhkan jenama dengan sekali pandang.

Apakah fail ICO?

Format bekas warisan yang menyimpan satu atau lebih imej raster pada saiz yang berbeza, digunakan untuk favicon pada pelayar lama (terutamanya Internet Explorer lama). Pelayar moden menggunakan PNG dan SVG, jadi ICO kebanyakannya adalah lapisan keserasian ke belakang. Jana ICO bersama dengan set PNG/SVG anda supaya setiap pelayar, walau sehebat mana pun usianya, mendapat ikon.