Buat favicon dari gambar, teks, atau emoji: semua ukuran plus HTML untuk ditempel.
Terakhir diperbarui
Coddy mengajarimu dengan menulis kode sungguhan di browser: pelajaran interaktif, umpan balik instan, dan bantuan AI saat kamu buntu.
*Favicon* adalah ikon kecil yang muncul di tab browser, bookmark, daftar riwayat, dan layar utama iOS / Android saat seseorang menyimpan situsmu. Hal kecil ini ternyata sangat memengaruhi kesan sebuah proyek: favicon sungguhan membedakan kotak placeholder dari produk yang sudah jadi.
Browser modern meminta favicon dalam beberapa ukuran dan format berbeda. Ikon tab dan bookmark butuh PNG 16×16 atau 32×32. Safari di iOS butuh apple-touch-icon.png berukuran 180×180. Fitur Add to Home Screen di Android butuh 192×192 dan 512×512 di dalam web manifest. Browser lama dan beberapa integrasi masih mengharapkan favicon.ico multi-resolusi. Memotong semuanya satu per satu dengan tangan itu pekerjaan yang merepotkan, dan favicon generator menyelesaikannya dalam satu klik.
Generator ini berjalan sepenuhnya di browsermu. Gambar yang kamu unggah didekode ke dalam <canvas> secara lokal, setiap ukuran output dirender di sebelahnya, dan seluruh paket (PNG, ICO, web manifest, README, dan potongan HTML) dikemas menjadi .zip tanpa mengunggah apa pun.
favicon.ico adalah format kontainer yang bisa menampung beberapa ukuran (16, 32, 48) sehingga pemanggil lama selalu menemukan yang dibutuhkan.apple-touch-icon.png dan entri di manifest.webmanifest), jadi keduanya harus ada.Pakai **Teks** untuk monogram 1 sampai 3 karakter, **Emoji** untuk ikon satu glyph, atau **Gambar** untuk menjatuhkan PNG, JPEG, atau SVG. Mode Gambar adalah titik awal terbaik kalau kamu sudah punya logo.
Pilih warna latar (dan warna teks untuk monogram). Pilih **Persegi**, **Membulat**, atau **Lingkaran**. Persegi membulat cocok dengan cara iOS memotong ikon di layar utama, jadi terasa alami.
Nama situs menjadi meta tag application-name dan short_name di manifest.webmanifest untuk PWA. Pakai nama merek yang akan dilihat pengguna di bookmark browser.
Gulir baris pratinjau untuk memastikan ikon masih terbaca di 16px dan 32px (ukuran di tab). Kalau desainnya sulit dibaca sekecil itu, sederhanakan sumbernya: lebih sedikit karakter atau potongan yang lebih rapat.
Klik **Unduh paket favicon (.zip)** untuk mendapatkan semua file output sekaligus. Letakkan file-filenya di root situsmu, lalu tempel potongan HTML ke <head> milikmu, dan selesai.
Setiap unduhan berisi file di bawah ini. Potongan HTML menghubungkan semuanya. Kalau kamu hanya butuh sebagian, simpan yang cocok dengan platform yang kamu dukung.
| File | Ukuran | Dipakai oleh | Catatan |
|---|---|---|---|
favicon.ico | 16, 32, 48 | Tab browser (fallback lama) | Kontainer ICO multi-resolusi: setiap browser masih meminta URL ini. |
favicon-16x16.png | 16×16 | Ikon tab browser | Dipakai di layar high-DPI lewat <link rel="icon" sizes="16x16">. |
favicon-32x32.png | 32×32 | Tab browser + bookmark | Ikon tab utama di layar retina. |
favicon-48x48.png | 48×48 | Tile situs Windows, taskbar | Juga dibundel di dalam favicon.ico untuk pemanggil lama. |
apple-touch-icon.png | 180×180 | Add to Home Screen di Safari iOS | iOS memakai tangkapan layar sebagai fallback kalau file ini tidak ada, jadi selalu sertakan. |
android-chrome-192x192.png | 192×192 | Layar utama Android | Dirujuk dari manifest.webmanifest. |
android-chrome-512x512.png | 512×512 | Prompt instal PWA + splash | Wajib untuk PWA yang bisa diinstal. |
site.webmanifest | - | Metadata instal PWA | Berisi daftar ikon, nama, dan warna tema. Ditautkan lewat <link rel="manifest">. |
Ketik 1 sampai 3 huruf (misalnya **Co**, **C**, atau **JS**), pilih warna merek, lalu pilih **Membulat** untuk siluet yang ramah iOS.
Monogram paling mudah dibaca di 16px karena tidak ada detail yang hilang. Pakai satu huruf kapital tebal atau pasangan dua huruf yang rapat, dan pastikan warna teks dan latar sangat kontras.
Pilih emoji yang cocok dengan suasana proyek: 🚀 untuk peluncuran, 🧪 untuk eksperimen, 📚 untuk dokumentasi. Atur latar yang netral.
Favicon emoji terasa ramah untuk situs pribadi, hackathon, dan proyek sampingan. Ingat bahwa emoji yang sama terlihat berbeda di macOS (Apple) dan Windows (Segoe). Setelah diekspor, paketnya membekukan tampilan macOS / Linux / Chrome yang kamu lihat di pratinjau.
Jatuhkan PNG atau SVG logomu, naikkan slider **Padding** agar gambarnya tidak menyentuh tepi, dan nyalakan **Isi warna latar** kalau logomu punya tepi transparan.
Input SVG dirender tajam di setiap ukuran. Input PNG juga bisa, tetapi jadi buram melewati resolusi aslinya, jadi mulailah dari sumber berukuran minimal 512×512.
apple-touch-icon.png. Kalau Apple touch icon tidak dideklarasikan, iOS akan memakai tangkapan layar halaman sebagai gantinya, dan biasanya hasilnya jelek.<link rel="icon" href="/images/favicon.ico">. Itu berhasil, tetapi browser tetap mencari /favicon.ico di root situs. Taruh salinannya di root juga, atau terima saja error 404 di log aksesmu.favicon.ico?v=2) atau dengan menghapus cache situs.Favicon adalah ikon kecil yang ditampilkan browser di sebelah judul halaman: di tab, bookmark, daftar riwayat, dan pintasan layar utama. Namanya singkatan dari *favorite icon*; rilis awal Internet Explorer 5 memakainya untuk bookmark.
favicon.ico multi-resolusi (16/32/48), PNG 32×32, apple-touch-icon.png 180×180 untuk iOS, serta PNG 192×192 dan 512×512 yang dideklarasikan di site.webmanifest untuk Android dan PWA yang bisa diinstal. Paket yang diunduh alat ini berisi semuanya.<link rel="icon" type="image/png">. Semuanya juga mendukung URL lama /favicon.ico. Favicon SVG didukung di browser modern dan membuat satu file bisa diskalakan dengan tajam di setiap ukuran. SVG bagus kalau logomu sudah berbentuk vektor, tetapi Safari di iOS tetap butuh fallback PNG.Cmd/Ctrl + Shift + R), hapus data situs di DevTools, atau ubah query string di URL favicon (/favicon.ico?v=2). CDN di depan situsmu biasanya juga perlu di-purge./apple-touch-icon.png. Paketnya sudah menyertakannya.<canvas>, dan setiap output (PNG, ICO, ZIP, manifest) dibuat secara lokal. Tidak ada yang keluar dari perangkatmu.