Bagaimana cara membuat paket favicon dari PNG tanpa mendaftar?

Tujuh file yang dihasilkan oleh generator ikon kami dari satu PNG, apa yang membaca masing-masing, di mana mereka ditempatkan di server Anda dan mengapa bagian transparan muncul solid.

August 9, 2026

Favicon bukanlah sebuah file. Ini adalah sekumpulan file, karena tab browser, layar utama iOS, dan prompt instalasi Android masing-masing meminta gambar yang berbeda dengan ukuran yang berbeda. Masukkan satu PNG ke dalam generator ikon kami dan tujuh file keluar di sisi lainnya. Berikut adalah fungsi masing-masing, di mana mereka harus berada di server Anda dan mana yang bisa Anda lewati.

Seluruh proses berjalan di dalam halaman. Tidak ada rute API dan tidak ada aksi server di aplikasi ini, jadi logo Anda dibaca dengan createImageBitmap, dicat ke dalam OffscreenCanvas dan dikodekan ke PNG oleh browser Anda sendiri. Tidak perlu akun dan tidak ada janji untuk menghapus karya Anda dalam satu jam.

Apa saja tujuh file tersebut, dan apa fungsi masing-masing?

Tujuh file, satu gambar sumber. Ukuran di bawah ini berasal dari hasil nyata dengan alpha.png, sebuah PNG transparan berukuran 900 x 606 dengan ukuran 942,4 KB. Hitungan byte Anda mungkin berbeda karena tergantung pada seberapa banyak detail yang tersisa pada setiap ukuran, tetapi nama file dan dimensi piksel ditentukan oleh alat.

Anda tidak perlu semuanya. Jika tab desktop adalah satu-satunya yang Anda pedulikan, favicon.ico saja sudah cukup. File Apple mulai penting saat seseorang menyimpan situs Anda ke layar utama, dan dua PNG Android hanya mendapatkan tempatnya jika Anda benar-benar mengirimkan manifest.

Di mana file-file tersebut ditempatkan, dan apa yang harus ada di bagian head?

Semua tujuh file berada di root web, sehingga mereka dapat diakses sebagai /favicon.ico, /apple-touch-icon.png, dan seterusnya. Di Next.js, itu adalah folder publik. Kemudian empat tag masuk ke dalam head Anda: satu tautan apple-touch-icon pada ukuran 180x180, dua tautan rel=icon untuk ukuran 32 dan 16, dan satu tautan ke manifest. Alat ini mencetak potongan kode tersebut di samping hasil dengan tombol salin.

site.webmanifest adalah 371 byte JSON yang menyimpan name, short_name, dua ikon Android, theme_color, background_color, dan display diatur ke standalone. Jalur ikon di dalamnya ditulis secara absolut, sebagai /android-chrome-192x192.png, jadi menempatkan paket di /assets/icons/ akan merusak mereka dan Anda perlu mengedit kedua nilai src. Satu lagi jebakan: biarkan kedua kotak nama kosong di panel dan manifest akan dikirim dengan nama literal "My App", yang akan dicetak ponsel di bawah ikon Anda.

Mengapa favicon.ico tidak ada di potongan kode itu?

Karena browser meminta itu tanpa diberitahu. Tidak perlu tag. Bagian rel=icon dari spesifikasi HTML menjelaskan konvensi /favicon.ico: ketika sebuah dokumen tidak menyatakan tautan ikon, browser mencoba jalur root itu sendiri. Itu sebabnya .ico berfungsi tanpa markup, dan juga mengapa file tersebut harus berada di root. Salinan yang berada di /images/ tidak pernah diminta. Jika Anda benar-benar membutuhkannya di tempat lain, tambahkan tautan ikon eksplisit yang menunjuk ke jalur Anda dan tebakan akan berhenti.

Apa sebenarnya yang ada di dalam favicon.ico?

.ico adalah wadah. Milik kami memuat tiga PNG, dirender pada ukuran 16, 32, dan 48 piksel, di belakang header 6 byte ditambah satu entri direktori 16 byte per gambar, yang merupakan 54 byte struktur yang membungkus data gambar. Itulah cara satu file 4,6 KB mencakup tiga ukuran: browser membaca direktori, lalu menarik entri yang sesuai dengan apa yang sedang digambar. Tata letak byte dari direktori itu, dan mengapa tidak ada yang lebih besar dari 256 yang muat di dalamnya, adalah bagian dari dirinya sendiri. Windows telah memahami muatan PNG di dalam .ico sejak Vista dan browser saat ini menanganinya tanpa keluhan.

Mengapa PNG transparan saya muncul dengan latar belakang solid?

Karena setiap kanvas ikon diisi sebelum logo Anda mendarat di atasnya. Kontrol latar belakang adalah input type=color, yang tidak membawa saluran alpha, jadi isian selalu opak dan defaultnya adalah #ffffff. Apapun transparansi yang dimiliki sumber Anda diratakan terhadap warna itu. Tidak ada opsi transparan di sini. Pilih warna yang sesuai dengan permukaan tempat tanda tersebut akan berada sebelum Anda menekan generate.

Bentuk juga penting. alpha.png berukuran 900 x 606 dan ikon berbentuk persegi, jadi karya seni dipasang di dalam persegi dengan sumbu panjangnya pada lebar penuh, dan warna latar belakang mengisi pita di atas dan di bawahnya. Jika pita tersebut mengganggu Anda, persempit gambar terlebih dahulu di cropper, yang menerima satu file hingga 10 MB dan menawarkan preset 1:1 di antara delapan rasio aspeknya. Penggeser margin di panel ikon berkisar dari 0 hingga 30% dan menyisipkan karya seni secara merata di keempat sisi.

Apakah 196 KB terlalu besar untuk file ikon?

196 KB untuk android-chrome-512x512.png terlihat mengkhawatirkan di samping file 16px 521 byte. Dua hal mengurangi tekanan. Ikon tersebut tidak diambil pada tampilan halaman biasa, karena tab hanya ingin yang kecil, dan PNG yang langsung keluar dari encoder kanvas tidak dioptimalkan: convertToBlob menulis file yang valid tanpa pekerjaan filter dan palet yang dilakukan oleh pengoptimal khusus. Ini adalah encoder browser yang sama yang membentuk ukuran file dalam ukuran JPG ke PDF kami.

Anda dapat memperkecilnya dengan menjalankan PNG kembali melalui kompresor. Pada alpha.png 942,4 KB yang sama, mode lossless (oxipng level 3) mencapai 383,9 KB, turun 59% tanpa mengubah piksel. Mode file lebih kecil (imagequant) mencapai 98,3 KB, turun 90%, dengan mengurangi gambar menjadi palet. Logo datar dengan beberapa warna adalah tempat di mana palet tidak memerlukan biaya apa pun yang dapat Anda lihat. Pertahankan dalam mode lossless jika ikon Anda bersifat fotografis.

Apakah saya perlu mendaftar, dan apakah logo saya diunggah?

Tidak ada pendaftaran dan tidak ada yang diunggah. Tidak ada rute API dan tidak ada aksi server dalam basis kode ini, dan satu-satunya permintaan yang dibuat halaman adalah pengambilan same-origin untuk asetnya sendiri. Buka panel jaringan Anda saat Anda menghasilkan dan lihat tetap tenang. Halaman privasi kami menjelaskan dengan kata-kata yang lebih sedikit daripada paragraf ini.

Batasannya adalah satu file pada satu waktu dan 10 MB, dan dropzone menerima PNG, JPEG, WebP, AVIF, GIF, dan SVG. Sebuah SVG dirasterisasi terlebih dahulu pada dimensi terbesarnya atau 512 piksel, jadi bahkan sumber 64px tetap menghasilkan ikon 512 yang bersih. Render tersebut memuat file ke dalam elemen <img>, jalur terbatas yang sama yang menjatuhkan font eksternal dan bitmap yang terhubung dari SVG. Semuanya datang sebagai satu favicon-package.zip yang berisi semua tujuh file. Jika logo Anda tiba sebagai ekspor yang terlalu besar, ubah ukurannya terlebih dahulu agar Anda tidak memberi makan spanduk 20 megapiksel ke dalam kotak 16 piksel.

Lakukan ini selanjutnya: buka generator ikon, masukkan logo Anda, atur warna latar belakang agar sesuai dengan tempat ikon akan berada, hasilkan, unzip ke root web Anda, tempelkan empat tag ke dalam head Anda dan tambahkan "start_url": "/" ke site.webmanifest. Kemudian muat ulang situs dengan keras dan lihat tabnya. Jika versi 16px terlihat buram, kembali dan sederhanakan tanda tersebut sebelum Anda mengubah apa pun yang lain. Catatan Mengonfigurasi Aplikasi Web Apple layak dibaca jika layar utama iOS adalah prioritas Anda.