Cara Membuat Favicon dari Logo (Semua Ukuran Dijelaskan)

Untuk membuat favicon dari logo, mulailah dengan logo persegi (SVG, atau PNG berukuran 512x512 atau lebih besar). Ekspor favicon.ico, idealnya dengan versi 16, 32 dan 48px di dalamnya, lalu tambahkan ikon Apple 180x180 dan PNG 192/512 untuk manifest, dan tautkan semuanya dalam HTML Anda. Itu hanya lima file (ICO, SVG, ikon Apple dan dua PNG manifest), bukan selusin. Berikut cara membuat masing-masing dan tempat penempatannya.

Jawaban singkat: file favicon yang Anda butuhkan

Set minimal modern terdiri dari satu ICO, satu SVG, satu ikon sentuh Apple dan dua PNG manifest. File PNG terpisah 16/32/48 dan gambar ubin Microsoft tidak diperlukan jika Anda memiliki ICO multi-ukuran.

Banyak generator memberikan Anda ZIP berisi selusin file, sebagian besar tidak diminta peramban. Master 512x512 sudah cukup, sehingga Anda tidak pernah perlu memperbesar ukuran.

Penjelasan ukuran favicon: fungsi masing-masing

favicon.ico (16, 32, 48)

ICO adalah wadah yang menyimpan beberapa bitmap dalam satu file. Bundel kualitas umum adalah 16, 32 dan 48px; tambahkan 256 hanya jika Anda peduli dengan ikon Windows berukuran besar.

Masih layak dimiliki. Pengindeks, pembaca umpan dan bot pratinjau tautan umumnya mengambil /favicon.ico dari akar situs secara default. Chromium berperilaku berbeda: dalam pengujian permintaan yang diterbitkan, ia mengambil /favicon.ico hanya ketika halaman tidak mendeklarasikan ikon. Dengan SVG yang dideklarasikan, ia hanya meminta SVG, dan lebih memilih ICO daripada tautan PNG mandiri.

Lewati PNG 32x32 mandiri. Beberapa panduan mencantumkannya, tetapi pengujian itu menunjukkan bahwa file tersebut tidak digunakan ketika ICO hadir. Pengujian hanya mencakup Chromium, sehingga perilaku Firefox dan Safari belum diuji.

favicon.svg

Favicon SVG berfungsi di Chrome 80+, Firefox 41+ dan Edge. Dukungan Safari lebih baru dan tidak konsisten, dan favicon SVG tidak berfungsi di Safari pada iOS. Anggap SVG sebagai pelengkap, bukan pengganti ICO.

apple-touch-icon (180x180)

180x180 adalah ukuran Retina iPhone (60pt pada 3x). Satu file 180px sudah cukup: iOS menyesuaikan skalanya untuk perangkat lain, termasuk iPad.

Ikon manifest (192 dan 512)

Android Chrome dan aplikasi web terinstal membaca ikon dari manifest aplikasi web. File 192px adalah ikon peluncur dan file 512px adalah ikon instalasi/splash.

Kebutuhan Google Search

Google membaca ikon dari halaman utama Anda. Format favicon valid apa pun berfungsi, termasuk ICO, PNG dan SVG. Harus persegi dan minimal 8x8px. Google merekomendasikan ukuran lebih besar dari 48x48, dalam kelipatan 48, dan Anda mendapatkan satu ikon per hostname. Jika ikon tidak sesuai, Google menggantinya dengan globe generik.

Siapkan logo Anda sebelum diekspor

Persegi, besar dan transparan

Sumber terbaik adalah SVG. Jika tidak, gunakan PNG persegi berukuran 512x512 atau lebih besar. Hanya turunkan ukuran: mengubah dari 1024px ke 16px menjaga detail tepi, mengubah dari 32px ke 16px tidak, dan memperbesar hanya membuat hasilnya buram.

Jika logo Anda tidak persegi, potong atau tambahkan area kosong (padding) terlebih dahulu dengan alat crop dan resize gambar Tool Cloud.

Pertahankan transparansi PNG dan gunakan sRGB. Jangan flatten atau tambahkan latar belakang "sekadar berjaga-jaga".

Bisakah favicon berupa JPG? Ya, tetapi PNG atau SVG lebih bersih. JPG tidak memiliki transparansi, sehingga konversi JPG ke ICO menghasilkan kotak padat, dan artefak kompresi terlihat pada ukuran sangat kecil.

Sederhanakan untuk 16 piksel

Logo lengkap dengan tagline berubah menjadi buram di tab peramban. Yang berhasil:

• Satu tanda tebal dengan kontras kuat
• Dua atau tiga warna datar
• Maksimal satu atau dua karakter tebal, tanpa wordmark

Uji pada ukuran sebenarnya. Jika Anda tidak dapat mengenalinya dalam setengah detik, sederhanakan lagi.

Tips: gunakan dua gambar untuk ICO terbaik

Untuk kualitas maksimal, gunakan karya seni yang disederhanakan untuk ukuran 16 dan 32, dan karya seni lebih detail untuk 48 dan 256. Buat dua ICO, lalu gunakan yang disederhanakan sebagai favicon.ico dan yang detail untuk pintasan Windows. Ini opsional, dan satu logo yang disederhanakan dengan baik sudah cukup untuk sebagian besar situs.

Konversi logo Anda ke ICO dan paket lainnya

Opsi 1: buat paket favicon

Buka Favicon Generator Tool Cloud, unggah logo persegi Anda dan unduh ZIP ukuran favicon standar. Gunakan file yang sesuai dengan tabel di atas, dan buat file yang hilang (seperti SVG atau PNG 192/512) secara terpisah. Abaikan file apa pun yang tidak akan dirujuk oleh HTML Anda.

Opsi 2: konversi logo ke satu ICO

Jika Anda hanya menginginkan favicon.ico, gunakan Image to ICO converter. Unggah logo Anda dan konversi, lalu ganti nama hasilnya menjadi favicon.ico. Periksa ukuran apa yang terkandung dalam ICO; jika tidak ada versi 16 atau 32px, gunakan generator di atas sebagai gantinya.

Membuat PNG 180, 192 dan 512

Ubah ukuran master persegi Anda menjadi 180x180, 192x192 dan 512x512 dan beri nama apple-touch-icon.png, icon-192.png dan icon-512.png.

Untuk ikon Apple, gunakan latar belakang solid dengan logo di tengah dan diberi jarak. iOS tidak mendukung transparansi dan membulatkan sudut sendiri, jadi jangan membulatkannya sebelumnya. Selalu sediakan latar belakang solid Anda sendiri daripada mengandalkan apa yang diisi oleh iOS.

Tempat setiap file dalam HTML Anda

Cuplikan HTML

Unggah semua file ke akar situs Anda, lalu tambahkan ini ke <head>. Atribut sizes mengikuti tulisan tentang bagaimana Chrome memilih ikon:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#ffffff">

Beberapa catatan:

• Gunakan rel="icon". rel="shortcut icon" adalah warisan; "shortcut" tidak terdaftar dan redundan.
• Peramban memilih berdasarkan tipe, bukan posisi, sehingga urutan tidak terlalu kritis. Atribut type="image/svg+xml" memungkinkan peramban yang tidak mendukung SVG untuk melewatinya dan menggunakan ICO.
• Berikan ukuran konkret pada ICO dan tambahkan sizes="any" pada SVG. Menambahkan any pada ICO dapat membuat Chrome lebih mengutamakan file tersebut daripada SVG.

Manifes aplikasi web

{
  "name": "Your Site",
  "short_name": "Site",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Syarat pemasangan di Chrome memerlukan ikon berukuran 192px dan 512px. Hindari penggunaan "purpose": "any maskable" pada satu file saja. Untuk ikon maskable, buat file terpisah dengan grafis logo berada di zona aman di tengah (sekitar 409x409 dari kanvas 512).

Tambahkan favicon di WordPress, Squarespace, Shopify, dan Wix

Platform mengubah nama menu, jadi periksa apa yang ditampilkan dasbor Anda.

• WordPress: Tampilan, Sesuaikan, Identitas Situs, Ikon Situs. Unggah PNG berukuran 512x512.
• Squarespace: Desain, Ikon Browser. PNG persegi berukuran 300x300 berfungsi (ICO juga diterima).
• Shopify: Pengaturan Tema, Favicon. Unggah PNG persegi berukuran 512x512.
• Wix: Pengaturan, Pengaturan situs web, Favicon (ini mungkin memerlukan paket premium).

Mengapa favicon Anda terlihat buram atau tidak diperbarui

Ikon buram atau kotak solid

Blur biasanya berasal dari penskalaan raster kecil atau logo terlalu detail pada 16px. Perbaiki dengan SVG plus 32px atau lebih besar dalam ICO, dan jangan pernah melakukan penskalaan dari 16x16 ke atas. Kotak solid di belakang logo Anda berarti sumbernya tidak memiliki transparansi, seringkali berupa JPG.

Ikon lama masih ditampilkan

Peramban menyimpan cache favicon selama beberapa hari atau minggu. Coba langkah-langkah berikut secara berurutan:

1. Lakukan hard refresh pada halaman.
2. Buka /favicon.ico secara langsung dan segarkan ulang di sana.
3. Tambahkan string kueri, seperti /favicon.ico?v=2.
4. Periksa di jendela penyamaran.
5. Konfirmasikan bahwa file mengembalikan HTTP 200, dan bersihkan cache CDN Anda.

Ikon layar beranda iOS disimpan dalam cache per pintasan, sehingga pintasan yang ada tidak akan berubah dan pengguna harus menambahkan situs kembali. Untuk rebranding, gunakan nama file baru.

Google Search tidak menampilkannya

Pembaruan memakan waktu beberapa hari hingga beberapa minggu, dan mengubah URL ikon dapat menunda proses tersebut. Pastikan halaman utama Anda merujuk ke ikon dengan rel="icon" dan memenuhi aturan ukuran di atas. Tidak ada batas keras dalam KB yang terdokumentasi; aturan Google berkaitan dengan dimensi.

Dalam praktiknya

Mulailah dari master persegi berukuran 512px atau lebih, lalu sederhanakan untuk ukuran tab. Unggah file-file tersebut, lalu tempelkan cuplikan HTML dan manifes ke situs Anda, dan periksa kembali apakah tautan manifes sudah ada. Terakhir, lihat hasilnya pada 16px: jika tanda tidak jelas, sederhanakan lagi.

Pertanyaan yang sering diajukan

Apakah saya masih membutuhkan favicon.ico di tahun 2026?

Ya. Peramban, pembaca umpan, dan bot pratinjau tautan meminta /favicon.ico dari akar situs tanpa memandang tag HTML Anda, sehingga ini adalah asuransi murah. Bungkus 16, 32 dan 48px dalam satu file.

Bisakah favicon berupa JPG?

Secara teknis ya, tetapi PNG atau SVG memberikan hasil yang jauh lebih bersih. JPG tidak memiliki transparansi dan artefak kompresi, serta foto membawa terlalu banyak detail untuk piksel 16x16.

Ukuran berapa yang seharusnya digunakan favicon untuk Google Search?

Google memerlukan gambar persegi dengan ukuran minimal 8x8px dan merekomendasikan ukuran lebih besar dari 48x48px. SVG tidak didukung di sana, jadi simpan ICO atau PNG yang dideklarasikan dengan rel=icon pada halaman utama Anda.

Apakah saya perlu memisahkan file PNG 16x16, 32x32 dan 48x48?

Umumnya tidak. ICO multi-ukuran mencakup ukuran tersebut, dan pengujian permintaan Chromium menemukan bahwa PNG mandiri tidak digunakan ketika ICO hadir. Firefox dan Safari tidak diuji.

Mengapa favicon baru saya tidak muncul?

Peramban menyimpan cache favicon secara agresif selama beberapa hari atau minggu. Coba refresh keras, buka /favicon.ico secara langsung, tambahkan string kueri ?v=2, atau periksa di jendela penyamaran.