Penjana favicon untuk laman web

Semua ikon yang diperlukan laman web anda, dijana daripada logo anda dan sedia dimuat naik.

Alat lain: JPEG ke JPG Mampatkan JPG Mampatkan PNG Mampatkan WebP Ubah saiz gambar Crop gambar Gabung gambar Gabung PDF Mampatkan PDF Pisah PDF Ekstrak gambar daripada PDF Putar PDF

Pilih gambar PNG, JPG, WebP atau SVG anda

Satu fail pada satu masa, sehingga 20 MB.

Muatkan dalam segi empat sama

Muatkan Seluruh gambar Penuhkan Potong tepinya

Ikon berbentuk segi empat sama. Jika gambar anda bukan segi empat sama, pilih sama ada dipaparkan sepenuhnya (dengan jidar lutsinar) atau memenuhi segi empat itu.

Warna latar

Untuk ikon Apple, yang tidak boleh lutsinar, dan sebagai warna tema pada Android.

Fail anda dipadam secara automatik selepas penukaran, dan selewat-lewatnya sejam selepas dimuat naik. Cara kami mengendalikan fail anda

Jana favicon lengkap untuk laman web anda daripada logo: ikon pada tab pelayar, ikon skrin utama iPhone dan Android, manifest dan kod HTML yang memautkannya. Muat naik gambar PNG, JPG, WebP atau SVG dan muat turun fail ZIP yang mengandungi semuanya, tanpa akaun dan tanpa tera air.

Cara menjana favicon

Pilih logo atau ikon anda dalam PNG, JPG, WebP atau SVG; sebaik-baiknya segi empat sama dan sekurang-kurangnya 512 piksel.
Pilih sama ada gambar dipaparkan penuh atau memenuhi segi empat, serta warna latar ikon Apple.
Klik “Jana favicon” dan muat turun fail ZIP.
Muat naik fail ke folder akar laman web, dan tampal kod dalam head.html ke tag head halaman anda.

Kandungan pakej

Fail	Kegunaan
`favicon.ico`	Ikon tab klasik, dengan saiz 16, 32 dan 48 piksel dalam satu fail. Pelayar mencarinya walaupun anda tidak memautkannya.
`favicon-16x16.png` dan `favicon-32x32.png`	Ikon untuk tab dan penanda halaman dalam pelayar moden.
`apple-touch-icon.png`	Ikon 180 piksel yang digunakan iPhone dan iPad apabila laman web anda ditambah ke skrin utama.
`android-chrome-192x192.png` dan `android-chrome-512x512.png`	Ikon untuk Android dan aplikasi web yang boleh dipasang.
`site.webmanifest`	Manifest yang menyatakan ikon Android dan warna laman web anda.
`head.html`	Tag yang memautkan ikon dari halaman anda.

Cara memasangnya di laman web

Nyahzip fail dan muat naik semua fail, kecuali head.html, ke folder akar laman web anda (tempat laman utama berada).
Salin tag ini, yang juga ada dalam head.html, ke dalam tag head halaman anda:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Jika mahu, tulis nama laman web anda dalam name dan short_name dalam site.webmanifest.

Pelayar menyimpan favicon dalam cache: jika anda tidak melihat yang baharu serta-merta, muat semula halaman sepenuhnya atau tunggu sebentar.

Muatkan atau penuhkan

Semua ikon berbentuk segi empat sama. Jika gambar anda tidak, anda boleh memuatkannya supaya dipaparkan penuh dengan jidar lutsinar, atau biarkan ia memenuhi segi empat dan memotong lebihan di tepi. Untuk logo melintang bertulisan, biasanya lebih baik menggunakan simbol logo sahaja, di-crop menjadi segi empat sama.

Ikon Apple tidak boleh lutsinar: iOS akan mengisi latarnya dengan hitam. Oleh itu kami membuatnya dengan warna latar yang anda pilih, yang juga digunakan sebagai warna laman web anda di Android. Ikon lain mengekalkan lutsinar.

Tip untuk hasil yang baik

Mulakan dengan gambar besar, sekurang-kurangnya 512 × 512 piksel, atau lebih baik SVG: ikon kecil dikira daripadanya.
Kekalkan ringkas: pada 16 piksel, teks tidak boleh dibaca dan butiran halus tidak kelihatan. Simbol atau huruf awal dengan warna berkontras jauh lebih berkesan.

Jika anda hanya perlukan fail .ico, anda boleh tukar PNG anda ke ICO.

Had

Satu gambar pada satu masa, sehingga 20 MB dan 100 megapiksel.
Kami tidak mengubah laman web anda: anda perlu memuat naik fail dan menambah tag sendiri, atau meminta pengurus laman web melakukannya.

Soalan lazim

Berapa besar gambar diperlukan untuk membuat favicon?

Semakin besar semakin baik: sekurang-kurangnya 512 × 512 piksel atau SVG. Semua ikon, dari 512 hingga 16 piksel, dikira daripadanya.

Di mana saya muat naik fail favicon?

Ke folder akar laman web anda, folder yang sama dengan laman utama. Kemudian tampal tag daripada head.html ke dalam tag head halaman anda.

Mengapa saya tidak melihat favicon baharu dalam pelayar?

Kerana pelayar menyimpan favicon dalam cache. Muat semula halaman sepenuhnya, buka dalam tetingkap peribadi, atau tunggu sebentar sehingga dikemas kini.

Mengapa ikon Apple berlatar warna?

Kerana iOS tidak menyokong lutsinar pada ikon skrin utama dan akan mengisi latar dengan hitam. Kami membuatnya dengan warna latar pilihan anda supaya kelihatan baik.

Bolehkah saya buat favicon untuk laman web WordPress?

WordPress mempunyai pilihan sendiri, ikon laman (Site Icon), dalam bahagian Sesuaikan penampilan atau tetapan umum bergantung pada versi dan tema: anda muat naik gambar segi empat sama dan saiznya dijana secara automatik. Pakej alat ini untuk laman web di mana anda boleh memuat naik fail dan menyunting kod.