Ukuran Favicon: 16, 32, 48, 180, 192, dan 512 px

Ukuran favicon untuk website: daftar singkat

Ukuran	File	Tempat dipakai
16 × 16 px	favicon.ico	Tab browser dan bookmark
32 × 32 px	favicon.ico	Tab di layar berkerapatan tinggi, pintasan Windows
48 × 48 px	favicon.ico	Windows dan hasil Google Penelusuran
180 × 180 px	apple-touch-icon.png	Layar utama iPhone dan iPad
192 × 192 px	icon-192.png	Android dan aplikasi web yang diinstal
512 × 512 px	icon-512.png	Layar pembuka dan toko aplikasi untuk aplikasi web

Satu favicon.ico yang berisi 16, 32, dan 48 px, ditambah tiga file PNG, sudah mencakup browser, ponsel, dan mesin pencari. Favicon generator kami membuat semuanya dari satu gambar.

Ukuran favicon dalam piksel untuk Google Penelusuran

Google menampilkan favicon di samping hasil penelusuran. Panduannya mewajibkan favicon persegi minimal 8 × 8 piksel dan menyarankan ukuran lebih besar dari 48 × 48 piksel agar terlihat baik di berbagai tampilan (Google Search Central). Favicon.ico dengan gambar 48 px, atau PNG 192 px yang ditautkan, sudah memenuhi saran tersebut.

Format favicon: ICO, PNG, dan SVG

ICO menampung beberapa ukuran dalam satu file dan menjadi file yang diminta browser di /favicon.ico jika tidak ada ikon yang dideklarasikan. Simpan satu demi kompatibilitas.
PNG dipakai untuk Apple touch icon dan ikon aplikasi yang tercantum di web manifest.
SVG berfungsi sebagai favicon di browser modern dan tetap tajam di setiap ukuran. Tambahkan sebagai ikon ekstra, bukan satu-satunya.

Untuk mengubah PNG yang sudah ada menjadi .ico dengan ukuran pilihan Anda, gunakan konverter PNG ke ICO.

Cara memasang favicon di HTML dalam setiap ukuran

Unggah file ke folder root situs Anda dan tambahkan tag berikut di dalam <head>:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">

Manifest mencantumkan ikon 192 dan 512 px. Hapus baris SVG jika Anda tidak punya versi SVG.

Ukuran favicon di WordPress, Shopify, dan Squarespace

Pembuat situs meminta satu gambar dan membuat ukurannya sendiri. WordPress menyebutnya Ikon Situs (Site Icon) dan meminta gambar persegi minimal 512 × 512 piksel. Shopify dan Squarespace juga menerima gambar persegi di pengaturan merek atau desain. Unggah PNG persegi berukuran besar dan biarkan platform mengubah ukurannya, lalu periksa hasilnya di tab browser.

Pertanyaan tentang ukuran favicon

Favicon adalah apa?

Favicon adalah ikon kecil yang mewakili sebuah situs di tab browser, bookmark, dan hasil penelusuran.

Berapa ukuran favicon terbaik?

Tidak ada satu ukuran saja. Sediakan 16, 32, dan 48 px di favicon.ico, ditambah file PNG 180, 192, dan 512 px.

Bolehkah favicon berbentuk persegi panjang?

Tidak. Browser dan Google mengharapkan gambar persegi. Letakkan logo persegi panjang di kanvas persegi dengan margin.

Mengapa favicon saya terlihat buram?

Browser mengecilkan satu gambar besar menjadi 16 px. Sertakan versi asli 16 dan 32 px di favicon.ico, yang digambar dari versi logo yang disederhanakan.

Mengapa favicon saya tidak berubah?

Browser menyimpan favicon di cache dengan sangat agresif. Periksa di jendela penyamaran, atau tambahkan versi pada nama file setiap kali Anda menggantinya.