Satu gambar. Setiap layar.

Konverter PNG ke ICO

Ikon kecil. Kesan yang bertahan lama.

Ubah PNG menjadi ICO dengan beberapa ukuran. Pertahankan transparansi, periksa pratinjau kecil, lalu unduh ikon secara lokal.

PNG ICO PWA

Buat paket ikon Anda

Ubah gambar menjadi favicon, ikon aplikasi, dan lainnya.

1Unggah
2Sesuaikan
3Unduh

Menunggu sebuah gambar

Letakkan gambar Anda di sini

PNG · Maksimal 5 MB

Gambar Anda diproses dalam browser web Anda. Ia tidak pernah meninggalkan perangkat Anda.

16 × 16

32 × 32

48 × 48

180 × 180

192 × 192

512 × 512

Sesuaikan ikon Anda

Sesuaikan tampilan agar cocok di setiap layar.

Penyesuaian gambar

Latar belakang

Transparan

Warna polos

#FFFFFF

Jarak dalam6%

Radius sudut0%

Ukuran ICO (boleh pilih beberapa)

256

Ikon maskable

Lihat saat digunakan(unggah untuk melihat pratinjau ikon)

Tab browser

https://example.com

Layar utama iOS

Ikon Anda di sini

PWA / Android

Ikon Anda di sini

Cara membuat favicon dalam 3 langkah

Dari satu gambar ke set lengkap ikon.

1Unggah gambar Anda

Ubah PNG menjadi ICO dengan beberapa ukuran. Pertahankan transparansi, periksa pratinjau kecil, lalu unduh ikon secara lokal.

2Sesuaikan dan lihat pratinjau

Pilih penyesuaian, latar belakang, dan jarak dalam. Periksa hasilnya pada ukuran kecil.

3Unduh dan tambahkan ke situs Anda

Ekspor paket ikon, unggah file, dan tambahkan tautan ikon ke HTML Anda.

Satu logo, siap untuk setiap layar

Lihat di mana file yang dihasilkan digunakan.

Favicon situs web

Situs saya×

16 × 16

32 × 32

Ikon 16 × 16 dan 32 × 32 membantu pengunjung mengenali situs Anda di tab dan bookmark.

iPhone & iPad

Situs saya

180 × 180

Gunakan ikon apple-touch 180 × 180 saat situs ditambahkan ke layar utama.

PWA & Android

Instal aplikasi

192 × 192

512 × 512

192 × 192 dan 512 × 512 adalah ukuran gambar yang umum digunakan dalam manifest aplikasi web.

Apa isi paket ikon Anda?

Set ikon yang siap digunakan 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.webmanifestManifest aplikasi web

Tambahkan ikon ke situs web Anda

Letakkan link ini di 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 paket ikon ke public/ di akar proyek Nuxt. Pertahankan nama file dan letakkan site.webmanifest di samping favicon.ico, bukan di app/.
Tambahkan kode di blok script setup pada app/app.vue. Ganti tautan ikon lama, bangun ulang lalu publikasikan proyek 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 situs Anda. Periksa respons berhasil dan isi gambar atau JSON yang sebenarnya; respons 200 berisi halaman galat HTML tetap berarti jalur salah. Periksa semua URL ikon di manifes.

Jika ikon lama masih tampil, periksa tautan ganda di head, nonaktifkan cache di alat pengembang lalu muat ulang. Periksa juga cache CDN dan service worker jika dipakai. Bandingkan pratinjau 16 dan 32 piksel asli: sederhanakan teks kecil dan garis tipis.

File ini menyediakan ikon dan metadata manifes. File saja tidak menjadikan situs PWA yang dapat dipasang. Contoh memakai akar domain; sesuaikan semua tautan dan jalur ikon manifes untuk subdirektori.

Nuxt 4 · public/ · Nuxt 4 · useHead