Generator Favicon Online
Buat favicon Anda dalam semua ukuran yang diperlukan secara gratis, langsung di browser.
.jpg, .png, .webp · hingga 50 MB
Mengapa menggunakannya
Favicon yang tepat untuk setiap perangkat dan browser
Semua format
Menghasilkan .ico, .png, dan semua ukuran untuk iOS, Android, dan PWA.
100% privat
Pemrosesan dilakukan di browser Anda. Logo Anda tidak pernah meninggalkan perangkat.
Semua ukuran
16x16, 32x32, 180x180, 192x192, dan 512x512. Siap untuk produksi.
Instan
Hasil langsung. Tanpa antrean, tanpa registrasi, tanpa batasan.
Cara kerjanya
Tiga langkah, tanpa kerumitan
Unggah gambar atau logo Anda
Seret dan lepas atau pilih PNG, SVG, JPG, atau WebP berbentuk persegi. Disarankan minimal 512x512 piksel.
Pratinjau ukuran yang dihasilkan
Dapatkan secara otomatis ukuran 16x16, 32x32, 180x180 (Apple Touch Icon), 192x192, dan 512x512 piksel.
Unduh paket favicon
Unduh semua ukuran yang dihasilkan, siap ditambahkan ke proyek web Anda.
FAQ
Ada pertanyaan?
Set favicon modern yang lengkap memerlukan: 16x16 piksel (tab browser di Windows/Linux), 32x32 piksel (tab di macOS dan bookmark), 180x180 piksel (Apple Touch Icon, disimpan ke layar beranda iOS), 192x192 piksel (Android Chrome tambahkan ke layar beranda), dan 512x512 piksel (layar splash PWA di Android). File favicon.ico di root situs dapat berisi beberapa resolusi tertanam (16, 32, 48 piksel) dalam satu file. Untuk browser modern, satu PNG 32x32 yang direferensikan dalam HTML sudah cukup. Namun, untuk kompatibilitas maksimal dengan perangkat Apple, aplikasi bookmark, dan PWA, set lengkap diperlukan.
Format .ico adalah format favicon asli, diperkenalkan oleh Internet Explorer 5 pada tahun 1999. Format ini dapat berisi beberapa resolusi dalam satu file dan memiliki dukungan universal, termasuk browser yang sangat lama. Format .png lebih sederhana: satu file per ukuran, dukungan native di semua browser modern, dan kualitas kompresi lebih baik daripada .ico untuk resolusi tinggi. Format .svg sebagai favicon didukung oleh Chrome, Firefox, dan Edge modern tetapi tidak oleh Safari atau iOS. Keunggulan SVG adalah skalanya sempurna ke ukuran apa pun dan dapat mengadaptasi tampilannya ke mode gelap sistem melalui media query CSS. Rekomendasi saat ini: gunakan .ico untuk kompatibilitas dasar, .png untuk resolusi tertentu, dan opsional .svg untuk browser modern.
Apple Touch Icon adalah ikon yang digunakan iOS dan macOS Safari ketika pengguna menyimpan situs web ke layar beranda iPhone/iPad atau menambahkannya ke dock Mac. Tidak seperti favicon biasa (yang diabaikan iOS untuk tujuan ini), Apple Touch Icon harus berupa PNG 180x180 piksel (untuk Retina), tanpa lapisan transparansi (iOS secara otomatis menambahkan sudut membulat), yang dideklarasikan dalam HTML sebagai tag link dengan rel apple-touch-icon. Jika tidak ada Apple Touch Icon yang ditentukan, iOS secara otomatis mengambil tangkapan layar halaman sebagai ikon, dengan hasil visual yang sangat buruk.
Cara yang benar untuk mendeklarasikan favicon modern di dalam HTML head adalah: tag link dengan rel icon dan type image/x-icon mengarah ke favicon.ico untuk kompatibilitas dasar, tag link dengan rel icon, type image/png, dan ukuran 32x32 untuk browser modern, tag link dengan rel apple-touch-icon dan ukuran 180x180 untuk iOS, dan tag link dengan rel manifest mengarah ke site.webmanifest untuk PWA. File site.webmanifest adalah JSON yang mendeklarasikan ikon 192x192 dan 512x512. Browser modern memprioritaskan manifest daripada tag link individual, sehingga manifest sangat penting untuk PWA.
favicon.ico adalah standar de facto sejak 1999, ditafsirkan oleh semua browser bahkan tanpa tag HTML apa pun (browser secara otomatis mencari /favicon.ico di root). Web app manifest (manifest.json atau site.webmanifest) adalah standar modern untuk PWA (Progressive Web Apps), yang diperkenalkan dengan standar W3C Web App Manifest pada tahun 2013. Selain ikon, manifest mendeklarasikan nama, warna tema, mode tampilan, dan properti aplikasi lainnya. Untuk situs web normal tanpa fungsionalitas PWA, favicon.ico + PNG + Apple Touch Icon sudah cukup. Untuk PWA penuh dengan instalasi layar beranda, manifest sangat penting.
Favicon: sejarah, standar web, dan branding tab browser
Favicon adalah salah satu elemen visual identitas situs web yang paling kecil dan paling mudah dikenali. Sejarahnya dimulai pada Maret 1999 ketika Microsoft Internet Explorer 5 memperkenalkan dukungan favicon.ico sebagai bagian dari fitur Favorit: saat menyimpan situs, IE5 membuat permintaan ke /favicon.ico untuk menampilkan ikon di sebelah bookmark. Nama favicon berasal dari favorites icon. Standar ini diformalkan dalam RFC 2616 dan W3C pada tahun 2000 dengan tag link rel shortcut icon. Hari ini, lebih dari 25 tahun kemudian, favicon telah berkembang dari file .ico 16x16 piksel sederhana menjadi ekosistem ikon untuk tab browser, bookmark, layar beranda mobile, dan layar splash aplikasi.
Format ICO secara teknis adalah wadah gambar yang dapat menyertakan beberapa resolusi dan kedalaman warna dalam satu file. Format ini awalnya dikembangkan oleh Microsoft untuk ikon desktop Windows dan diadaptasi untuk web. Keingintahuan teknis: file .ico dapat menyertakan gambar PNG terkompresi di dalam wadah ICO sejak Windows Vista (2007), yang secara signifikan mengurangi ukuran file. Favicon SVG, yang didukung oleh Chrome 80+ dan Firefox 41+, memiliki keunggulan unik: mereka dapat menggunakan media query CSS untuk secara otomatis mengadaptasi desain ke mode gelap sistem. Ini memungkinkan memiliki favicon hitam di atas putih dalam mode terang dan putih di atas hitam dalam mode gelap, semuanya dalam satu file vektor berukuran beberapa kilobyte.
Dalam konteks Core Web Vitals Google, favicon memiliki implikasi performa yang sering diabaikan. Browser mengunduh favicon dalam permintaan terpisah saat memuat halaman, dan jika file favicon.ico tidak ada, server merespons dengan 404 yang mungkin menyertakan halaman error HTML berukuran beberapa kilobyte. Untuk situs yang menerima jutaan kunjungan, 404 yang berulang ini dapat menghasilkan jumlah lalu lintas yang tidak perlu yang signifikan. Solusinya adalah selalu memiliki favicon.ico di root, bahkan jika hanya file minimal 16x16 piksel, untuk menghindari 404 ini pada setiap kunjungan.