Pembuat Favicon
Satu gambar masuk, satu set favicon lengkap keluar — dengan pratinjau nyata 16px sebelum Anda menetapkan pilihan
Lepaskan logo Anda di sini
atau klik untuk memilih file — PNG, JPG, atau WebP. Gambar persegi berukuran 512 px atau lebih besar paling cocok.
Tidak ada yang diunggah. Setiap berkas digambar dan dikodekan dalam peramban.
Sebelum Anda mulai dengan Pembuat Favicon
Buat set favicon multiukuran, ikon Apple touch, ikon Android, dan cuplikan HTML siap salin dari satu gambar di peramban.
Paling cocok untuk
- Membuat berkas favicon dan ikon seluler yang umum untuk situs web
- Memeriksa keterbacaan logo pada ukuran peramban sebenarnya 16px
- Menyalin cuplikan head dan manifest siap pakai ke situs
Ketahui sebelum mulai
- Pembuat dimulai dari satu sumber raster dan tidak merancang ulang logo
- Lambang sangat detail mungkin tidak tetap terbaca pada 16px
- Favicon yang diubah dapat tetap tersimpan dalam cache peramban setelah penerapan
Lanjutkan alur kerja
Cara menggunakannya
1. Muat logo Anda
Masukkan PNG, JPG atau WebP — gambar persegi setidaknya 512 px memberi hasil terbaik karena 512 adalah berkas terbesar yang dibuat dan tidak ada detail baru yang diciptakan saat memperbesar. Gambar tidak persegi mendapat bingkai pangkasan persegi yang dapat diseret sepanjang sisi panjangnya, atau Anda dapat beralih ke Fit dan menambahkan bilah kosong. Dalam kedua cara, gambar tidak pernah diregangkan. Panel melaporkan ukuran dan apakah gambar transparan, serta memperingatkan ketika sumber di bawah 512 px karena berkas 512 px kemudian diperbesar dan menjadi lembut. Fit merupakan pilihan jujur ketika tidak ada bagian yang boleh dipotong, tetapi perhatikan konsekuensinya: logo lebar menjadi logo kecil dengan pita kosong di atas dan bawah, yang merupakan banyak ruang terbuang dalam tab 16 px.
2. Periksa pratinjau ukuran asli
Tiga persegi digambar pada 16, 32 dan 180 piksel nyata di latar terang dan gelap, dan tab peramban tiruan di bawah menempatkan versi 16 px di samping judul seperti biasanya. Inilah langkah yang dilewati kebanyakan pembuat dan menyelamatkan Anda: jika persegi 16 px noda, ekspor sebanyak apa pun tidak memperbaiki, dan perlu logo sederhana. Penggeser ukuran gambar dan radius sudut mengubah pratinjau sama, sehingga ruang tambahan dan pembulatan terlihat sebelum unduhan.
Ada dua detail pada panel itu yang perlu diketahui. Garis putus-putus di sekitar setiap persegi menunjukkan batas ikon sebenarnya — tanpanya, ikon yang diberi ruang kosong atau diperkecil dengan penggeser ukuran gambar tidak dapat dibedakan dari ikon yang memang lebih kecil, karena area kosong mengikuti warna contoh latar. Contoh latar terang dan gelap juga sama-sama menampilkan transparansi yang tersisa dari pilihan latar Anda. Dengan begitu, halo pucat yang tertanam dalam gambar terlihat pada latar gelap, dan halo gelap terlihat pada latar terang. Tab browser tiruan adalah bingkai CSS di sekitar kanvas 16 px yang sama, bukan browser sungguhan; keberadaannya berguna karena 16 px yang dilihat sendirian masih terasa lebih besar daripada saat berada di samping judul halaman.
3. Pilih set dan unduh
Pilih set minimal atau set lama, tekan Buat, lalu unduh berkas satu per satu atau ambil ZIP. Salin cuplikan head dan manifest dari panel di bawahnya — keduanya hanya mencantumkan berkas yang benar-benar Anda buat. Blok manifest merupakan objek JSON lengkap yang dapat langsung disimpan ke site.webmanifest; tetap memerlukan theme_color dan sebuah background_color, yang bebas Anda pilih. Isi nama aplikasi dan nama itu muncul sebagai apple-mobile-web-app-title dalam head dan sebagai name dalam manifes. Biarkan kosong dan kedua baris sama sekali tidak dikeluarkan, sehingga iOS memakai judul halaman Anda — biasanya pilihan tepat.
Ukuran mana yang sebenarnya Anda perlukan?
| Ukuran | Berkas | Digunakan untuk |
|---|---|---|
| 16 × 16 | favicon.ico | Tab peramban dan daftar bookmark pada layar kepadatan standar. |
| 32 × 32 | favicon.ico | Tab layar kepadatan tinggi, serta taskbar dan pintasan Windows. 48 disertakan karena alasan sama. |
| 180 × 180 | apple-touch-icon.png | Ubin layar utama iOS ketika situs disimpan. Harus tidak transparan. |
| 192 × 192 | android-chrome-192x192.png | Layar utama Android dan ikon kecil dalam manifest aplikasi web. |
| 512 × 512 | android-chrome-512x512.png | Layar pembuka aplikasi terpasang dan ikon manifest besar yang diperlukan ajakan pemasangan. |
Bagian .ico kontainer menjaga daftar ini tetap pendek: memuat beberapa gambar dalam satu file, sehingga 16, 32, dan 48 disertakan bersama dan browser memilih yang diperlukan. Itulah sebabnya satu favicon.ico di direktori akar mencakup semua kasus tab tanpa tag tambahan. PNG 16 dan 32 terpisah hanya diperlukan untuk browser lama yang mengabaikan ICO; itulah tujuan set lama.
Dua set file yang mungkin pernah Anda lihat di tempat lain sengaja tidak disertakan. Tile Windows Metro — browserconfig.xml dan mstile-*.png gambar — milik layar mulai Windows 8 dan fitur pinned-site yang menyertainya; Edge berhenti membacanya bertahun-tahun lalu. Favicon MacBook Touch Bar menghilang bersama perangkat kerasnya. Membuat keduanya sekarang hanya menambah file yang tidak diminta dan tag yang tidak dibaca, persis keruwetan yang hendak dihindari set Minimal.
Mengapa logo Anda mungkin tidak cocok pada 16px
Ikon 16 × 16 memiliki total 256 piksel. Logo berbentuk tulisan yang terbaca sempurna pada kartu nama tidak memiliki cukup ruang untuk dirender pada skala itu, dan naluri umum — memperbesar teks — tidak membantu karena batasannya bukan ukuran huruf. Batasannya adalah kepadatan garis: berapa banyak goresan dan celah berbeda yang Anda minta agar dimuat dalam enam belas piksel. Setiap goresan memerlukan setidaknya satu piksel, begitu pula celah di sebelahnya, sehingga apa pun dengan lebih dari beberapa unsur di tiap sisi akan berubah menjadi abu-abu.
Yang bertahan adalah satu bentuk dengan satu atau dua warna dan ruang internal yang lapang: satu huruf, bukan satu kata; siluet, bukan garis luar; bentuk padat, bukan goresan tipis. Gradasi halus menjadi rata, garis sangat tipis menghilang atau mengalami aliasing menjadi garis bertitik, dan detail dekat tepi paling dahulu hilang. Buat versi lambang yang disederhanakan untuk ikon dan periksa dalam pratinjau di atas — membandingkan persegi 16 px dengan 180 px biasanya memperjelas keputusan. Jika lambang tidak terbaca pada persegi pertama, lambang juga tidak akan terbaca di tab, dan tidak ada pengaturan ekspor yang dapat memperbaikinya.
Penggeser ukuran gambar adalah bagian kompromi sama. Ruang sekitar logo yang memenuhi tepi lebih rapi pada 180 px, tetapi pada 16 px setiap persen margin mengurangi 256 piksel yang tersedia — turun ke 80% dan karya dirender dalam sekitar 164. Gunakan ketika logo benar-benar bertabrakan dengan bingkai dan periksa persegi 16 px sesudahnya, bukan mempercayai versi besar.
Pertanyaan
Apakah gambar saya diunggah ke server?
Tidak. Gambar didekode oleh peramban, digambar ke canvas, dan dikodekan menjadi PNG oleh Canvas API. Berkas ICO dirakit dari PNG tersebut dalam JavaScript. Ini situs statis tanpa endpoint unggahan dan tanpa akun — Anda dapat memuat halaman, memutus jaringan, dan pembuat tetap bekerja.
Mengapa apple-touch-icon opak?
iOS tidak mempertahankan transparansi pada ikon layar utama: alfa dikompositkan di atas hitam, sehingga logo transparan menjadi tile gelap. Generator mengisi kanvas 180 × 180 dari tepi ke tepi dengan warna pilihan sebelum menggambar — termasuk sudut, bahkan saat radius sudut diatur, karena iOS menerapkan mask-nya sendiri. File lain mengikuti kontrol Latar dan mempertahankan alfa saat diatur ke Transparan, karena tab dan launcher Android mendukungnya.
Apa pengaruh radius sudut terhadap warna latar?
Radius memotong persegi, sehingga sudut ikon membulat dibuang dan transparan — warna latar mengisi bentuk di dalam kurva, bukan sudut di luar. Itu sesuai untuk tab atau peluncur Android yang menggambar ikon pada area sendiri. apple-touch-icon pengecualian: isiannya dilukis sampai tepi sebelum dipotong, termasuk sudut, karena iOS menerapkan mask membulat sendiri dan ikon yang sudah membulat memperlihatkan celah di empat sudut.
Apakah saya masih memerlukan favicon-16x16.png?
Biasanya tidak. Semua browser terkini membaca gambar 16 dan 32 px dari favicon.ico, sehingga PNG terpisah merupakan duplikat. Berkas ini hanya diperlukan untuk peramban lama yang mengabaikan berkas ICO, dan itulah yang ditambahkan oleh set lama. Jika Anda ragu, set minimal merupakan pilihan bawaan yang lebih aman: lebih sedikit berkas, dan cuplikan head tetap singkat.
Bagaimana dengan favicon SVG?
Sumber raster tidak dapat menjadi SVG sejati. Menjiplak PNG menghasilkan pendekatan dengan tepian berbeda, bukan karya asli Anda, sehingga alat ini tidak berpura-pura menawarkannya. Jika Anda menginginkan favicon SVG, ekspor dari berkas vektor tempat logo dibuat dan tambahkan bersama ICO — peramban yang mendukungnya menggunakan SVG, sedangkan sisanya memakai cadangan. Tetap simpan ICO; dukungan SVG tidak universal.
Terkait
Untuk latar belakang lengkap tentang setiap ukuran, tag head, manifest, dan jebakan cache yang membuat favicon berubah tampak tetap sama, baca panduan ukuran favicon — panduan lengkap di balik alat ini. Jika sumber Anda memiliki format salah atau perlu diratakan ke latar terlebih dahulu, Konverter Gambar menanganinya secara batch.