Favicon Generator
Semua ukuran favicon, berkas .ico multi-ukuran sungguhan, dan web manifest dari satu gambar. Semuanya berjalan di perangkat Anda — tidak ada yang diunggah.
- Masuk
- PNG · JPEG · WebP · SVG
- Keluar
- ICO · PNG · webmanifest · ZIP
Jatuhkan logo Anda
PNG, JPEG, WebP, atau SVG. Paling baik persegi dan minimal 512 × 512 px. Anda juga bisa menempelkan gambar.
Semua berkas favicon dari satu gambar
Favicon generator ini mengubah satu logo menjadi paket lengkap yang dibutuhkan situs web saat ini: favicon.ico berisi ikon 16, 32, dan 48 piksel, PNG tajam dari 16 hingga 512 piksel, Apple touch icon, ikon Android Chrome, site.webmanifest, dan tag HTML untuk ditempel ke halaman Anda. Jadikan gambar persegi, tambahkan padding, bulatkan sudutnya, atau letakkan di atas latar solid, lalu unduh semuanya sebagai satu ZIP. Pengubahan ukuran dan pembuatan ZIP dilakukan di perangkat Anda, jadi logo Anda tidak pernah diunggah ke mana pun.
Cara membuat favicon
- Jatuhkan PNG, JPEG, WebP, atau SVG ke halaman, atau tempelkan. Logo persegi minimal 512 × 512 piksel, atau SVG, memberi hasil paling tajam.
- Pilih Pas untuk mempertahankan seluruh gambar dengan ruang di sekelilingnya, atau Penuh untuk memotongnya menjadi persegi. Tambahkan padding dan radius sudut jika ingin ubin membulat.
- Pilih warna latar, atau biarkan transparan. Apple touch icon selalu mendapat latar solid, karena iOS mewarnai area transparan menjadi hitam.
- Isi nama aplikasi dan warna untuk web manifest, lalu tekan Unduh ZIP, atau unduh berkas satu per satu dari pratinjau.
- Unggah berkas ke root situs Anda dan tempel tag HTML ke dalam
<head>setiap halaman.
Berkas favicon apa saja yang benar-benar dibutuhkan browser modern?
Saran soal favicon penuh sisa-sisa dari tahun 2012: puluhan ukuran, XML ubin Windows, dan mask pinned tab Safari. Browser saat ini mencari jauh lebih sedikit. Empat berkas sudah mencakup hampir semua browser, ponsel, dan sistem operasi yang dipakai.
Berkas lain di ZIP disertakan demi kelengkapan: PNG 16, 32, dan 48 piksel untuk alat dan CMS yang memintanya berdasarkan nama, serta ubin Windows 150 × 150 opsional untuk situs yang disematkan di versi lama. Berkas tambahan tidak merugikan, tetapi Anda tidak perlu menautkan semuanya.
- favicon.ico
- Cadangan universal. Browser meminta /favicon.ico dengan sendirinya meskipun tidak ada tag yang menunjuk ke sana, begitu pula pembaca RSS, pengelola bookmark, dan crawler. Satu berkas memuat versi 16, 32, dan 48 piksel, masing-masing berupa PNG di dalam kontainer ICO, yang dapat dibaca semua browser sejak Windows Vista.
- icon.svg
- Favicon vektor yang tajam di setiap ukuran dan tingkat zoom. Chrome, Edge, Firefox, dan Safari versi terbaru memakainya jika ditautkan. Anda hanya mendapatkannya jika memulai dari SVG; gambar raster tidak bisa menjadi vektor sungguhan.
- apple-touch-icon.png
- PNG buram 180 × 180 yang ditampilkan iPhone dan iPad saat seseorang menambahkan situs Anda ke layar utama. iOS menerapkan mask membulatnya sendiri, jadi sudutnya sebaiknya persegi dan latarnya solid.
- Ikon manifest
- PNG 192 dan 512 piksel yang tercantum di site.webmanifest. Android memakainya untuk pintasan layar utama dan splash screen aplikasi web yang terpasang, dan Chrome memeriksanya sebelum menawarkan untuk memasang situs.
Tag HTML yang perlu ditempel
Cuplikan menautkan ICO dengan sizes="32x32", bukan sizes="any". Dengan "any", Chrome lebih memilih ICO meskipun SVG tersedia. Jika Anda mengunggah SVG, cuplikan juga menautkannya, sehingga browser yang mendukung favicon SVG memakainya dan sisanya kembali ke ICO. Tanpa SVG, PNG 32 dan 16 piksel yang ditautkan sebagai gantinya.
Meta tag theme-color mewarnai bilah alat browser di Android dan Safari, dan site.webmanifest membawa nama aplikasi, warna, dan ikon besar Anda. Biarkan nama berkas apa adanya dan letakkan setiap berkas di root domain Anda, atau ubah path di cuplikan sesuai tempat Anda meletakkannya.
Mendesain favicon yang tetap terbaca di 16 piksel
- Sederhanakan. Ikon 16 × 16 totalnya hanya 256 piksel. Wordmark dan garis tipis jadi lebur; satu huruf, simbol, atau tanda logo tanpa teksnya jauh lebih mudah dibaca.
- Gunakan kontras yang bekerja di kedua warna tab. Tab browser terang atau gelap tergantung tema. Pratinjau menampilkan setiap ukuran di atas ubin putih dan hampir hitam, sehingga Anda bisa melihat logo gelap yang menghilang di mode gelap sebelum merilisnya.
- Jika ragu, beri ubin. Latar solid dengan sedikit padding dan radius sudut membuat logo tipis atau transparan tetap terlihat di tab mana pun dan tampak disengaja di layar utama.
- Mulai dari yang besar. Gambar diperkecil bertahap setengah demi setengah agar tepinya bersih, tetapi tidak ada yang bisa menambahkan detail yang tidak ada di sumbernya. Berikan 512 piksel atau lebih, atau SVG.
- Periksa warnanya. Jika warna merek Anda terlalu pudar di tab putih atau gelap, uji dengan cek kontras, atau ubah nilai yang Anda terima dalam notasi lain dengan konversi warna.
Kenapa tidak ada unggahan
Kebanyakan favicon generator mengirim logo Anda ke server untuk diubah ukurannya. Alat ini menggambar setiap ukuran di canvas dalam browser Anda, menulis berkas ICO byte demi byte dengan JavaScript, dan membangun ZIP dengan modul WebAssembly kecil, sehingga gambar tidak pernah meninggalkan perangkat dan alat tetap berfungsi offline setelah halaman dimuat. Ini penting untuk merek yang belum dirilis atau logo klien yang belum boleh dibagikan.
Pertanyaan yang sering diajukan
- Berapa ukuran favicon yang benar?
- Tab browser menampilkan favicon pada 16 × 16 piksel CSS, yaitu 32 × 32 di layar berkepadatan tinggi, jadi ICO berisi versi 16, 32, dan 48 piksel. Tambahkan Apple touch icon 180 × 180 serta ikon 192 dan 512 piksel untuk web manifest, dan semua kasus umum sudah tercakup. Mulailah dari gambar minimal 512 × 512 piksel.
- Apakah saya masih butuh berkas favicon.ico?
- Ya. Browser, pembaca feed, dan crawler meminta /favicon.ico secara otomatis meskipun tidak ada tag yang menunjuk ke sana, dan browser lama hanya memahami ICO. Simpan satu di root situs Anda bersama ikon SVG dan PNG.
- Bisakah memakai SVG sebagai favicon?
- Bisa. Chrome, Edge, Firefox, dan Safari terbaru mendukung favicon SVG lewat tag link dengan type="image/svg+xml". Unggah SVG di sini dan berkas itu disertakan sebagai icon.svg di samping cadangan ICO, dan cuplikan HTML menautkan keduanya.
- Apa itu apple-touch-icon?
- Itu adalah PNG 180 × 180 piksel yang dipakai iPhone atau iPad saat seseorang menambahkan situs Anda ke layar utama. Latarnya sebaiknya solid dan sudutnya persegi, karena iOS membulatkan sudutnya sendiri dan mengubah area transparan menjadi hitam.
- Kenapa favicon saya tidak muncul?
- Browser menyimpan cache favicon dengan agresif, sering kali berhari-hari. Pastikan berkas bisa diakses di path pada tag link Anda, lalu lakukan hard refresh atau buka situs di jendela privat. Mengganti nama berkas atau menambahkan query versi seperti favicon.ico?v=2 memaksa unduhan baru.
- Bagaimana cara convert PNG ke ICO?
- Jatuhkan PNG ke halaman ini dan unduh favicon.ico. Generator mengubah ukurannya menjadi 16, 32, dan 48 piksel dan mengemas ketiganya ke satu berkas ICO, dengan setiap ukuran disimpan sebagai PNG di dalam kontainer.
- Untuk apa site.webmanifest?
- Itu adalah berkas JSON kecil yang memberi tahu Android dan Chrome nama situs Anda, warna tema, warna latar, serta ikon 192 dan 512 piksel yang dipakai saat situs ditambahkan ke layar utama atau dipasang sebagai aplikasi.
- Apakah logo saya diunggah ke server?
- Tidak. Setiap ikon digambar dan dikodekan di browser Anda dan ZIP dibangun di perangkat Anda. Tidak ada yang dikirim ke mana pun, dan halaman tetap berfungsi offline setelah dimuat.