PNG → ICO
Favicon generator
Buat semua ikon yang dibutuhkan situs web dari satu gambar: favicon.ico, Apple touch icon, ikon aplikasi, dan HTML yang tinggal ditempel. Semuanya berlangsung di browser Anda.
Letakkan logo atau ikon Anda di sini PNG, JPG, atau SVG. Gambar persegi memberi hasil terbaik. apple-touch-icon.png · 180
icon-192.png · 192
icon-512.png · 512
Tempel di <head> situs Anda
Berjalan di browser · file tetap di perangkat Anda
Cara membuat favicon dengan favicon generator
- Tambahkan logo atau ikon Anda. PNG, JPG, atau SVG. Gambar persegi dengan bentuk sederhana memberi hasil terbaik.
- Atur jarak tepi, sudut, dan latar. Beri ruang di sekitar ikon, bulatkan sudutnya, dan isi latar jika logo Anda gelap di atas latar transparan.
- Periksa tab browser. Pratinjau menampilkan ikon pada ukuran aslinya, 16 px, di tab terang dan tab gelap.
- Unduh ZIP dan tempel HTML-nya. Unggah file ke folder root situs Anda dan tempel tag-nya ke dalam
<head>.
File yang dibuat favicon ico generator ini
| File | Ukuran | Dipakai oleh |
|---|---|---|
| favicon.ico | 16, 32, dan 48 px | Tab browser, bookmark, pintasan Windows, dan semua alat yang meminta /favicon.ico |
| icon.svg | Skalabel | Browser modern, jika gambar sumber Anda berupa SVG |
| apple-touch-icon.png | 180 px | Pintasan layar utama di iPhone dan iPad |
| icon-192.png dan icon-512.png | 192 dan 512 px | Android dan aplikasi web yang diinstal, tercantum di manifest |
| manifest.webmanifest | – | Memberi tahu browser letak ikon aplikasi |
Ikon 192 dan 512 px mengikuti contoh web app manifest di web.dev. Apple touch icon selalu diberi latar padat, karena iOS menampilkan area transparan sebagai hitam.
Favicon generator dari PNG atau gambar lain
Mulailah dari versi logo Anda yang paling bersih. Favicon tampil pada ukuran 16 × 16 piksel di tab, sehingga teks halus dan garis tipis akan hilang. Banyak merek hanya memakai simbol atau huruf pertamanya. Jika gambar sumber tidak persegi, generator meletakkannya di tengah kanvas persegi dengan margin transparan.
Gunakan slider jarak tepi jika logo menyentuh pinggir, dan isi latar jika logo gelap dan transparan, supaya tetap terlihat di tab browser bertema gelap.
Favicon generator dari SVG
Jika Anda meletakkan SVG, set ikon menyertakannya sebagai icon.svg dan HTML menambahkannya sebagai ikon tambahan. Browser yang mendukung favicon SVG memakainya di ukuran berapa pun, sedangkan browser lain kembali ke favicon.ico. Ikon PNG digambar dari vektornya, sehingga hasilnya tajam.
Favicon generator dan Google Penelusuran
Google dapat menampilkan favicon Anda di samping hasil penelusuran. Panduannya meminta gambar persegi minimal 8 × 8 piksel dan menyarankan ukuran lebih besar dari 48 × 48 piksel (Google Search Central). Ukuran 48 px di dalam favicon.ico dan ikon 192 px sudah memenuhinya. Untuk penjelasan lebih lengkap, baca panduan ukuran favicon kami.