Apakah saiz favicon yang anda perlukan pada 2026? Set yang ideal

Pada 2026, set favicon yang ideal ialah: sebuah favicon.ico yang mengandungi imej 16, 32 dan 48 px, sebuah PNG 96x96 (untuk Google Search), favicon SVG pilihan, sebuah apple-touch-icon.png 180x180, dan PNG 192x192 dan 512x512 (serta satu maskable 512) yang diisytiharkan dalam manifes aplikasi web. Jubin Windows dan saiz Apple lama hanya diperlukan jika anda mesti menyokong peranti yang sangat lama. Segala-galanya di bawah menerangkan sebabnya, lengkap dengan jadual saiz, HTML sedia guna dan kesilapan lazim yang perlu dielakkan.

Landskap favicon dahulunya berserabut: setiap pelayar dan sistem pengendalian meminta saiznya sendiri, lalu terhasillah blok <head> sepanjang 20 baris yang terkenal itu. Kini kebanyakannya sudah lapuk. Pelayar moden mengubah skala satu ikon yang bagus, iOS mahukan satu saiz, dan Android membaca manifest. Artikel ini membezakan apa yang benar-benar diperlukan daripada apa yang sekadar bagus untuk ada.

Jawapan ringkas: set fail favicon yang ideal

• favicon.ico (16, 32, 48 px dalam satu fail) di akar laman. Pelayar, pembaca suapan dan banyak alat masih meminta /favicon.ico secara automatik.
• favicon.svg (pilihan tetapi disyorkan) untuk paparan tajam pada sebarang saiz dan sokongan mod gelap.
• PNG 16x16, 32x32 dan 96x96 sebagai sandaran yang jelas. Versi 96 px membantu Google Search, yang memerlukan gandaan 48 px.
• apple-touch-icon.png pada 180x180, legap, tanpa ketelusan.
• PNG 192x192 dan 512x512 dalam manifest.json, serta ikon maskable 512x512 untuk Android.
• Teg meta theme-color untuk mewarnakan UI pelayar pada mudah alih.
• Jubin Windows (70, 150, 310 px) dengan browserconfig.xml hanya untuk Windows lama dan laman yang disematkan dalam IE11.

Jadual saiz favicon: tujuan, nama fail dan keutamaan

Gunakan jadual ini sebagai senarai semak. "Wajib" bermaksud laman biasa akan kelihatan rosak atau tidak siap tanpanya; "Disyorkan" bermaksud peningkatan kualiti yang jelas; "Pilihan" bermaksud kegunaan khusus atau lama.

favicon.ico: 16, 32 dan 48 px dalam satu fail

Fail ICO ialah bekas yang menyimpan beberapa bitmap. favicon.ico yang baik mengandungi imej 16x16, 32x32 dan 48x48 supaya pelayar atau OS boleh memilih yang paling hampir. Letakkannya di akar domain anda (https://example.com/favicon.ico). Walaupun HTML anda menuju ke tempat lain, banyak perangkak, pembaca RSS dan pelayar lama masih meminta URL tepat itu, jadi memilikinya mengelakkan gangguan 404 dalam log anda.

Jangan sekadar menamakan semula PNG kepada .ico. Kebanyakan pelayar bertolak ansur, tetapi sesetengah alat menolaknya dan anda kehilangan faedah berbilang resolusi. Eksport ICO yang sebenar.

Favicon PNG: 16, 32 dan 96 px

Pautan PNG dengan sizes yang jelas membolehkan pelayar memilih bitmap terbaik tanpa menghuraikan ICO. Pada praktiknya 32x32 meliputi tab DPI tinggi, dan 16x16 hampir berlebihan hari ini. Saiz 96x96 wajar ditambah kerana Google Search memaparkan favicon di sebelah hasil carian dan memerlukan ikon segi empat sama yang saiznya gandaan 48 px (48x48, 96x96, 144x144 dan seterusnya). Fail 96 px memberi Google sumber yang lebih tajam berbanding 48 px apabila ia mengecilkan skala untuk hasil mudah alih.

Petua reka bentuk: pada 16 px, butiran halus akan hilang. Gunakan bentuk yang tebal dan ringkas, kontras tinggi serta teks yang sedikit atau tiada langsung. Anda boleh melaras dan pratonton ikon anda dalam editor MakeFav sebelum mengeksport.

Favicon SVG dan mod gelap

Favicon SVG ialah satu fail kecil yang kekal tajam pada sebarang ketumpatan skrin. Pelayar berasaskan Chromium dan Firefox menyokongnya. Sokongan Safari secara sejarahnya terhad, jadi jangan sekali-kali bergantung pada SVG sahaja: kekalkan sandaran ICO dan PNG.

Kelebihan terbesarnya ialah penemaan. Oleh sebab SVG boleh mengandungi CSS, anda boleh menyesuaikan ikon dengan skema warna pengguna menggunakan prefers-color-scheme:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .bg { fill: #0f172a; }
    .fg { fill: #ffffff; }
    @media (prefers-color-scheme: dark) {
      .bg { fill: #ffffff; }
      .fg { fill: #0f172a; }
    }
  </style>
  <rect class="bg" width="32" height="32" rx="6"/>
  <circle class="fg" cx="16" cy="16" r="8"/>
</svg>

Perhatikan bahawa media query itu mencerminkan tema pelayar atau OS, iaitu yang digunakan oleh bar tab. Ia tidak mengikut butang togol tema pada laman web anda sendiri.

Satu keanehan yang diketahui: apabila ICO dan SVG kedua-duanya disenaraikan, Chrome mungkin memilih ICO. Mengisytiharkan ICO dengan sizes="32x32" dan menyenaraikan SVG selepasnya menjadikan Chrome mengutamakan SVG, seperti ditunjukkan dalam kod di bawah.

Apple touch icon: 180x180 dan saiz lama

Apabila pengguna menambah laman anda ke skrin utama iOS atau iPadOS, Safari menggunakan apple-touch-icon. Hari ini satu PNG 180x180 px sudah memadai: iOS mengecilkan skalanya untuk peranti dan iPad yang lebih lama. Namakannya apple-touch-icon.png dan letakkan di akar; iOS malah mencari fail itu secara lalai jika tiada teg link.

Peraturan untuk ikon Apple:

• Tiada ketelusan. iOS mengisi piksel lutsinar dengan warna hitam, jadi logo lutsinar sering bertukar menjadi gumpalan hitam. Tambah warna latar belakang pepejal.
• Tiada sudut bulat. iOS menggunakan topeng bulatnya sendiri. Sediakan segi empat sama penuh.
• Jauhkan kandungan penting daripada tepi sekali, kerana sudut akan dipotong.

Bila anda memerlukan saiz lama (57, 72, 76, 114, 120, 144, 152, 167)? Hanya jika anda menyokong iOS 6 atau lebih awal, atau mahukan kawalan piksel tepat bagi setiap peranti untuk iPad Pro (167 px) dan iPad (152 px). Bagi hampir setiap laman pada 2026, fail 180x180 sahaja sudah mencukupi. Persediaan keserasian maksimum di bawah memasukkan beberapa saiz untuk kelengkapan.

Ikon Android dan PWA: 192, 512 dan maskable

Chrome pada Android dan pelayar lain yang menyokong PWA membaca ikon daripada manifes aplikasi web, bukan daripada <link rel="icon">. Untuk kebolehpasangan, anda memerlukan sekurang-kurangnya PNG 192x192 dan 512x512. Ikon 192 px digunakan pada skrin utama dan pelancar aplikasi; ikon 512 px muncul pada skrin percikan dan dialog pemasangan.

Ikon maskable dan zon selamat

Ikon adaptif Android boleh dipangkas menjadi bulatan, squircle atau bentuk lain bergantung pada peranti. Ikon maskable direka supaya selamat dipangkas: kandungan penting mesti berada dalam zon selamat, iaitu bulatan di tengah dengan diameter 80% daripada imej (jejari bersamaan 40% daripada sisi). Untuk fail 512x512, ini bermakna logo anda perlu berada dalam bulatan berdiameter kira-kira 410 px, dan warna latar belakang dilanjutkan ke keempat-empat tepi supaya tiada ruang kosong kelihatan selepas penopengan.

Isytiharkan ikon maskable sebagai entri tersendiri dengan "purpose": "maskable". Elakkan "any maskable" pada satu fail: pelapik yang diperlukan untuk penopengan kelihatan terlalu kecil apabila ikon dipaparkan tanpa topeng.

Contoh manifest.json

{
  "name": "Example App",
  "short_name": "Example",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0f172a",
  "icons": [
    {
      "src": "/web-app-manifest-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/web-app-manifest-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/maskable-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

Sajikan fail ini sebagai application/manifest+json (atau application/json) dan pautkannya daripada setiap halaman dengan <link rel="manifest" href="/manifest.json">. Sesetengah projek menamakannya site.webmanifest; nama tidak penting, yang penting ialah pautannya.

Jubin Windows dan browserconfig.xml

Windows 8.1 dan 10 membenarkan pengguna menyematkan laman ke menu Start, dan IE11 serta Edge lama membaca imej jubin daripada browserconfig.xml. Saiz yang lazim ialah 70x70 (kecil), 150x150 (sederhana), 310x150 (lebar) dan 310x310 (besar). Edge berasaskan Chromium menggunakan manifest dan favicon biasa sebaliknya, jadi ini ialah ciri lama. Sertakannya hanya jika khalayak anda masih termasuk persediaan Windows yang lebih lama, contohnya dalam persekitaran korporat.

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/mstile-70x70.png"/>
      <square150x150logo src="/mstile-150x150.png"/>
      <wide310x150logo src="/mstile-310x150.png"/>
      <square310x310logo src="/mstile-310x310.png"/>
      <TileColor>#0f172a</TileColor>
    </tile>
  </msapplication>
</browserconfig>

theme-color: mewarnakan UI pelayar

Teg meta theme-color memberitahu pelayar mudah alih (dan sesetengah pelayar desktop) warna yang perlu digunakan untuk bar alamat atau bar tajuk. Ia bukan favicon, tetapi ia tergolong dalam set penjenamaan yang sama. Anda boleh menyediakan nilai berasingan untuk mod cerah dan gelap:

<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

Persediaan moden minimum berbanding keserasian maksimum

Persediaan moden minimum (disyorkan untuk kebanyakan laman)

Lima fail meliputi lebih 99% penggunaan dunia sebenar: favicon.ico, favicon.svg, apple-touch-icon.png (180x180), dan dua ikon manifest (192 dan 512). Tambah PNG 96x96 jika keterlihatan di Google Search penting, dan ikon maskable jika anda melancarkan PWA.

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

Persediaan keserasian maksimum

Pilih ini apabila anda melayani khalayak luas atau perusahaan, atau apabila anda mahu setiap klien yang mungkin dilindungi. Ia menambah saiz PNG yang jelas, saiz Apple lama, jubin Windows dan warna tema.

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Classic and modern browser icons -->
  <link rel="icon" href="/favicon.ico" sizes="32x32">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">

  <!-- Apple -->
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">

  <!-- Android / PWA -->
  <link rel="manifest" href="/manifest.json">
  <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
  <meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

  <!-- Windows (legacy) -->
  <meta name="msapplication-config" content="/browserconfig.xml">
  <meta name="msapplication-TileColor" content="#0f172a">

  <title>Example</title>
</head>

Perhatikan laluan relatif akar yang bermula dengan /. Ia berfungsi pada setiap kedalaman halaman, yang membawa kita kepada kesilapan yang paling lazim.

Kesilapan favicon yang lazim dan cara membetulkannya

1. Laluan yang salah

Pautan seperti href="favicon.ico" diselesaikan secara relatif kepada URL semasa, jadi ia berfungsi pada / tetapi rosak pada /blog/post/. Gunakan URL relatif akar (/favicon.ico) atau mutlak. Semak juga bahawa fail benar-benar wujud: buka setiap URL terus dalam pelayar dan pastikan ia memulangkan HTTP 200, bukan ubah hala ke halaman 404 atau dinding log masuk.

2. Atribut sizes yang tiada atau salah

Tanpa sizes, pelayar terpaksa memuat turun ikon untuk memeriksanya, dan mungkin memilih yang salah. Sentiasa isytiharkan sizes pada pautan PNG dan pastikan ia sepadan dengan dimensi piksel sebenar. Fail berlabel 32x32 yang sebenarnya 64x64 menyebabkan hasil yang tidak konsisten.

3. Pencache yang agresif

Pelayar menyimpan cache favicon untuk tempoh yang lama, selalunya bebas daripada cache halaman. Selepas penjenamaan semula, ikon lama mungkin kekal selama beberapa hari. Tukar nama fail atau tambah rentetan pertanyaan versi (/favicon.ico?v=2) dan kemas kini teg link. Muat semula paksa sering tidak menyegarkan ikon tab; membuka URL ikon terus dan memuat semulanya biasanya berkesan.

4. Imej bukan segi empat sama

Favicon mestilah segi empat sama. Logo segi empat tepat akan diregangkan, dipangkas atau diberi jalur hitam secara tidak dapat diramal. Reka tanda segi empat sama khusus, seperti huruf awal atau simbol, dan bukannya mengecilkan wordmark yang lebar.

5. Apple touch icon lutsinar bertukar hitam

iOS mengisi ketelusan dengan hitam. Berikan ikon 180x180 latar belakang legap dan jangan bulatkan sudut terlebih dahulu.

6. Ikon maskable tanpa zon selamat

Jika logo menyentuh tepi ikon maskable, Android akan memotongnya. Pastikan ia berada dalam bulatan 80% di tengah dan isi seluruh kanvas dengan warna latar belakang.

7. Menyekat ikon daripada perangkak

Jika robots.txt melarang laluan favicon anda, Google tidak dapat mengambilnya dan akan memaparkan ikon glob generik dalam hasil carian. Ingat juga bahawa Google memerlukan favicon pada hos yang sama dengan halaman dan hanya menyegarkannya sekali-sekala, jadi perubahan mungkin mengambil masa berhari-hari atau berminggu-minggu untuk muncul.

8. Terlupa pautan manifest atau purpose

Manifest yang tidak dipautkan, atau yang tiada ikon 192 dan 512 px, menghalang gesaan pemasangan dalam Chrome. Sahkannya dalam alat pembangun pelayar anda di bawah tab Application.

Jana keseluruhan set dengan satu klik

Mencipta sedozen fail secara manual dalam editor imej, kemudian menukar kepada ICO dan menulis manifest, adalah meletihkan dan mudah tersilap. MakeFav menjana semua fail di atas daripada satu imej, teks atau emoji: favicon.ico berbilang saiz, PNG, SVG, Apple touch icon, PNG 192/512, ikon maskable, jubin Windows, manifest.json dan browserconfig.xml, serta coretan HTML sedia tampal, semuanya dalam satu muat turun ZIP. Anda boleh memperhalusi latar belakang, pelapik dan bentuk dalam editor, mengesahkan laman sedia ada dengan penyemak favicon, dan mengautomasikan penjanaan melalui sumber pembangun.

Senarai semak penempatan

1. Muat naik semua fail ke akar laman anda.
2. Tampal coretan HTML ke dalam <head> setiap halaman (atau susun atur kongsi anda).
3. Pastikan laluan relatif akar dan memulangkan HTTP 200.
4. Semak mod cerah dan gelap, pemasangan skrin utama iOS dan pemasangan Android.
5. Jalankan penyemak untuk mengesan saiz yang tiada atau tidak sepadan.
6. Pecahkan cache dengan rentetan versi jika anda telah menggantikan ikon lama.

Soalan lazim

Adakah saya masih memerlukan favicon.ico pada 2026?

Ya. Walaupun pelayar moden menerima PNG dan SVG, banyak perangkak, pembaca suapan, klien e-mel dan pelayar lama masih meminta /favicon.ico secara terus. ICO berbilang saiz dengan imej 16, 32 dan 48 px ialah fail kecil yang mengelakkan ikon hilang dan ralat 404.

Apakah saiz favicon untuk Google Search?

Google memerlukan favicon segi empat sama yang saiznya gandaan 48 px, sekurang-kurangnya 48x48. PNG 96x96 ialah pilihan selamat, dan SVG turut disokong. Google juga memerlukan fail itu boleh dirangkak, jadi jangan sekatnya dalam robots.txt. Kemas kini boleh mengambil masa berhari-hari atau berminggu-minggu untuk muncul.

Adakah 180x180 mencukupi untuk Apple touch icon?

Bagi hampir semua laman, ya. iOS dan iPadOS mengecilkan skala PNG 180x180 untuk setiap peranti semasa. Saiz yang lebih lama (57 hingga 152 px) hanya penting untuk versi iOS yang sangat lama. Ingat untuk menggunakan latar belakang legap supaya ikon tidak bertukar hitam.

Apakah ikon maskable dan adakah saya memerlukannya?

Ikon maskable ialah PNG 512x512 yang direka untuk bentuk ikon adaptif Android. Kandungan pentingnya berada dalam bulatan berdiameter 80% di tengah, dan latar belakang memenuhi seluruh segi empat sama. Anda memerlukannya hanya jika anda menawarkan PWA yang boleh dipasang, tetapi ia menjadikan ikon kelihatan asli dan bukannya terletak di dalam bulatan putih.

Mengapa favicon lama saya masih dipaparkan selepas saya menukarnya?

Pelayar menyimpan cache favicon secara berasingan dan untuk tempoh yang lama. Namakan semula fail atau tambah rentetan pertanyaan versi seperti ?v=2, kemas kini teg link, kemudian buka URL ikon terus dan muat semulanya. Enjin carian mungkin mengambil masa lebih lama untuk menyegarkan salinan mereka sendiri.