Checklist aset Favicon & PWA 2025 — Manifest, ikon, sinyal SEO

Diterbitkan: 18 Sep 2025 · Waktu baca: 3 mnt · Redaksi Unified Image Tools

Masih banyak situs dengan kekurangan pada manifest atau ikon. Empat masalah umum: ukuran kurang, referensi manifest per‑locale salah, theme‑color tidak konsisten, dan jalur PWA vs favicon tercampur. Periksa dengan urutan berikut agar luput lebih kecil.

1) Set ikon minimum

• 16px/32px: tab/simpan (ICO bisa)
• 192/512: instalasi PWA (PNG disarankan)
• Untuk Safari pinned tab, sediakan SVG monokrom
• Uji transparansi/jarak pada tema gelap/terang di perangkat nyata

2) Manifest per‑locale yang dilokalkan

• Di tiap locale (mis. /id/manifest.webmanifest) terjemahkan name/short_name/description
• Pastikan start_url dan scope mengarah ke root locale (di /id bukan /en)
• Di HTML layout, referensikan <link rel="manifest" href="/id/manifest.webmanifest">

3) Warna tema dan konsistensi

• Samakan theme_color di manifest dengan <meta name="theme-color"> di HTML
• Cek keterbacaan di gelap/terang (jangan sampai ikon tenggelam)
• Sediakan apple-touch-icon minimal 180px; cek sudut membulat

4) Sinyal SEO dan perantaan HTTP

• Hindari path ikon 404 (beda path Dev/Prod)
• Jangan blokir ikon/manifest di robots.txt
• Content-Type harus application/manifest+json

Otomatisasi dengan tools

• Pembuatan ikon massal: Generator favicon
  • Menghasilkan 16/32/192/512 dari logo sumber; pratinjau jarak
• Perakitan manifest per‑locale: Paket Favicon + Manifest
  • Mengisi name/short_name dan memeriksa start_url/scope

Jebakan operasional

• Hanya manifest.webmanifest root yang direferensikan → lokalisasi tidak berlaku
• Pada SPA, start_url bisa 200 namun di luar scope Service Worker
• Origin berbeda (staging/prod): OGP relatif → 404 (cek juga sitemap)

5) Alur verifikasi pra‑produksi

1. Tinjau artefak (/icons/ dan setiap manifest.webmanifest per locale)
2. Jalankan Lighthouse untuk PWA/Best Practices (temukan kurang/rerefensi salah lebih dini)
3. Di iOS/Safari, uji “Tambahkan ke layar beranda” (tepi/margin apple-touch-icon)
4. Di Android/Chrome, cek perilaku instal (warna latar splash, nama)
5. Verifikasi 404/Content‑Type di tab Network DevTools

6) Service Worker dan cache

• Di produksi aktif; saat pengembangan sebaiknya nonaktif/tidak didaftarkan

• Samakan kebijakan skipWaiting (manual vs. prompt pembaruan)

• Dokumentasikan pembersihan cache lama (penamaan/versi)

Catatan: Di situs ini, pada mode pengembangan, SW lama dide‑register otomatis. Dalam operasi, pola “prompt pembaruan → persetujuan pengguna” lebih aman.

7) Monitoring dan regresi

• Di CI, periksa keberadaan/hash berkas hasil (kekurangan/referensi usang)
• Bandingkan diff kolom manifest per locale (name/short_name/description/start_url/scope)
• Awasi blokir/kelalaian via robots/sitemap (Search Console/Lighthouse)

8) FAQ

• T. Perlu ukuran lain selain 16/32/192/512?
  • J. Tidak wajib, tapi Windows/Android lama kadang pakai 48/96/144. Mulai minimal, perluas sesuai produk.
• T. Favicon SVG?
  • J. Dukungan meningkat; tetap sediakan PNG/ICO untuk kompatibilitas. SVG monokrom terpisah untuk Safari pinned tab.
• T. Lokalisasi manifest seperti teks UI?
  • J. Ya, namun batas panjang name/short_name berbeda per platform; tetapkan kebijakan singkatan.

9) Alur kerja praktis (E2E)

1. Tetapkan pedoman logo sumber (jarak, ukuran minimum, tema gelap/terang)
2. Buat 16/32/192/512 dengan Generator favicon
3. Bangun manifest per locale dengan Paket Favicon + Manifest
4. Di layout, referensikan <link rel="icon"> dan <link rel="manifest"> per locale
5. Tinjau keterbacaan gelap/terang; beri outline jika perlu
6. Di CI, cek keberadaan/Content‑Type/link; ukur PWA dengan Lighthouse
7. Setelah rilis, pantau lewat Search Console dan log

Jadikan urutan ini template dan lampirkan ke PR agar kualitas terjaga tanpa ketergantungan individu.