Buat favicon

Ubah satu logo menjadi set favicon lengkap: semua ukuran PNG, file ICO berisi beberapa ukuran, manifest, dan tag HTML yang tinggal ditempel ke bagian head.

Letakkan file di sini

.png, .jpg, .jpeg, .webp, .svg · hingga 20 MB

Pilih file

Cara membuat favicon

1
Tambahkan logo
PNG, JPG, WebP, atau SVG, hingga 20 MB. Gambar persegi paling cocok, tetapi bentuk apa pun tetap bisa diproses.
2
Pilih cara menyesuaikan ke persegi
Potong tepi gambar menjadi persegi dari bagian tengah, atau tampilkan seluruh gambar dan isi sisi yang kosong dengan warna pilihan Anda.
3
Unduh set ikon sebagai ZIP
Delapan file, atau sembilan dengan ikon maskable untuk Android: ICO, empat ukuran PNG, manifest, dan potongan kode head yang siap pakai.

Isi arsip dan fungsi setiap file

favicon.ico menyimpan tiga gambar dalam satu kontainer, berukuran 16, 32, dan 48 piksel, dan file inilah yang masih diminta browser di root situs. icon-16.png dan icon-32.png adalah padanan modernnya. Keduanya dirujuk secara eksplisit, jadi browser yang lebih suka PNG tidak perlu membuka ICO sama sekali. apple-touch-icon.png berukuran 180 piksel dipakai iOS saat seseorang menambahkan situs Anda ke layar utama. icon-192.png dan icon-512.png adalah dua ukuran yang wajib dicantumkan di manifest progressive web app. manifest.json menghubungkan kedua ikon itu dengan nama aplikasi dan warna tema Anda, sedangkan head-snippet.html berisi blok tag link dan meta yang persis perlu ditempel ke halaman, jadi Anda tidak perlu menebak nama atribut atau jalur file.

Mengapa apple-touch-icon tidak pernah transparan

iOS tidak menaruh ikon layar utama yang transparan di atas latar yang wajar. Bagian yang kosong diisi hitam, sehingga logo yang rapi berubah menjadi kotak gelap. Karena itu, kanal alfa pada file yang satu ini selalu diratakan ke warna latar belakang pilihan Anda, atau ke putih jika latar belakang dibiarkan transparan. Semua ukuran lain tetap transparan bila gambar sumber memilikinya dan Anda memintanya, karena di tab browser atau pintasan desktop justru transparansi itulah yang dibutuhkan. Jika Anda memilih warna latar belakang, warna itu diterapkan sama rata ke semua ukuran agar set tetap seragam.

Dari vektor, hasilnya tajam

Jika sumbernya SVG, setiap ukuran dibuat langsung dari vektor, bukan diperkecil dari satu bitmap besar. Perbedaannya paling terasa di 16 piksel: logo yang diperkecil menjadi buram, sedangkan logo yang dibuat langsung dari vektor tetap mempertahankan garisnya. File SVG dibersihkan sebelum diolah: skrip, event handler, dan setiap rujukan ke server luar dihapus, sama seperti di alat Ubah SVG ke PNG kami. Gambar raster dijadikan persegi lebih dulu, lalu diperkecil dengan filter Lanczos, pilihan paling tajam di antara metode praktis untuk memperkecil karya grafis.

Logo tetap di perangkat Anda

Proses decode, ubah ukuran, dan encode PNG, juga pembuatan kontainer ICO dan arsip ZIP, semuanya berlangsung di dalam tab browser ini. Tidak ada yang diunggah, dan itu penting untuk logo merek yang belum dirilis. Kebanyakan pembuat favicon online menyalin logo Anda ke server mereka sebelum memberikan hasil apa pun.

Pertanyaan yang sering diajukan

Ukuran apa saja yang ada di set favicon?

16, 32, 180, 192, dan 512 piksel sebagai file PNG, ditambah favicon.ico yang memuat 16, 32, dan 48 dalam satu file. Versi 48 piksel hanya ada di dalam ICO, tempat Windows memakainya untuk tampilan pintasan yang lebih besar. Versi ini tidak disertakan sebagai PNG terpisah karena tidak ada apa pun di web yang memintanya.

Mengapa apple-touch-icon tidak transparan?

Karena iOS menampilkan area transparan pada ikon layar utama sebagai hitam. Dengan diratakan di sini, ke warna latar belakang Anda atau ke putih jika transparansi dipertahankan, ikon tampil sesuai desain Anda, bukan berada di dalam kotak gelap. Hanya di file inilah pilihan itu ditentukan untuk Anda.

Apa itu ikon maskable?

Android memotong tepi ikon aplikasi mengikuti bentuk yang dipilih perangkat: lingkaran, “squircle”, atau persegi membulat. Ikon maskable menyimpan seluruh isinya di dalam 80% bagian tengah, jadi tidak ada bagian penting yang terpotong, apa pun bentuk yang diterapkan. Aktifkan opsinya, dan Anda mendapat icon-512-maskable.png serta entri ketiga di manifest dengan purpose "maskable".

Apakah saya perlu manifest.json?

Hanya jika Anda ingin situs bisa dipasang sebagai progressive web app, atau ingin mengatur warna bilah browser di Android. Biayanya hanya satu file dan satu tag link, dan tidak ada ruginya jika fitur itu tidak pernah dipakai. Karena itu, manifest disertakan secara bawaan, lengkap dengan nama aplikasi dan warna tema Anda.

Bisakah saya mulai dari file SVG?

Bisa, dan justru SVG memberi hasil paling baik. Setiap ukuran dibuat dari vektor pada resolusinya sendiri, bukan diubah ukurannya dari satu bitmap, sehingga ukuran kecil tetap terbaca jelas. SVG dibersihkan lebih dulu: skrip, event handler, dan semua rujukan eksternal dihapus sebelum gambar dibuat.

Di mana tag yang dihasilkan harus ditempel?

Di dalam elemen head setiap halaman. File PNG, ICO, dan manifest diletakkan di root situs agar jalur di potongan kode mengarah ke file yang benar. Jika file disajikan dari subfolder, ubah nilai href di head-snippet.html agar sesuai.

Mengapa ikon saya terlihat buram?

Hampir selalu karena gambar sumbernya kecil. Semua ukuran dibuat dari master 512 piksel, jadi sumber di bawah sekitar 260 piksel harus diregangkan untuk mencapainya, dan ukuran terbesar tampak kurang tajam. Mulailah dari minimal 512×512 atau dari SVG, maka seluruh set akan tajam. Sumber di bawah 32 piksel langsung ditolak karena tidak ada yang bisa diolah.

Apakah logo diunggah ke server?

Tidak. Gambar tidak pernah keluar dari browser: decode, ubah ukuran, encode, pengemasan ke ICO, dan pembuatan ZIP semuanya dilakukan secara lokal, lalu arsipnya diberikan kepada Anda langsung dari memori.