Sat Jun 27 2026 20:00:00 GMT-0400 (北美东部夏令时间)
Gambar ke Favicon: Buat Ikon Situs Web dari Gambar Apa Pun
Konversi gambar apa pun menjadi favicon untuk situs web Anda: ukuran ICO, PNG, SVG, dan ikon sentuh Apple. Langkah nyata, ukuran yang diharapkan setiap platform, dan tetap tajam di 16px.
Terakhir diperbarui: June 28, 2026. Dukungan favicon browser berkembang; ukuran dan format inti di sini mencakup lanskap saat ini.
Favicon adalah ikon kecil yang muncul di tab browser, daftar bookmark, dan layar beranda ponsel ketika seseorang menyimpan situs Anda. Mengubah gambar menjadi favicon berarti membuat jenis file yang tepat pada ukuran yang tepat sehingga ikon terlihat tajam di mana pun ia muncul — dari tab browser 16-pixel hingga ikon Apple Touch 180-pixel. Panduan ini mencakup ukuran yang diharapkan setiap platform, format file untuk dibuat, dan cara menjaga agar ikon tetap dapat dikenali pada ukuran kecil.
Jawaban cepat: bagaimana membuat favicon dari gambar?
Mulailah dengan gambar sumber berbentuk persegi (atau potong menjadi persegi dengan image cropper), ubah ukurannya ke ukuran favicon standar (16px, 32px, 180px, 512px), dan ekspor sebagai PNG ditambah file ICO untuk browser lama. Referensikan di <head> HTML Anda dengan tag tautan yang sesuai. Uji versi 16px di tab browser, karena jika ikon tidak dapat dikenali pada ukuran itu, tidak peduli berapa banyak versi yang lebih besar, itu tidak akan memperbaikinya. Simpan juga versi SVG jika logo adalah vektor, untuk rendering yang tajam pada layar high-DPI.
Ukuran apa yang dibutuhkan favicon?
Berbagai konteks menampilkan favicon pada ukuran yang berbeda, dan menyediakan ukuran yang tepat menjaganya tetap tajam di mana pun.
| Size | File | Used for |
|---|---|---|
| 16x16 | ICO / PNG | Browser tab (legacy) |
| 32x32 | ICO / PNG | Browser tab (retina) |
| 180x180 | PNG | Apple Touch icon |
| 192x192 | PNG | Android home screen |
| 512x512 | PNG | PWA / splash |
| Any | SVG | Modern browsers, high-DPI |
- Versi 16px adalah yang paling penting — ini yang dilihat kebanyakan orang di tab.
- Apple Touch icon membutuhkan 180px untuk tampilan layar beranda iOS yang tajam.
- SVG melayani browser modern pada ukuran apa pun tanpa banyak file.
- Satu ICO dapat mengemas beberapa ukuran untuk dukungan legacy.
Bagaimana cara mendesain favicon yang berfungsi pada 16px?
Tantangan dari favicon adalah bahwa ia harus dapat dikenali pada 16 piksel, yang sangat kecil. Detail yang terlihat bagus pada 512px menghilang pada 16px, jadi desainnya harus sederhana.
- Gunakan bentuk tunggal dan tebal — huruf, tanda logo, ikon sederhana.
- Hindari garis tipis dan teks kecil — mereka menghilang pada 16px.
- Gunakan kontras tinggi sehingga bentuknya terbaca melawan latar belakang tab.
- Uji versi 16px pada ukuran sebenarnya sebelum dipublikasikan.
Kesalahan umum adalah menggunakan logo lengkap dengan teks. Pada 16px, teks tidak dapat dibaca, jadi favicon terlihat seperti noda buram. Perbaikannya adalah mengekstrak elemen yang paling mudah dikenali — ikon atau huruf pertama — dan menggunakannya sebagai favicon. Panduan SVG ke PNG mencakup ekspor tanda vektor pada ukuran yang Anda butuhkan.
Format file apa yang harus Anda buat?
Favicon mencakup beberapa format karena dukungan browser berkembang seiring waktu, dan mencakup semuanya memastikan ikon berfungsi di mana saja.
- ICO — format legacy, mengemas banyak ukuran, didukung oleh semua browser.
- PNG — standar modern, satu file per ukuran.
- SVG — vektor, dapat diskalakan ke ukuran apa pun, didukung oleh browser modern.
- Apple Touch PNG — khusus 180x180, untuk ikon layar beranda iOS.
| Format | Kapan digunakan |
|---|---|
| ICO | Dukungan browser legacy, mengemas ukuran |
| PNG | Browser modern, file per ukuran |
| SVG | Browser modern, satu file skala |
| Apple Touch PNG | Layar beranda iOS |
Buat ICO untuk kompatibilitas legacy, PNG pada setiap ukuran untuk dukungan luas, dan SVG jika sumbernya adalah vektor. Image converter menangani pembuatan format, dan image cropper mendapatkan persegi sumber terlebih dahulu.
Bagaimana cara mereferensikan favicon di HTML?
File yang dihasilkan harus direferensikan di <head> halaman agar browser menemukannya. Tag tautan memberi tahu browser file mana yang akan digunakan untuk konteks apa.
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
- ICO mencakup browser legacy dengan ukuran yang dikemas.
- SVG melayani browser modern pada resolusi apa pun.
- Apple Touch icon mencakup penyimpanan layar beranda iOS.
- Letakkan file di root situs untuk kompatibilitas maksimum.
Panduan favicon Mozilla mendokumentasikan tag tautan dan perilaku browser, dan Web.dev app icons guide mencakup standar ikon maskable untuk Android. Uji hasilnya di tab browser nyata dan di layar beranda ponsel setelah menerapkan, karena keanehan rendering hanya muncul dalam konteks aktual.
Mendesain favicon untuk mode terang dan gelap
Browser dan OS modern beralih antara mode terang dan gelap, dan favicon yang terlihat bagus di tab terang bisa menghilang di tab gelap. PNG latar belakang transparan atau SVG dengan warna adaptif menangani kedua konteks, karena ikon beradaptasi dengan chrome di sekitarnya daripada membawa latar belakangnya sendiri.
| Tantangan Mode | Solusi |
|---|---|
| Ikon gelap hilang di tab gelap | Tambahkan garis luar halus atau gunakan transparansi |
| Ikon terang hilang di tab terang | Sama — garis luar atau warna adaptif |
| Keterbacaan sulit pada 16px | Sederhanakan bentuk, tingkatkan kontras |
Untuk favicon SVG, Anda dapat menggunakan media query prefers-color-scheme di dalam SVG untuk menyajikan warna yang berbeda untuk konteks terang dan gelap, yang merupakan solusi paling bersih. Untuk PNG, latar belakang transparan dengan bentuk yang memiliki cukup kontras internal berfungsi secara dapat diterima pada keduanya. Tujuannya adalah agar favicon terbaca di tab terlepas dari apakah pengguna menjalankan mode terang atau gelap, yang semakin menjadi default daripada pengecualian.
Kesalahan favicon umum
- Terlalu banyak detail — ikon tidak dapat dikenali pada 16px. Sederhanakan.
- Sumber bukan persegi — potong menjadi persegi terlebih dahulu atau ikon akan terdistorsi.
- Tidak ada Apple Touch icon — penyimpanan iOS menunjukkan tangkapan layar generik sebagai gantinya.
- Tidak ada SVG — layar high-DPI merender PNG buram alih-alih vektor yang tajam.
- Lupa menguji pada 16px — ukuran yang paling sering dilihat orang adalah yang paling sering diabaikan.
Favicon kecil tetapi muncul di mana pun situs Anda direpresentasikan — tab, bookmark, layar beranda, hasil pencarian. Ikon yang tajam dan dapat dikenali pada setiap ukuran memperkuat merek secara sekilas, sementara favicon yang buram atau hilang menandakan kurangnya sentuhan akhir. Luangkan waktu untuk membuat versi 16px benar, buat set ukuran dan format penuh, dan ikon akan mewakili situs dengan bersih di mana pun ia muncul. Investasinya kecil — satu sore pekerjaan desain dan ekspor — tetapi terbayar setiap kali pengguna melihat situs Anda di tab, bookmark, atau layar beranda, yang jauh lebih sering daripada yang disadari sebagian besar tim.
Pertanyaan yang sering diajukan
Ukuran apa yang dibutuhkan favicon?
Set modern: 16×16, 32×32, 48×48 (klasik), ditambah 180×180 (ikon Apple touch) dan 192×192 / 512×512 (Android). Satu gambar master menghasilkan seluruh set. Browser memilih ukuran yang tepat per konteks.
Bagaimana saya mendesain favicon yang berfungsi pada 16px?
Jaga agar tetap sederhana — satu bentuk tebal, kontras tinggi, tanpa detail halus atau teks. Pada 16px, apa pun yang rumit menjadi noda. Uji desain pada 16px sebelum berkomitmen; jika tidak terbaca di sana, itu terlalu kompleks.
Format file apa yang harus digunakan favicon?
ICO untuk kompatibilitas legacy, PNG untuk browser modern dan ikon Apple/Android, dan SVG untuk versi independen resolusi di mana didukung. Buat set lengkap; satu format tidak mencakup setiap perangkat.
Bagaimana cara mereferensikan favicon di HTML?
Dengan tag <link rel="icon"> yang menunjuk ke setiap ukuran dan format, ditambah <link rel="apple-touch-icon"> untuk iOS. Browser memilih pasangan terbaik. Set lengkap tag tautan mencakup setiap platform.
Bisakah saya menggunakan satu gambar untuk setiap ukuran favicon?
Ya — satu master persegi (512×512 atau lebih besar) menghasilkan seluruh set, dari 16×16 hingga 512×512. Rancang master agar terbaca pada 16px (satu bentuk tebal) sehingga ukuran terkecil masih berfungsi. Satu master, banyak ukuran.
Bagaimana cara menguji favicon?
Buka situs di tab browser dan periksa ikon pada 16px (ukuran tab), 32px (bookmark), dan 180px (Apple touch). Jika versi 16px tidak terbaca, desainnya terlalu kompleks — sederhanakan menjadi satu bentuk tebal. Favicon kecil tetapi muncul di mana-mana, jadi ikon yang tajam dan dapat dikenali pada setiap ukuran memperkuat merek secara sekilas.
Apa itu file ICO?
Format wadah legacy yang menampung satu atau lebih gambar raster pada berbagai ukuran, digunakan untuk favicon pada browser lama (terutama Internet Explorer lama). Browser modern menggunakan PNG dan SVG, jadi ICO terutama adalah lapisan kompatibilitas mundur. Buat ICO bersama dengan set PNG/SVG Anda sehingga setiap browser, betapapun lamanya, mendapatkan ikon.
Gunakan alat gratis sambil mengikuti panduan.
Lanjutkan membaca
Tue Mar 24 2026 20:00:00 GMT-0400 (北美东部夏令时间)
Cara Menambahkan Tanda Air pada Foto (Perlindungan Hak Cipta)
Tambahkan tanda air pada foto untuk melindungi hak cipta: penempatan sudut vs pola ubin vs pusat samar, cara batch-watermark, dan pertimbangan antara perlindungan serta kualitas gambar.
Thu Mar 19 2026 20:00:00 GMT-0400 (北美东部夏令时间)
Cara Membuat Efek Duotone pada Foto (Panduan Desain)
Pelajari cara membuat efek duotone pada foto: bagaimana pewarnaan dua warna bekerja, pasangan warna terbaik, cara menerapkannya di Canva, Photoshop, atau ImageMagick, dan penggunaannya.
Thu Mar 12 2026 20:00:00 GMT-0400 (北美东部夏令时间)
Panduan SEO Gambar 2026: Merayap, Peringkat, dan Dikutip
Alur kerja SEO gambar 2026 yang praktis untuk file yang dapat dirayapi, alt text, nama file, schema, pengiriman CDN, Core Web Vitals, dan visibilitas GEO.