IconEditor

Pembuat favicon online gratis

Pembuat favicon: buat favicon.ico dari logo Anda

Ubah PNG, JPG, WebP, atau SVG menjadi favicon.ico 16, 32, dan 48 px, rapikan ukuran mungil itu piksel demi piksel, lihat pratinjaunya di tab browser, dan salin tag <link>. Gratis, transparan, tidak ada yang disimpan.

Buat favicon

Cara kerjanya

Buat favicon dalam tiga langkah

Sekitar tiga menit dari logo sampai file yang siap diunggah. Mulailah dari gambar persegi minimal 256 px, atau gambar favicon dari nol.

  1. Dialog impor dengan sebuah logo termuat dan bingkai pemotong persegi di atasnya
    01

    Impor logo Anda

    Tekan Impor, pilih PNG, JPG, WebP, atau SVG (atau jatuhkan ke halaman), seret bingkai persegi ke bagian yang Anda inginkan, lalu klik Impor.

  2. Grid piksel 64 × 64 dengan kursor kuas bulat di atas gambar
    02

    Perbaiki ukuran 16 dan 32 px

    Buka ukuran kecil di grid piksel, buang detail halus, dan tebalkan garis tipis. Buka Pratinjau di Windows untuk melihat ikon dalam mock-up tab browser.

  3. Dialog ekspor dengan ukuran yang disertakan, nama file, tombol Unduh .ICO, dan tab cuplikan kode
    03

    Ekspor favicon.ico

    Tekan Ekspor, centang hanya 16, 32, dan 48 px, ketik favicon sebagai nama file, lalu klik Unduh .ICO. Tab Web favicon menampilkan tag yang tinggal ditempel.

File apa saja

favicon.ico, ikon Apple touch, PNG, dan SVG

Fungsi tiap file, dan mana saja yang dibuatkan IconEditor untuk Anda.

FileDipakai untukDari IconEditor?
favicon.ico (16, 32, 48 px)Semua browser desktop, bookmark, dan alat yang meminta /favicon.ico tanpa membaca HTML AndaYa. Centang 16, 32, dan 48 px saat ekspor.
PNG 16 / 32 / 48 pxTag eksplisit <link rel="icon" type="image/png" sizes="32x32">Ya. Unduh PNG untuk satu ukuran, atau ZIP semua ukuran yang dicentang.
apple-touch-icon.png (180 px)Layar utama iPhone dan iPadSebagian. Ekspor PNG 256 px dan perkecil ke 180 px dengan alat gambar; tidak ada slot 180 px.
PNG 192 dan 512 pxAndroid, PWA, manifes aplikasi webTidak. Ukuran terbesar adalah 256 px. Skalakan karya asli Anda ke 192 dan 512 px dengan alat gambar.
icon.svgBrowser modern; bisa diskalakan ke ukuran apa punTidak. IconEditor tidak menulis SVG. Jika logo Anda sudah SVG, unggah apa adanya di samping .ico.
manifest.webmanifestNama dan ikon untuk aplikasi web yang bisa dipasangTidak. File ini Anda tulis sendiri (tiga baris cukup untuk memulai).

Untuk situs web biasa — blog, toko, halaman perusahaan — .ico ditambah ikon Apple touch sudah cukup. PNG yang lebih besar baru penting jika orang memasang situs Anda sebagai aplikasi.

Pasang di situs Anda

Tag <link> untuk disalin

Unggah file ke root situs Anda, lalu tambahkan tag di dalam <head>.

Minimal: hanya .ico

<link rel="icon" href="/favicon.ico" sizes="any">

Ini persis cuplikan di tab Web favicon pada dialog ekspor. Browser juga meminta /favicon.ico sendiri bila tidak ada tag, jadi file di root situs tetap berfungsi tanpanya.

Disarankan: ico + SVG + ikon Apple touch

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">

Bila Anda juga menyediakan ikon SVG, tulis sizes="32x32" pada link .ico: jika tidak, Chrome bisa lebih memilih .ico daripada SVG. Hilangkan baris SVG dan manifes jika Anda tidak punya file-file itu.

Yang dilihat Google Search

Google menampilkan favicon Anda di samping hasil pada pencarian ponsel dan desktop. Pedomannya meminta gambar persegi dengan ukuran kelipatan 48 px (entri 48 px di .ico Anda memenuhinya), satu favicon untuk seluruh situs, URL yang stabil, halaman yang boleh dirayapi Googlebot, dan file yang tidak diblokir di robots.txt. Setelah perubahan, beri waktu beberapa hari hingga minggu agar muncul di hasil.

Desain

Favicon yang tetap terbaca di 16 piksel

Seluruh ikon kira-kira setinggi satu huruf kecil.

Mock-up menu Start dan tab browser dari dialog Pratinjau, menampilkan entri 32 px dan 16 px
Pratinjau menampilkan entri 32 dan 16 px di menu Start dan tab browser.

Satu bentuk, satu atau dua warna

Pakai inisial atau bagian paling sederhana dari logo. Logotype yang terbaca di 200 px menjadi noda di 16 px.

Edit versi 16 px dengan tangan

Pengecilan otomatis mengaburkan garis satu piksel. Di grid piksel Anda bisa menaruh sendiri tiap dari 256 piksel; butuh lima menit dan hasilnya terlihat.

Periksa tab terang dan gelap

Browser menampilkan favicon di latar terang maupun gelap. Lihat pratinjau ikon di keduanya dan hindari isi hitam murni atau putih murni di atas latar transparan.

Atur transparansi dengan sengaja

Favicon transparan menyatu dengan tab; persegi bulat berwarna tetap terlihat di tema apa pun. Pilih dengan Latar dan Sudut di bawah kanvas.

Prinsipnya sama dengan ikon aplikasi Windows, makanya satu file bisa dipakai untuk keduanya. Panduan desain ikon dan daftar ukuran ikon membahasnya lebih dalam.

Pertanyaan

Favicon, dijelaskan

Lebih banyak di FAQ lengkap.

Apa itu favicon?

Favicon adalah ikon kecil yang ditampilkan browser di samping judul halaman pada tab, di bookmark, dan di riwayat; mesin pencari seperti Google juga menampilkannya di samping hasil Anda di ponsel. Namanya dari “favorite icon”. Secara teknis ia gambar kecil — secara tradisional berupa favicon.ico multi-ukuran di root situs, kini sering disertai SVG dan PNG untuk ponsel.

Ukuran favicon apa yang saya butuhkan?

favicon.ico berisi 16, 32, dan 48 px mencakup semua browser desktop dan memenuhi aturan Google “kelipatan 48 px”. Tambahkan apple-touch-icon 180 × 180 px untuk layar utama iOS dan, jika Anda punya aplikasi web, PNG 192 dan 512 px di manifes web. IconEditor membuat .ico dan PNG pada tujuh ukurannya (hingga 256 px); file 180, 192, dan 512 px harus Anda buat dengan alat gambar.

Apakah generator ini membuat paket favicon lengkap?

Tidak, dan ia jujur soal itu. Ia membuat favicon.ico dan memberi PNG 16, 24, 32, 48, 64, 128, dan 256 px, plus cuplikan <link>. Ia tidak membuat file 180, 192, atau 512 px, manifes web, maupun file browserconfig. Untuk kebanyakan situs, .ico ditambah apple-touch-icon sudah cukup; jika perlu set lengkap, rancang ikonnya di sini dan pakai generator paket untuk ukurannya.

Sebaiknya pakai ICO, PNG, atau SVG untuk favicon?

Ketiganya bisa. .ico adalah yang masih diminta otomatis oleh semua browser dan banyak alat di /favicon.ico, jadi sediakan. SVG bisa diskalakan ke ukuran apa pun dan dapat mengikuti mode gelap, tetapi browser lama mengabaikannya. PNG adalah format paling sederhana untuk ikon Apple touch. Set yang umum dan kokoh adalah favicon.ico + SVG + PNG 180 px.

Bisakah membuat favicon dari JPG atau SVG?

Bisa. JPG, PNG, WebP, GIF, BMP, dan SVG semuanya diimpor dengan cara yang sama. JPG tidak punya transparansi, jadi favicon-nya persegi penuh kecuali Anda menghapus latar atau mengatur sudut. SVG dirasterisasi pada 1024 px lalu diperkecil, yang memberi hasil paling bersih.

Mengapa favicon saya tidak berubah setelah mengunggah yang baru?

Browser menyimpan cache favicon dengan sangat agresif, sering terpisah dari halamannya. Muat ulang dengan Ctrl+F5, buka URL file-nya langsung lalu segarkan, atau beri file baru nama lain (misalnya favicon-v2.ico) dan perbarui link-nya. Hasil pencarian bisa butuh beberapa hari hingga minggu untuk menampilkan perubahan.

Apakah generator ini gratis, dan apakah gambar saya disimpan?

Gratis, tanpa akun dan tanpa watermark. Gambar Anda dikonversi di memori server kami lalu langsung dibuang; pekerjaan Anda hanya tersimpan di browser Anda sendiri. Lihat kebijakan privasi.

Terkait

Lanjutkan

Konverter Konverter PNG ke ICO Panduan lengkap dari PNG, JPG, SVG, atau WebP ke .ico multi-ukuran. Konverter Konverter ICO Semua format masuk dan keluar, dan ukuran mana yang dicentang. Konverter ICO ke PNG Ambil ukuran PNG dari favicon.ico yang sudah ada. Referensi · 6 mnt Daftar ukuran ikon Windows Tabel ukuran favicon dan semua konteks Windows.

Buat favicon Anda sekarang

Editor terbuka dengan dialog impor siap. Gratis, di browser, tanpa instalasi, dan tidak ada yang disimpan.

Buat favicon Panduan PNG ke ICO