Lompat ke konten
snowkitLaunch

Setiap ikon yang dibutuhkan situs Anda, dari satu gambar

Mulai dari logo atau huruf dan dapatkan setiap ukuran favicon, ikon aplikasi, dan HTML untuk ditempel.

Mulai dari
Gaya
Bentuk
Situs Anda

Tab browser

Favicon 16 piksel
16 px
Favicon 32 piksel
32 px
Favicon 48 piksel
48 px

Layar utama

Foto
Ikon di layar utama iPhoneSitus saya
Ikon maskable dalam lingkaran, seperti di AndroidSitus saya
Catatan

Setiap ukuran dibuat di perangkat ini

Unduh semua (.zip)

Anda mendapat favicon.ico, ukuran PNG, Apple touch icon, ikon Android dan maskable, web manifest, dan HTML untuk ditempel, semuanya dalam satu .zip. Buat set ikon lengkap untuk situs web Anda dari huruf atau gambar. Gratis dan privat.

Cara membuat favicon

  1. Di bawah Mulai dari, pilih Huruf atau Gambar. Untuk gambar, tekan Pilih gambar.
  2. Untuk huruf, ketik Huruf Anda dan pilih Ketebalan, Font, Warna teks, Gaya, dan Background.
  3. Pilih Bentuk: Persegi, Membulat, atau Lingkaran. Atur Padding, atau Pertahankan background transparan.
  4. Di bawah Situs Anda, tambahkan Nama situs atau aplikasi, Nama pendek, dan Folder ikon.
  5. Periksa Pratinjau, yang menampilkan ikon di tab browser, di hasil pencarian, dan di ponsel.
  6. Tekan Salin HTML untuk kode yang ditempel ke halaman Anda, dan Unduh semua (.zip) untuk file-nya.

Fungsi tiap file

favicon.ico menampung versi 16, 32, dan 48 piksel dalam satu file dan berfungsi di setiap browser, termasuk yang lama. Favicon PNG memberi browser modern ikon tab yang tajam. apple-touch-icon.png dipakai saat seseorang menambahkan situs Anda ke layar utama iPhone atau iPad, dan ikon Android serta site.webmanifest dipakai saat situs Anda dipasang di Android atau sebagai aplikasi.

Apa itu ikon maskable?

Android memangkas ikon aplikasi menjadi lingkaran, squircle, atau persegi membulat tergantung ponselnya. Ikon maskable mengisi seluruh persegi dengan warna background Anda dan menjaga logo di 80% bagian tengah, sehingga tidak ada yang penting terpotong apa pun bentuk yang dipakai ponsel.

Tips untuk favicon yang jelas

Pada 16 piksel, detail menghilang. Huruf tebal, tanda sederhana, atau bagian logo yang paling dikenali bekerja lebih baik daripada logo lengkap dengan kata-kata. Kontras kuat antara tanda dan background membantunya menonjol di antara tab lain, di tema browser terang maupun gelap.

Menambahkan ikon ke situs Anda

  • Ekstrak file dan unggah ke folder yang Anda beri nama di bawah Folder ikon, biasanya tingkat teratas situs Anda.
  • Tempel HTML yang disalin ke bagian head setiap halaman.
  • Muat ulang halaman dan hapus cache browser Anda jika ikon lama terus muncul. Browser menyimpan favicon dalam waktu lama.
  • Mulailah dengan gambar persegi selebar minimal 512 piksel agar setiap ukuran terlihat tajam.

Siapa yang memakainya

Pemilik usaha kecil dengan situs web baru, freelancer yang membuat situs untuk klien, blogger, dan siswa yang mengunggah proyek ke online. Untuk mengubah ukuran atau mengonversi logo Anda lebih dulu, coba konverter gambar.

Pertanyaan

Apakah gambar saya diunggah?

Tidak. Ikon dibuat di browser Anda.

Format gambar apa yang bisa saya pakai?

PNG, JPG, SVG, dan WebP.

Mengapa favicon lama saya masih tampil?

Browser menyimpan favicon di cache dalam waktu lama. Hapus cache atau buka situs di jendela pribadi untuk memeriksa.

Selanjutnya ke mana

Lanjutkan dengan yang baru Anda buat, tetap di perangkat Anda.

Lainnya dari Snowkit