Satu imej. Setiap skrin.

Penukar PNG kepada ICO

Ikon kecil. Kesan yang berkekalan.

Tukar PNG kepada ICO berbilang saiz. Kekalkan ketelusan, semak pratonton kecil dan muat turun fail ikon secara setempat.

PNG ICO PWA

Cipta pek ikon anda

Tukar imej kepada favicon, ikon aplikasi dan banyak lagi.

1Muat naik
2Laraskan
3Muat turun

Menunggu gambar

Letakkan imej anda di sini

PNG · Sehingga 5 MB

Imej anda diproses dalam pelayar web anda. Ia tidak pernah meninggalkan peranti anda.

16 × 16

32 × 32

48 × 48

180 × 180

192 × 192

512 × 512

Laraskan ikon anda

Perhalusi rupa agar sesuai dengan setiap skrin.

Padanan imej

Latar belakang

Lutsinar

Warna padu

#FFFFFF

Ruang dalaman6%

Jejari bucu0%

Saiz ICO (boleh pilih beberapa)

256

Ikon boleh topeng

Lihat semasa digunakan(muat naik untuk pratonton ikon)

Tab pelayar

https://example.com

Skrin utama iOS

Ikon anda di sini

PWA / Android

Ikon anda di sini

Cara membuat favicon dalam 3 langkah

Dari satu imej kepada satu set penuh ikon.

1Muat naik imej anda

Tukar PNG kepada ICO berbilang saiz. Kekalkan ketelusan, semak pratonton kecil dan muat turun fail ikon secara setempat.

2Laraskan dan pratonton

Pilih padanan, latar belakang dan ruang dalaman. Semak hasil pada saiz kecil.

3Muat turun dan tambah pada laman web anda

Eksport pek ikon, muat naik fail dan tambah pautan ikon pada HTML anda.

Satu logo, bersedia untuk setiap skrin

Lihat di mana fail yang dihasilkan digunakan.

Favicon laman web

Laman web saya×

16 × 16

32 × 32

Ikon 16 × 16 dan 32 × 32 membantu pelawat mengenali laman anda dalam tab dan penanda buku.

iPhone & iPad

Laman web saya

180 × 180

Gunakan ikon apple-touch 180 × 180 apabila laman ditambah pada skrin utama.

PWA & Android

Pasang aplikasi

192 × 192

512 × 512

192 × 192 dan 512 × 512 ialah saiz imej lazim dalam manifes aplikasi web.

Apakah kandungan pek ikon anda?

Set ikon sedia guna untuk semua platform.

favicon.ico16 × 16, 32 × 32, 48 × 48, 256 × 256
apple-touch-icon.png180 × 180
icon-192.png192 × 192
icon-512.png512 × 512
site.webmanifestManifes aplikasi web

Tambah ikon pada laman web anda

Letakkan pautan ini dalam HTML <head> anda.

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Ekstrak pek ikon ke public/ pada akar projek Nuxt. Kekalkan nama fail dan letakkan site.webmanifest bersebelahan favicon.ico, bukan dalam app/.
Tambah kod dalam blok script setup pada app/app.vue. Gantikan pautan ikon lama, bina semula dan terbitkan projek anda.

useHead({
  "link": [
    {
      "rel": "icon",
      "type": "image/x-icon",
      "href": "/favicon.ico"
    },
    {
      "rel": "apple-touch-icon",
      "sizes": "180x180",
      "href": "/apple-touch-icon.png"
    },
    {
      "rel": "manifest",
      "href": "/site.webmanifest"
    }
  ]
})

Buka /favicon.ico, /apple-touch-icon.png dan /site.webmanifest di laman anda. Semak respons berjaya dan kandungan imej atau JSON sebenar; respons 200 dengan halaman ralat HTML masih menunjukkan laluan salah. Semak setiap URL ikon dalam manifes.

Jika ikon lama kekal, semak pautan berulang dalam head, matikan cache dalam alat pembangun pelayar dan muat semula. Semak juga cache CDN dan service worker jika digunakan. Bandingkan pratonton sebenar 16 dan 32 piksel: ringkaskan teks kecil serta garis halus.

Fail ini menyediakan ikon dan metadata manifes. Fail sahaja tidak menjadikan laman PWA yang boleh dipasang. Contoh menggunakan akar domain; ubah semua pautan dan laluan ikon manifes untuk subdirektori.

Nuxt 4 · public/ · Nuxt 4 · useHead