Tidak. SVG diterima sebagai format sumber, tetapi paket berisi file PNG raster dan ICO. Alat ini tidak membuat favicon vektor atau animasi.
Pembuat Favicon
Ubah satu gambar menjadi ZIP berisi ICO dengan beberapa ukuran, lima ikon PNG, dan web manifest. Gunakan contoh pemasangan di bawah untuk menghubungkan file tersebut ke situs web Anda.
File dalam paket favicon
Unduhan berupa favicon-package.zip yang berisi tujuh file. HTML ditampilkan sebagai contoh pemasangan dalam artikel ini, bukan sebagai file di dalam ZIP.
| File | Ukuran atau isi | Kegunaan |
|---|---|---|
| favicon.ico | 16×16, 32×32, dan 48×48 dalam satu file | Ikon situs web dengan beberapa ukuran. |
| favicon-16x16.png | 16×16 | Ikon browser berukuran kecil. |
| favicon-32x32.png | 32×32 | Ikon browser berukuran lebih besar. |
| apple-touch-icon.png | 180×180 | Referensi ikon layar utama Apple. |
| android-chrome-192x192.png | 192×192 | Ikon yang dirujuk oleh web manifest. |
| android-chrome-512x512.png | 512×512 | Ikon berukuran lebih besar yang dirujuk oleh web manifest. |
| manifest.json | Nama situs, warna, dan dua referensi ikon | Manifest awal yang perlu Anda tinjau untuk situs sendiri. |
Masukan: PNG, JPG/JPEG, WebP, GIF, atau SVG. Hasilnya berupa gambar ICO dan PNG statis; mengunggah SVG tidak menghasilkan favicon SVG.
Buat dan pasang file favicon Anda
1
Pilih gambar sumber yang mudah dikenali
Unggah gambar sederhana. Sumber persegi dengan ukuran minimal 512×512 piksel berguna untuk hasil PNG terbesar; gambar yang lebih besar tidak dapat memperbaiki desain yang kurang jelas.
2
Buat dan unduh ZIP
Pilih Buat Paket Favicon dan unduh ZIP yang telah selesai. Ekstrak ZIP sebelum menambahkan file ke situs Anda.
3
Tinjau manifest dan publikasikan file
Ubah nama situs dan warna bawaan dalam manifest.json sesuai kebutuhan. Tempatkan file pada URL publik di situs Anda dan perbarui jalurnya jika menggunakan subfolder.
4
Tambahkan referensi HTML dan periksa hasilnya
Gunakan contoh di bawah pada bagian head halaman Anda. Pastikan URL ikon dan manifest dapat dimuat, lalu periksa ikon di browser.
Tambahkan ikon ke situs web Anda
Contoh ini mengasumsikan file disajikan dari direktori root situs web. Tambahkan referensi ini ke bagian head halaman dan sesuaikan jalurnya dengan penempatan file Anda.
<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#ffffff">Periksa detail berikut sebelum memublikasikan file:
| Pemeriksaan | Yang perlu dilakukan |
|---|---|
| Jalur file publik | Garis miring di awal menandakan direktori root situs web. Untuk subfolder, perbarui nilai href dalam HTML dan nilai src ikon di dalam manifest.json. |
| Nilai bawaan manifest | Nilai name dan short_name yang dihasilkan adalah My Website; theme_color dan background_color bernilai #ffffff. Tinjau nilai tersebut setelah mengunduh. Nilai ini tidak mengubah warna gambar ikon. |
| Konfigurasi situs yang sudah ada | Periksa deklarasi ikon lain dari tema atau framework Anda. Jangan biarkan referensi favicon lama tetap ada bersama pengaturan baru. |
Manifest yang memuat ikon belum merupakan aplikasi web lengkap yang dapat dipasang atau digunakan secara offline. Pembuat favicon ini tidak menyediakan service worker atau menjamin pemasangan pada semua perangkat.
Pastikan ikon terbaca pada ukuran kecil
🔎
Periksa hasil 16×16
Huruf kecil dan garis tipis dapat menghilang. Utamakan simbol sederhana, kontras yang jelas, dan ruang yang cukup di sekitar objek.
↔
Periksa bentuk dan ruang tepi
Gambar sumber yang tidak persegi disesuaikan agar muat dalam kanvas persegi dengan ruang tepi transparan. Gambar kecil dapat diperbesar. Gunakan gambar persegi yang telah disiapkan jika Anda memerlukan pembingkaian yang presisi.
Pilih paket keluaran sesuai kebutuhan Anda
Halaman ini membuat file favicon situs web dari gambar yang sudah ada; ini bukan alat untuk menggambar logo.
Hanya memerlukan satu file ICO?
Gunakan PNG ke ICO untuk konversi PNG ke ICO tanpa paket situs web.
Sedang membuat aplikasi seluler native?
Gunakan Pembuat Ikon Aplikasi untuk aset gambar native iOS/Android. File tersebut memiliki kegunaan yang berbeda dari favicon situs web.
Gambar diunggah untuk diproses di server. Unduh ZIP saat siap; file sementara mengikuti proses pembersihan layanan.
Pertanyaan tentang pemasangan favicon
Periksa dahulu URL file yang telah dipublikasikan dan deklarasi ikon pada halaman. Browser mungkin menyimpan favicon dalam cache; coba sesi browser baru setelah memastikan situs mengarah ke file baru.
Formulir saat ini hanya menyediakan pilihan gambar. Ubah kolom name, short_name, theme_color, dan background_color pada manifest yang diunduh sesuai situs Anda, dan pastikan nilai theme-color dalam HTML tetap konsisten.
Tidak. Paket ini menyediakan file ikon dan manifest awal. Pemasangan dan penggunaan offline memerlukan konfigurasi situs tambahan; paket ini tidak menambahkan fitur tersebut secara otomatis.