Pembuat favicon dan ikon aplikasi

Apa yang dilakukan alat ini

Sebuah situs web butuh lebih dari satu gambar kecil agar tampil baik di mana-mana. Tab browser desktop meminta ikon 16 atau 32 piksel, Windows dan hasil pencarian Google memakai 48, layar utama iPhone ingin 180, dan Android serta aplikasi web yang terpasang meminta 192 dan 512 lewat file manifest. Alat ini mengambil satu gambar dan membuat seluruh set sekaligus: favicon.ico, enam file PNG, manifest web, dan baris HTML yang menghubungkannya.

Semuanya digambar di browser Anda. Gambar tidak pernah diunggah, jadi logo yang belum dirilis tetap privat.

Cara membuat ikon

1. Letakkan logo di kotak atau pilih file. PNG, JPG, WebP, GIF, dan SVG semuanya bisa. Gambar persegi 512 piksel atau lebih memberi hasil terbaik, dan SVG tetap tajam di setiap ukuran karena digambar ulang untuk masing-masing.
2. Lihat daftar pratinjau. Pakai Penyesuaian untuk mempertahankan seluruh gambar atau mengisi kotak dengan memotong sisi panjang, Jarak tepi untuk memberi ruang di sekelilingnya, dan Sudut membulat untuk bentuk yang lebih lembut. Nyalakan latar untuk mengisi ikon dengan warna, yang juga menjadi warna tema di manifest.
3. Ketik nama aplikasi lalu unduh file satuan atau seluruh ZIP.

Yang Anda dapatkan

• favicon.ico berisi tiga gambar, 16, 32, dan 48 piksel, dalam satu file. File dimulai dengan header 6 byte dan satu entri 16 byte per gambar, jadi direktorinya sepanjang 54 byte sebelum gambar pertama. Setiap gambar di dalamnya adalah PNG, yang dibaca semua browser saat ini.
• favicon-16x16.png, favicon-32x32.png, dan favicon-48x48.png untuk tempat yang meminta file terpisah.
• apple-touch-icon.png berukuran 180 kali 180 piksel. iOS mewarnai transparansi dengan hitam dan membulatkan sudutnya sendiri, jadi ikon ini selalu persegi dan selalu terisi, dengan putih jika Anda tidak memilih latar.
• icon-192.png dan icon-512.png untuk Android dan aplikasi web yang terpasang.
• site.webmanifest, file JSON kecil yang memberi nama aplikasi dan mencantumkan dua ikon besar.

Memasangnya di situs

Unggah file ke root situs agar terbuka di /favicon.ico dan /icon-192.png, lalu tempel baris yang dihasilkan ke head setiap halaman. Browser juga meminta /favicon.ico sendiri, bahkan tanpa HTML, itulah sebabnya nama file penting. Jika file disimpan di folder lain, ubah jalurnya di cuplikan dan di manifest.

Tips yang menghemat waktu

• Rancang untuk 16 piksel. Garis tipis dan teks kecil menghilang. Satu bentuk tebal atau satu dua huruf masih terbaca.
• Pakai jarak tepi untuk ikon maskable. Android bisa memotong ikon menjadi lingkaran atau persegi membulat. Menjaga bagian penting di 80 persen tengah itu aman.
• Browser menyimpan favicon sangat lama. Setelah mengubahnya, muat ulang tanpa cache atau buka di jendela pribadi untuk melihat yang baru.
• Periksa kontras. Logo gelap di latar transparan lenyap di tema gelap browser. Latar berwarna mengatasinya.