Cara membuat favicon untuk website

Favicon adalah ikon kecil di tab browser, bookmark, layar utama iPhone, dan hasil pencarian Google. Dulu membuatnya berarti harus mengurus belasan ukuran; sekarang cukup empat file untuk mencakup semua platform.

File yang benar-benar Anda butuhkan

favicon.ico berisi 16, 32, dan 48 px — browser lawas, shortcut Windows, crawler Google.
apple-touch-icon.png di 180 px — layar utama iOS.
icon-192.png dan icon-512.png — Android dan web app manifest (situs yang bisa di-install, splash screen).
site.webmanifest — menunjuk ke dua file PNG tadi.

Buat semuanya sekaligus

Gambar logo berbentuk persegi. Bentuk sederhana dengan satu atau dua warna paling mudah terbaca di ukuran 16 px; teks tidak.
Buka Pembuat favicon dan jatuhkan logonya — SVG paling ideal karena setiap ukuran di-rasterisasi dengan tajam; PNG 512 px juga bisa dipakai.
Unduh file ZIP-nya dan salin filenya ke root situs Anda.

Pembuat faviconBuat favicon.ico (16/32/48), apple-touch-icon, dan ikon PNG dari PNG, JPG, WebP, atau SVG. Semua ukuran dalam satu ZIP, dibuat di browser Anda.

Tambahkan ini di <head>:

<link rel="icon" href="/favicon.ico" sizes="any">

<link rel="icon" href="/icon.svg" type="image/svg+xml">

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<link rel="manifest" href="/site.webmanifest">

Masalah yang umum terjadi

Logonya tidak persegi. Generator akan menengahkannya dengan padding transparan; untuk ikon yang lebih pas, crop dulu jadi persegi dengan Potong gambar.
Favicon lama masih muncul. Browser menyimpan cache favicon dengan agresif. Ganti nama filenya atau tambahkan ?v=2 di link-nya.
Tab gelap. Logo hitam jadi tidak terlihat di tema browser gelap. Beri background berwarna solid di belakangnya.

Konversi SVG ke PNG onlineKonversi file vektor SVG ke PNG dalam ukuran apa pun di browser. Atur lebar, pertahankan transparansi, konversi massal, unduh ZIP.

Diterbitkan 2026-09-21