Cara membuat favicon.

Buka Favicon / ICO Generator dan pilih Image. Unggah PNG, JPG, JPEG, WebP atau GIF, atau pilih Try a sample. Contoh yang dikerjakan menggunakan favicon-orbit.png, tanda orbit ungu berukuran 512 × 512 piksel dengan sudut transparan. Inputnya adalah 202,491 byte.

Untuk merek tanpa logo yang sudah jadi, pilih Text pada halaman alat. Masukkan satu atau dua huruf dan pilih Continue. Editor menawarkan font Modern sans, Classic serif, dan Monospace, ditambah warna teks dan latar belakang yang terpisah. Hingga tiga karakter diterima, tetapi karakter tambahan bisa menjadi sulit dikenali pada ukuran kecil.

Simpan karya seni asli. Generator membuat file ikon baru dan tidak menimpa sumbernya. Input GIF menjadi ikon diam, bukan favicon animasi.

Untuk monogram, menu Font dimulai dengan tiga gaya yang disertakan. Pilih Use system fonts pada browser desktop yang didukung dan izinkan akses untuk menambahkan font yang terinstal di perangkat Anda. Gunakan chevron sebelumnya dan berikutnya untuk membandingkan font yang berdekatan, atau pilih keluarga font dan periksa pratinjau langsung, terutama pada 16 piksel. Font tetap ada di perangkat Anda; gaya yang disertakan berfungsi tanpa izin.

Editor menampilkan tab browser terang dan gelap serta pratinjau pada ukuran ikon umum. Periksa contoh 16 piksel terlebih dahulu; ini adalah tes paling ketat apakah tanda tersebut tetap dapat dikenali. Pratinjau Apple Touch mewakili ekspor 180 piksel dan ditampilkan lebih kecil di ruang kerja.

Di ponsel, buka Settings. Biarkan Create from diatur ke Uploaded image dan Image fit diatur ke Show the whole image. Untuk sampel ini, atur Space around content ke 0 dan aktifkan Transparent background. Sumber sudah berisi bentuk ungu bulatnya sendiri dan margin yang jelas, jadi tidak memerlukan latar belakang berwarna tambahan.

Dengan sumber yang berbeda, Show the whole image mempertahankan tepinya, sementara Fill the icon mungkin memotongnya. Rounded square, Square, dan Circle menentukan bentuk luar. Transparent background mempertahankan area yang jelas tetapi tidak dapat menghapus latar belakang buram yang sudah digambar ke dalam foto. Tinjau pratinjau terkecil setelah setiap perubahan pembingkaian.

Di bawah Unduh, pilih paket ikon Situs web (ZIP) untuk contoh ini. Biarkan Nama situs web sebagai My website untuk sampel, atau ganti dengan nama merek asli untuk proyek Anda sendiri. Nama ini digunakan dalam site.webmanifest; nama ini tidak ditambahkan sebagai teks di atas gambar.

Pilih Mulai. Peramban menghasilkan favicon.ico tujuh bingkai dengan gambar persegi pada 16, 24, 32, 48, 64, 128, dan 256 piksel. Ini juga membuat ikon PNG pada 16, 32, 48, 180, 192, dan 512 piksel, manifes, dan instruksi instalasi. Hasilnya adalah satu ZIP, bukan tombol unduh terpisah untuk setiap ikon.

Jika Anda hanya memerlukan favicon.ico klasik, pilih ICO Multi-ukuran sebagai gantinya. Ini berguna ketika platform situs web menerima unggahan ICO dan tidak memerlukan paket terpisah.

Unduh menyimpan website-icons.zip. Contoh kerja yang sebenarnya berisi sembilan file dan berukuran 304,351 byte. Perbandingan di atas menunjukkan sumber 512 piksel di samping bingkai 256 piksel asli yang diekstrak dari ICO yang diekspor, bukan tangkapan layar peramban simulasi.

Ekstrak ZIP, unggah file ikon ke root situs web Anda, dan baca INSTALL.txt. Ini mencakup tag tautan HTML untuk ICO, ikon PNG, ikon Apple Touch, dan manifes web. Jika Anda menempatkan file di subfolder, perbarui jalur HTML dan jalur ikon di dalam site.webmanifest.

Periksa situs Anda di tab peramban baru dan di perangkat yang Anda pedulikan. Peramban dapat menyimpan favicon dalam cache, jadi ikon lama tidak langsung membuktikan instalasi gagal. Simpan gambar sumber dan paket yang diunduh sebelum menyegarkan editor, karena penyegaran akan kembali ke halaman alat utama.