Generator Favicon

Baru

Buat set favicon lengkap dari gambar atau huruf dan unduh sebagai ZIP.

Drop an image, click to browse, or paste PNG, JPG, SVG or WebP — a square 512×512+ logo works best. Processed on your device.

Background Transparent

Shape

Padding 0% App name (for manifest)

Drop an image above to generate your favicon set — or switch to Text or Emoji to build one from a letter or emoji.

Live preview

Browser tab

My App

Bookmarks bar

My App

iOS home screen

My App

Android home screen

My App

Generated sizes

Apple touch (180) and Android (192/512) icons use a solid background; the 192 and 512 are maskable with a built-in safe zone.

HTML for your <head>

site.webmanifest

Runs entirely in your browser. Nothing is uploaded.

Buat set favicon lengkap langsung di browser

Generator favicon ini membuat semua ikon yang dibutuhkan website atau web app modern — favicon browser, favicon.ico multi-ukuran, Apple touch icon, dan ikon manifest PWA yang maskable — semuanya dari satu sumber. Pilih gambar, lettermark yang diketik, atau emoji, sesuaikan latar belakang, bentuk, dan padding, lalu unduh ZIP siap pakai berisi semua file plus cuplikan HTML persis untuk <head> Anda.

Berbeda dari alat lain yang mengirim gambar Anda ke server, semuanya di sini dirender secara lokal menggunakan HTML canvas, sehingga cepat, gratis, tidak perlu daftar, dan menjaga logo Anda tetap sepenuhnya privat. Tanpa akun, tanpa menunggu pemrosesan server, tanpa iklan yang menghalangi alatnya.

Dari gambar, SVG, huruf, atau emoji

Tiga mode input mencakup semua titik awal. Gambar menerima PNG, JPG, SVG, dan WebP — masukkan logo persegi dan otomatis disesuaikan ke tengah untuk setiap ukuran; unggah SVG dan file itu juga diteruskan tanpa perubahan sebagai favicon.svg yang tajam dan scalable. Teks mengubah satu hingga tiga huruf menjadi lettermark yang rapi dengan font dan warna pilihan Anda — berguna saat Anda belum punya logo. Emoji mengubah emoji apa pun menjadi favicon hanya dengan satu klik, cara tercepat memberi identitas pada proyek sampingan.

Apa pun yang Anda pilih, Anda mendapat set output lengkap: setiap ukuran PNG, favicon.ico asli, favicon.svg opsional, web app manifest, dan HTML-nya. Ini mencakup semua browser, semua OS, dan semua ukuran perangkat, dari tab Chromebook hingga layar utama Android.

Semua ukuran, plus favicon.ico asli

Alat ini menghasilkan PNG 16×16, 32×32, dan 48×48 untuk tab browser dan Windows, Apple touch icon 180×180, serta ikon 192×192 dan 512×512 untuk layar utama Android dan PWA. Kemudian, bitmap 16, 32, dan 48 tersebut dikodekan menjadi favicon.ico multi-resolusi asli — file kontainer yang secara default diminta oleh browser — semuanya di dalam browser Anda, tanpa perlu bolak-balik ke server.

Format ICO ini penting. Banyak alat lain hanya menghasilkan satu PNG 32×32 dan mengganti namanya menjadi favicon.ico, yang memang berfungsi tetapi berarti browser selalu men-skalakan dari satu sumber saja. ICO multi-resolusi asli memungkinkan browser memilih ukuran paling tajam untuk setiap konteks. Unduh seluruh set sebagai ZIP, atau ambil satu ukuran saja, file .ico, .svg, atau manifest secara terpisah.

Apple touch icon dan ikon maskable PWA yang benar

Menyiapkan ikon mobile dengan benar adalah titik lemah kebanyakan favicon. apple-touch-icon dirender pada 180×180 dengan latar belakang solid (iOS tidak mendukung transparansi dan membulatkan sudutnya sendiri). Ikon manifest 192 dan 512 dibuat sebagai ikon maskable — kontennya dijaga tetap berada di dalam zona aman ~80% sehingga Android bisa memotongnya menjadi lingkaran, squircle, atau persegi membulat tanpa memotong logo Anda.

Mockup pratinjau langsung menunjukkan ikon Anda di tab browser, bilah bookmark, serta layar utama iOS dan Android, sehingga Anda tahu persis tampilannya sebelum dirilis. Ini menghemat proses bolak-balik deploy, mengecek di ponsel, menyesuaikan, lalu deploy lagi.

Perbandingan UtiloKit dengan favicon.io dan RealFaviconGenerator.net

favicon.io adalah alat favicon paling populer dan memang bagus — tetapi mengunggah gambar Anda ke server mereka, artinya logo yang belum dirilis atau aset klien Anda meninggalkan perangkat Anda. RealFaviconGenerator.net adalah opsi paling lengkap fiturnya, tetapi wizard multi-langkahnya cukup merepotkan untuk proyek cepat, dan juga memproses gambar di sisi server. favicon-generator.org sudah ketinggalan zaman: hanya menghasilkan ukuran PNG dasar tanpa ikon manifest maskable dan tanpa SVG.

UtiloKit melakukan semuanya secara lokal. Gambar Anda tidak pernah meninggalkan browser. Outputnya mencakup ICO multi-resolusi asli, ikon manifest maskable yang benar dengan padding zona aman, SVG yang scalable, dan cuplikan <head> siap tempel — set lengkap yang sama seperti yang Anda dapat dari RealFaviconGenerator, tanpa perlu unggah dan tanpa wizard. Berfungsi juga di iPhone dan Android: canvas API berjalan baik di browser mobile, sehingga Anda bisa membuat dan mengunduh favicon langsung dari ponsel.

Manifest dan cuplikan HTML, siap tempel

Selain ikon, Anda juga mendapat site.webmanifest lengkap — dengan nama aplikasi, warna tema, dan entri ikon maskable Anda — serta cuplikan <head> siap salin yang menautkan file .ico, .svg, Apple touch icon, dan manifest, ditambah meta tag theme-color yang sesuai. Tempel ke HTML Anda, unggah filenya ke root situs, dan selesai.

Cuplikan ini berfungsi di stack apa pun: HTML biasa, Next.js, Astro, Nuxt, SvelteKit, Remix. Jika framework Anda memiliki konfigurasi favicon khusus (app/icon.png di Next.js, konfigurasi head di Astro), file PNG-nya tetap bisa langsung dipakai.

Penjelasan lengkap stack favicon modern

Setup favicon yang siap produksi memiliki empat lapisan yang berbeda. Pertama, favicon.ico di root — browser, pembaca RSS, klien email, dan address bar Windows semuanya mengirim permintaan GET /favicon.ico polos tanpa melihat HTML Anda sama sekali. Menyajikan ICO multi-resolusi asli di sini (bitmap 16, 32, dan 48 dikemas dalam satu file) adalah satu-satunya cara menjamin ikon muncul di mana saja. Kedua, <link rel="icon" type="image/svg+xml" href="/favicon.svg"> — semua browser modern (Chrome 80+, Firefox 41+, Safari 14.1+, Edge) akan memprioritaskan ini dibanding ICO ketika tag-nya ada. Karena berupa SVG, ia berskala sempurna di DPI berapa pun, tampil tajam di layar Retina 3×, dan bahkan bisa beradaptasi dengan dark mode lewat blok @media (prefers-color-scheme: dark) di dalam file SVG itu sendiri — sesuatu yang tidak bisa dilakukan PNG.

Ketiga, <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180"> — iOS dan iPadOS menggunakan PNG 180×180 ini saat pengguna menambahkan situs Anda ke layar utama lewat menu Share di Safari. Tanpa ini, iOS akan menggunakan screenshot halaman Anda sebagai gantinya, yang terlihat kurang profesional. Keempat, <link rel="manifest" href="/site.webmanifest"> — array icons di dalam file JSON ini memberi tahu Android dan Chrome desktop PNG mana yang dipakai untuk prompt instal PWA, app switcher, dan splash screen. Favicon SVG kini menjadi rekomendasi utama untuk browser modern, tetapi ICO sebagai fallback tetap penting: tanpanya, sebagian besar konteks non-browser (pembaca feed, klien email, alat bookmark pihak ketiga) tidak akan menampilkan apa pun.

Cuplikan <head> yang minimal namun lengkap karena itu terlihat seperti ini: tautan .ico (dengan sizes="32x32" eksplisit agar browser yang mendukung kedua format tetap memprioritaskan SVG), tautan image/svg+xml, tautan apple-touch-icon, dan tautan manifest. Kurang dari itu berisiko membuat ikon rusak di setidaknya satu platform; lebih dari itu biasanya berlebihan.

Sejarah singkat favicon

Favicon diciptakan oleh Microsoft untuk Internet Explorer 5, yang dirilis pada Maret 1999. Motivasi awalnya cukup sederhana: IE5 memperkenalkan sidebar Favorites (bookmark), dan agar setiap entrinya terlihat berbeda secara visual, browser ini mengambil ikon kecil dari tiap situs yang disimpan. Karena bookmark ini disebut “Favorites”, ikonnya secara alami dinamai “favorite icon” — disingkat favicon. IE mengambilnya dari /favicon.ico tanpa syarat, tanpa perlu tautan HTML apa pun. Ini langsung menimbulkan masalah: setiap server web yang tidak punya file /favicon.ico mencatat error 404 setiap kali ada pengunjung yang menyimpan bookmark halamannya, mengotori log error di seluruh internet.

Perilaku ini distandarkan dalam spesifikasi HTML 4.01 pada tahun yang sama (1999), yang memperkenalkan elemen <link rel="shortcut icon"> — memungkinkan webmaster mengarahkan browser ke URL mana pun, bukan hanya mengandalkan permintaan root implisit. HTML5 menghapus kata kunci “shortcut” dan menggantinya dengan rel="icon" yang lebih sederhana, serta menambahkan atribut sizes sehingga beberapa resolusi bisa dideklarasikan. Saat pertama muncul, favicon dibatasi pada 16×16 piksel dan format ICO — format milik Microsoft Windows yang mampu menyimpan beberapa bitmap dengan kedalaman warna berbeda dalam satu file. Seiring meningkatnya resolusi layar, konvensi tooling berkembang menuju ICO multi-resolusi berisi varian 16, 32, dan 48px, lalu menuju fallback PNG untuk layar DPI tinggi, dan akhirnya menuju favicon SVG (pertama didukung di Firefox 41 tahun 2015, Chrome 80 tahun 2020, Safari 14.1 tahun 2021). Perjalanan dari satu bitmap 16×16 dalam kontainer milik Windows hingga menjadi SVG yang independen terhadap resolusi dan sadar dark mode memakan waktu lebih dari dua dekade.

Prinsip desain favicon untuk ukuran kecil

Batasan paling berat dalam desain favicon adalah 16×16 piksel — total 256 piksel. Pada skala ini, wordmark berubah menjadi buram yang tak terbaca, ilustrasi detail runtuh menjadi noise, dan garis tipis menghilang sepenuhnya karena jatuh di antara batas piksel. Desain favicon yang efektif pada 16px biasanya mengandalkan salah satu dari tiga pendekatan: satu huruf inisial tebal (paling umum — pikirkan “N” milik Notion, “F” milik Figma, atau logo GitHub), logomark yang disederhanakan yang hanya menyisakan elemen geometris paling mudah dikenali dari logo lengkap, atau simbol geometris mandiri — bentuk, ikon, atau blok warna yang tidak punya hubungan tipografi dengan merek tetapi langsung terlihat jelas dalam ukuran sangat kecil.

Dua aturan teknis lebih penting daripada apa pun di ukuran kecil. Pertama, hindari goresan tipis: garis 1px pada sumber 512×512 akan menyusut menjadi sebagian kecil piksel pada 16px dan hilang atau berubah menjadi noda anti-aliasing yang buruk. Jaga lebar goresan minimal 2–3px relatif terhadap kanvas 512px, yang setara dengan setidaknya 0,06px pada 16px — cukup tebal untuk bertahan setelah diperkecil. Kedua, maksimalkan kontras: tab browser bervariasi dari putih hingga hampir hitam tergantung tema OS dan browser, dan favicon harus tetap terbaca di keduanya. Desain yang bagus di latar putih tetapi menghilang di tab gelap telah gagal untuk separuh penggunanya. Dukungan @media (prefers-color-scheme: dark) pada favicon SVG memungkinkan penyajian versi latar terang untuk mode terang dan versi latar gelap untuk mode gelap dalam satu file — satu-satunya format yang menyelesaikan masalah ini secara elegan.

Menguji dalam konteks nyata sama pentingnya dengan desain itu sendiri. Favicon terlihat berbeda di tab Chrome (16px di layar 1×, 32px di 2×), tab pin Safari (yang secara historis memakai SVG monokrom pada 18×18), taskbar Windows (di mana Windows bisa memilih 48px dari ICO), dan layar utama Android (di mana sistem menerapkan mask bentuknya sendiri). Selalu uji dengan benar-benar menempatkan ikon dalam konteks-konteks ini — perbedaan antara tampilan yang tajam di alat desain pada zoom 100% dan hasil rendering nyata pada 16px sering kali lebih besar dari yang diperkirakan.

Ikon PWA dan web app manifest

Web App Manifest (site.webmanifest) adalah file JSON yang mengubah sebuah website menjadi Progressive Web App yang bisa diinstal. Field intinya adalah name (nama lengkap aplikasi yang ditampilkan di splash screen), short_name (nama yang dipotong agar muat di bawah ikon layar utama — jaga di bawah 12 karakter), start_url (URL mana yang terbuka saat ikon diketuk), display (standalone menyembunyikan chrome browser agar aplikasi terasa native), theme_color (warna taskbar atau status bar di Android), dan background_color (latar belakang splash screen sebelum aplikasi dimuat). Array icons memberi tahu sistem file PNG mana yang dipakai untuk setiap ukuran.

Chrome di Android membutuhkan minimal ikon 192×192 untuk menawarkan “Add to Home Screen”, dan ikon 512×512 untuk splash screen instalasi. Field purpose pada setiap entri ikon mengatur bagaimana sistem menggunakannya: "purpose": "any" berarti menampilkan ikon apa adanya, menjaga transparansi dan bentuknya; "purpose": "maskable" berarti ikon dirancang untuk adaptive icon — Android (8.0+), ChromeOS, dan beberapa launcher Samsung memotongnya menjadi bentuk pilihan mereka (lingkaran, squircle, persegi membulat) dengan membuang segala sesuatu di luar lingkaran yang tertulis dalam ikon. Logo harus berada sepenuhnya di dalam zona aman 80% di tengah — lingkaran dengan radius 40% dari lebar ikon, dipusatkan di kanvas — atau akan terpotong. Banyak developer menyediakan kedua entri untuk PNG yang sama: "purpose": "any maskable" sebagai jalan pintas, meski ini hanya aman jika logo benar-benar pas dengan zona aman. Standar terbaiknya adalah dua file terpisah: satu ikon berlatar transparan untuk any dan satu lagi dengan latar terisi dan berpadding untuk maskable.

Chrome di desktop Windows dan macOS juga membaca manifest saat menginstal PWA: ia memilih ikon terbesar yang tersedia (idealnya 256×256 atau lebih) untuk taskbar, Start menu, dan dock. Tanpa ikon manifest yang besar, PWA desktop yang terinstal akan jatuh kembali ke ikon globe generik browser — tanda jelas aplikasi yang kurang matang. Menyediakan ikon 512×512 dalam manifest sudah mencakup splash screen Android maupun ikon aplikasi desktop dalam satu file.

Frequently asked questions

Apa itu favicon?

Favicon (singkatan dari “favorite icon”) adalah ikon kecil berbentuk persegi yang ditampilkan browser di samping judul halaman — di tab browser, bilah bookmark, riwayat, dan terkadang hasil pencarian. Biasanya ditampilkan pada 16×16 atau 32×32 piksel dan berada di root situs Anda sebagai favicon.ico, sementara situs modern juga menambahkan favicon.svg, Apple touch icon, dan ikon manifest PWA untuk layar utama. Favicon yang mudah dikenali meningkatkan rasio klik di bookmark dan hasil pencarian.

Berapa ukuran favicon yang tepat?

Mulai dengan 16×16 dan 32×32 — dua ukuran yang ditampilkan browser di tab dan bookmark — digabung bersama dalam satu favicon.ico. Untuk cakupan penuh, tambahkan juga 48×48 (dipakai Windows), apple-touch-icon 180×180 untuk iOS, serta PNG 192×192 dan 512×512 untuk layar utama Android dan PWA. Generator ini menghasilkan semuanya sekaligus dari satu sumber, jadi Anda tidak perlu mengubah ukuran secara manual atau menjalankan beberapa alat berbeda.

Bagaimana cara membuat favicon?

Pilih sumbernya — unggah gambar (PNG, JPG, SVG, atau WebP), ketik satu hingga tiga huruf, atau masukkan emoji — lalu pilih warna latar, bentuk (persegi, membulat, atau lingkaran), dan padding. Alat ini merender semua ukuran favicon di canvas, mengemas 16/32/48 ke dalam favicon.ico, dan memberi Anda ZIP berisi semua file plus cuplikan HTML untuk ditempel ke <head> Anda. Seluruh prosesnya memakan waktu kurang dari satu menit dan tidak membutuhkan software desain.

Bagaimana cara membuat favicon dari gambar, SVG, teks, atau emoji?

Gunakan tiga tab input yang tersedia. Gambar menerima PNG, JPG, SVG, dan WebP serta menyesuaikan logo Anda ke tengah; jika Anda mengunggah SVG, file itu juga diteruskan tanpa perubahan sebagai favicon.svg yang tajam dan scalable. Teks mengubah satu hingga tiga huruf menjadi lettermark dengan font dan warna pilihan Anda (misalnya “U” di atas persegi membulat berwarna indigo). Emoji mengubah emoji apa pun — 🚀, ⭐, 🐙 — menjadi favicon. Ketiganya menghasilkan set ukuran lengkap, .ico, dan manifest dalam satu unduhan.

Ukuran favicon apa saja yang dibutuhkan di tahun 2026?

Set modern yang praktis adalah: 16×16, 32×32, dan 48×48 di dalam favicon.ico; favicon.svg scalable opsional; apple-touch-icon.png 180×180; serta PNG maskable 192×192 dan 512×512 yang dirujuk dari site.webmanifest. Ini mencakup tab desktop, layar utama iOS, dan instalasi Android/PWA tanpa membuat <head> Anda membengkak. Alat ini membuat semuanya dalam satu klik — tidak perlu ekspor ukuran terpisah di Photoshop, Figma, atau aplikasi lainnya.

Apa itu favicon.ico dan apakah masih dibutuhkan?

favicon.ico adalah satu file kontainer yang menyimpan beberapa ukuran bitmap (biasanya 16, 32, dan 48). Browser secara otomatis meminta /favicon.ico bahkan ketika tidak ada tautan HTML, sehingga file ini tetap menjadi fallback paling andal — pertahankan. Browser modern akan memprioritaskan favicon.svg atau tautan PNG jika Anda menyediakannya, tetapi .ico menjamin ikon muncul di mana saja, termasuk browser lama dan pembaca feed. Generator ini membuat .ico multi-resolusi asli, bukan PNG yang diganti nama.

Bagaimana cara menambahkan favicon ke website saya?

Masukkan file yang sudah dibuat ke root situs Anda dan tambahkan tag-tag ini di dalam <head>: <link rel="icon" href="/favicon.ico" sizes="32x32">, <link rel="icon" href="/favicon.svg" type="image/svg+xml">, <link rel="apple-touch-icon" href="/apple-touch-icon.png">, dan <link rel="manifest" href="/site.webmanifest">. Alat ini membuat cuplikan persis ini, lengkap dengan meta tag theme-color yang sesuai, untuk Anda salin. Berfungsi untuk framework apa pun — Next.js, Astro, React, HTML biasa.

Format apa yang sebaiknya dipakai untuk favicon — PNG, SVG, atau ICO?

Gunakan ketiganya sekaligus untuk hasil terbaik. ICO (favicon.ico) adalah fallback universal yang diminta semua browser. SVG memberikan ikon yang sangat tajam, bisa diskalakan tanpa batas, dan bahkan bisa beradaptasi dengan dark mode, tetapi tidak didukung di semua konteks. PNG dipakai untuk Apple touch icon dan ikon manifest Android. Menyediakan favicon.ico + favicon.svg + ikon PNG apple/manifest mencakup semua perangkat — dan itulah persis set yang dihasilkan alat ini dalam satu unduhan ZIP.

Apa itu Apple touch icon?

apple-touch-icon adalah PNG 180×180 yang dipakai iOS dan iPadOS saat seseorang menambahkan situs Anda ke layar utama mereka. File ini sebaiknya memiliki latar belakang solid (tidak transparan) dan sudut persegi — iOS akan membulatkannya secara otomatis — sehingga alat ini mengisi latar transparan dengan warna solid khusus untuk file tersebut. Tambahkan dengan <link rel="apple-touch-icon" href="/apple-touch-icon.png">. Tanpanya, iOS akan menggunakan screenshot halaman Anda sebagai ikon layar utama, yang terlihat kurang profesional.

Apa itu maskable icon / ikon web app manifest?

Ikon manifest (PNG 192×192 dan 512×512 yang tercantum di site.webmanifest) dipakai oleh Android dan PWA yang terinstal. Ikon “maskable” menjaga konten pentingnya tetap berada di dalam zona aman di tengah — sekitar 80% dari ikon — sehingga tetap terlihat benar saat sistem memotongnya menjadi lingkaran, squircle, atau persegi membulat. Alat ini otomatis menambahkan padding zona aman tersebut ke ikon 192 dan 512 dan menandainya dengan purpose: maskable. Anda tidak perlu menghitung area aman secara manual.

Kenapa favicon saya tidak muncul?

Hampir selalu karena caching browser. Browser menyimpan cache favicon secara agresif, jadi coba hard refresh (Ctrl+F5), buka langsung URL ikonnya (situsanda.com/favicon.ico) untuk memastikan file tersebut termuat, atau coba di jendela private. Periksa juga apakah file-nya ada di root situs, path di tag <link> Anda sudah benar (garis miring di depan itu penting), dan Anda benar-benar sudah mengunggah setiap ukuran. Favicon baru bisa butuh waktu untuk diperbarui di bookmark dan hasil pencarian — beri waktu beberapa jam setelah deploy.

Apakah aman mengunggah logo saya?

Ya — karena sebenarnya tidak ada yang diunggah. Setiap langkah berjalan di browser Anda menggunakan HTML <canvas> dan JavaScript: gambar Anda dibaca secara lokal, diubah ukurannya, dikodekan menjadi PNG dan ICO, lalu di-zip langsung di perangkat Anda. Tidak ada file yang pernah dikirim ke server, berbeda dari alat seperti favicon.io dan RealFaviconGenerator.net yang memproses gambar Anda di cloud. Logo Anda tidak pernah meninggalkan komputer Anda — penting jika Anda sedang mengerjakan proyek klien atau produk yang belum dirilis.

Bagaimana perbandingan UtiloKit dengan favicon.io dan RealFaviconGenerator.net?

favicon.io cepat dan populer, tetapi mengunggah gambar Anda ke server mereka untuk diproses. RealFaviconGenerator.net punya lebih banyak opsi tetapi UI multi-langkahnya rumit dan juga membutuhkan unggahan ke server. favicon-generator.org sudah ketinggalan zaman dan hanya menghasilkan ukuran PNG dasar tanpa ikon manifest maskable yang benar. UtiloKit membuat semuanya secara lokal di browser Anda — logo Anda tidak pernah meninggalkan perangkat — menghasilkan ICO multi-resolusi asli (bukan PNG yang diganti nama), membuat ikon manifest maskable dengan padding zona aman yang benar, dan memberi Anda cuplikan <head> siap salin. Tanpa akun, tanpa unggahan, tanpa menunggu pemrosesan server.

Apakah generator favicon ini berfungsi di iPhone dan Android?

Ya — canvas API dan unduhan file berfungsi di iOS Safari, Chrome untuk Android, dan Samsung Internet. Anda bisa mengunggah foto dari galeri, mengetik huruf, atau menempel emoji, lalu mengunduh ZIP lengkapnya langsung ke ponsel Anda. Berguna untuk membuat prototipe favicon dengan cepat saat Anda sedang tidak di depan komputer. Tata letaknya menyesuaikan layar kecil sehingga alat ini nyaman dipakai pada 375px.

Konversikan gambar antara PNG, JPG, dan WebP dengan kontrol kualitas.

Gambar & Media