Cara menggunakannya

Pilih Huruf dan taip satu atau dua aksara dengan warna anda, atau pilih Imej dan pilih logo (sebaik-baiknya segi empat sama, sekurang-kurangnya 512 px).
Semak pratonton setiap saiz, terutamanya 16 dan 32 px, yang muncul dalam tab pelayar.
Muat turun ZIP dan muat naik failnya ke akar laman web anda.
Tampal tag HTML ke dalam bahagian head halaman anda, dan ubah nama dalam site.webmanifest jika perlu.

Cara ia berfungsi

Pelayar dan peranti mencari ikon di tempat yang berbeza. Set yang dihasilkan di sini merangkumi kes biasa: favicon.ico dengan imej 16, 32 dan 48 px untuk tab pelayar, penanda buku dan perisian lama yang meminta /favicon.ico secara automatik; fail PNG 16 dan 32 px yang dirujuk oleh tag pautan; apple-touch-icon 180 × 180 yang digunakan apabila seseorang menambahkan tapak anda ke skrin utama iPhone atau iPad; dan ikon 192 dan 512 px yang dirujuk daripada site.webmanifest untuk skrin utama Android dan aplikasi web yang boleh dipasang.

Fail favicon.ico menyimpan ikon sebagai imej PNG di dalam bekas ICO, yang boleh dibaca oleh semua pelayar semasa dan Windows Vista atau lebih baharu. Fail ICO dan ZIP dipasang oleh kod dalam halaman ini; tiada apa-apa dihantar ke pelayan.

Saiz kecil memerlukan reka bentuk yang ringkas: pada 16 × 16 piksel, garisan nipis dan teks kecil hilang, jadi huruf tebal atau tanda logo yang dipermudah berfungsi lebih baik daripada logo penuh dengan perkataan. Imej dikecilkan dalam beberapa langkah berkualiti tinggi. apple-touch-icon sentiasa diberi warna latar belakang pepejal kerana iOS mengisi kawasan lut sinar dengan hitam, dan iOS membulatkan sudutnya sendiri.

Selepas memuat naik ikon baharu, pelayar mungkin terus menunjukkan favicon lama untuk seketika kerana pelayar menyimpannya secara agresif dalam cache. Muat semula paksa, atau membuka /favicon.ico secara terus, biasanya membantu.

Contoh

Ikon huruf untuk projek baharu

Menaip "TG" dengan huruf putih pada segi empat sama hijau gelap dengan sudut bulat memberikan ikon bersih yang kekal boleh dibaca pada 16 × 16 px dalam tab pelayar, tanpa memerlukan logo yang direka bentuk.

Ikon daripada logo sedia ada

Logo PNG 1024 × 1024 dengan latar belakang lut sinar, ditetapkan kepada Memuatkan keseluruhan imej, menghasilkan ikon tab lut sinar dan apple-touch-icon pada warna jenama anda.

Logo lebar

Untuk logo teks 1200 × 300, pemangkasan bahagian tengah hanya mengekalkan huruf di tengah. Memuatkan keseluruhan imej mengekalkan semuanya tetapi menjadikannya sangat kecil; logo segi empat sama yang berasingan biasanya kelihatan lebih baik.

Soalan Lazim

Adakah saya masih memerlukan favicon.ico?

Ia masih berguna. Sesetengah pelayar, pembaca suapan dan alat meminta /favicon.ico daripada akar tapak walaupun tanpa tag pautan. Pelayar moden juga menggunakan ikon PNG yang dirujuk dalam HTML.

Di manakah saya perlu meletakkan fail ini?

Muat naik fail tersebut ke folder akar laman web anda, bersebelahan halaman utama, supaya /favicon.ico dan laluan lain dalam HTML berfungsi. Jika anda menggunakan subfolder, ubah laluan dalam tag pautan dan dalam site.webmanifest.

Mengapa favicon lama saya masih dipaparkan?

Pelayar menyimpan cache favicon secara berasingan dan untuk masa yang lama. Cuba muat semula paksa, buka /favicon.ico dalam tab baharu, atau semak dalam tetingkap peribadi. Menamakan semula fail, contohnya favicon-v2.ico, juga memaksa muat semula.

Adakah ini menghasilkan favicon SVG?

Tidak. Ia menghasilkan fail PNG dan ICO, yang berfungsi di semua tempat. Jika anda sudah mempunyai logo SVG, anda boleh menambahnya sendiri dengan tag pautan jenis image/svg+xml sebagai tambahan kepada fail ini.

Privasi

Ikon, fail ICO dan ZIP dicipta dalam pelayar anda. Imej dan teks anda tidak dimuat naik, disimpan atau disertakan dalam analitik.