Utilia
Kategori ▾
Bahasa: id ▾

Pembuat Favicon

Buat favicon.ico, ikon PNG, apple-touch-icon, dan site.webmanifest dari satu gambar atau emoji, lengkap dengan tag HTML siap tempel. Unduh ZIP, tanpa unggah.

Sumber

Penyesuaian
site.webmanifest

Cara membuat favicon

  1. Di bagian Sumber, pilih Gambar atau Teks atau emoji. - Gambar: letakkan file PNG, JPG, WebP, atau SVG. Logo persegi minimal 512 × 512 px paling baik. Pilih Seluruh gambar agar gambar muat di dalam ikon, atau Isi dan potong untuk menutupi seluruh persegi. - Teks atau emoji: ketik satu huruf, inisial, atau emoji, lalu pilih Font, Tebal, dan Warna teks.
  2. Atur Warna latar, atau centang Latar transparan. Pilih Bentuk (Persegi, Membulat, atau Lingkaran) dan Padding (%) untuk menyisakan ruang di sekeliling isi ikon.
  3. Jika perlu, buka site.webmanifest untuk mengisi Nama aplikasi (web manifest), Nama singkat, Warna tema, dan URL folder ikon (biarkan / jika file ditaruh di akar situs Anda).
  4. Klik Buat favicon. Ikon muncul dalam ukuran aslinya, di samping tab browser tiruan. Setelah itu, setiap perubahan langsung memperbarui ikon.
  5. Klik Unduh ZIP, unggah file ke situs Anda, lalu Salin tag dan tempel di dalam <head> halaman Anda.

Isi file ZIP

File Ukuran Dipakai oleh
favicon.ico 16, 32, dan 48 px Tab browser, bookmark, browser lama, Windows
favicon-16x16.png 16 × 16 Tab browser
favicon-32x32.png 32 × 32 Tab pada layar berkepadatan tinggi, pintasan taskbar
apple-touch-icon.png 180 × 180 Layar utama iPhone dan iPad
android-chrome-192x192.png 192 × 192 Layar utama Android (web manifest)
android-chrome-512x512.png 512 × 512 Layar pembuka saat instalasi (web manifest)
site.webmanifest — Nama, warna, dan ikon situs yang dapat diinstal
favicon-tags.html — Tag HTML, sebagai referensi

File ICO berisi tiga gambar PNG, format yang dibaca Windows (sejak Vista) dan semua browser terkini. Apple-touch-icon selalu disimpan dengan latar solid, karena iOS menampilkan piksel transparan sebagai hitam; jika latarnya transparan, warna putih yang dipakai.

Tag HTML

Tag yang dihasilkan terlihat seperti ini (dengan URL folder Anda):

<link rel="icon" href="/favicon.ico" sizes="48x48">
<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="/site.webmanifest">
<meta name="theme-color" content="#ffffff">

Browser juga meminta /favicon.ico secara otomatis di akar domain Anda, jadi menaruhnya di sana tetap membantu, bahkan pada halaman tanpa tag tersebut.

Tips desain

  • Buat sederhana. Pada 16 × 16 px, detail akan hilang. Satu huruf, simbol tebal, atau versi paling sederhana dari logo Anda paling mudah dibaca.
  • Periksa pratinjau dalam ukuran asli. Ikon 16 px di tab tiruan adalah yang benar-benar dilihat pengunjung.
  • Perhatikan mode gelap. Logo gelap di latar transparan bisa menghilang pada tema browser yang gelap; latar berwarna atau sedikit padding membantu.
  • Emoji tampak berbeda di tiap sistem, karena setiap platform menggambar emoji dengan gayanya sendiri. File PNG mempertahankan tampilan perangkat Anda.

Pertanyaan yang sering diajukan

Ukuran apa saja yang diperlukan favicon?

Dalam praktiknya: favicon.ico dengan 16, 32, dan 48 px, apple-touch-icon 180 px, serta PNG 192 dan 512 px untuk web manifest. Alat ini membuat semuanya dari satu sumber.

Bisakah saya memakai logo SVG?

Bisa. File SVG digambar dalam resolusi tinggi sebelum ikon dibuat. SVG ditampilkan sebagai gambar biasa, sehingga skripnya tidak pernah dijalankan.

Bagaimana cara membuat favicon emoji?

Pilih Teks atau emoji, ketik atau tempel emoji, pilih latar atau biarkan transparan, lalu buat. Hasilnya berupa PNG dan ICO asli, sehingga berfungsi di semua browser.

Mengapa favicon baru saya tidak muncul?

Browser menyimpan favicon di cache dengan sangat agresif. Muat ulang dengan cache dibersihkan, buka situs di jendela privat, atau tambahkan versi pada URL, seperti /favicon.ico?v=2.

Apakah gambar saya diunggah?

Tidak. Ikon, file ZIP, dan manifest dibuat di browser Anda; tidak ada yang meninggalkan perangkat Anda.

Alat terkait