Tanpa unggah, 100% lokal, tanpa akun

Generator Favicon

Unggah logo atau ikon Anda dan unduh semua ukuran favicon standar sebagai PNG. Termasuk Apple Touch Icon dan ikon PWA. Tidak ada yang meninggalkan perangkat Anda.

Cara kerja Generator favicon

Favicon Generator mengambil gambar apa pun yang Anda berikan dan mengubah ukurannya ke dimensi favicon standar menggunakan Canvas drawImage API: 16x16, 32x32, 48x48, 180x180 (ikon sentuh Apple), 192x192 (Android Chrome), dan 512x512 (manifes PWA). Keenam ukuran dihasilkan di browser Anda, bersama favicon.ico multi-ukuran yang menggabungkan gambar 16x16, 32x32, dan 48x48 ke dalam satu file lawas. Gambar sumber Anda tidak pernah meninggalkan perangkat Anda.

Satu set favicon lengkap mencakup seluruh rangkaian ikon tab browser, bookmark, pintasan layar beranda, dan layar percikan PWA. Menggunakan gambar sumber resolusi tinggi (minimal 512x512 piksel) memberi algoritma penskalaan ulang detail terbanyak untuk diproses. Tag link HTML yang Anda butuhkan untuk mereferensikan setiap file yang dihasilkan ditampilkan dalam cuplikan yang dapat Anda salin langsung ke elemen head halaman Anda.

Ditulis oleh Bastien Sulyan

Cara menggunakan Generator favicon, langkah demi langkah

  1. Jatuhkan gambar sumber Anda ke area unggah. Gunakan gambar persegi 512 px atau lebih besar untuk hasil terbaik.
  2. Pratinjau enam ukuran yang dihasilkan di panel hasil.
  3. Unduh keenam berkas PNG beserta favicon.ico dari panel hasil.
  4. Salin cuplikan HTML yang menampilkan tag link untuk semua ukuran.
  5. Tempatkan file PNG di root situs Anda dan tempelkan tag link ke head halaman Anda.

Kasus penggunaan umum

  • Seorang pengembang menyiapkan situs web baru dan memerlukan semua ukuran favicon yang dihasilkan dari logo merek tanpa langganan alat desain.
  • Seorang penulis PWA menghasilkan ikon 192x192 dan 512x512 yang diperlukan dalam manifes aplikasi web untuk instalasi layar beranda.
  • Seorang blogger menyegarkan identitas situs mereka dan mengganti favicon default dengan ikon kustom yang dibuat dari logo mereka.
  • Seorang freelancer dengan cepat menghasilkan set favicon lengkap untuk proyek klien tanpa menunggu untuk menginstal perangkat lunak desain offline.

Pertanyaan yang sering diajukan

Format gambar apa yang bisa saya gunakan sebagai sumber?

Format apa pun yang bisa didekode browser berfungsi sebagai input: JPEG, PNG, WebP, GIF, dan SVG. Untuk sumber SVG, browser merasterisasi vektor ke Canvas sebelum mengubah ukuran, sehingga PNG keluaran adalah gambar raster terlepas dari itu.

Mengapa favicon saya buram di tab browser?

Ukuran 16x16 dan 32x32 sangat kecil. Jika gambar sumber berisi detail halus atau garis tipis, mereka tidak akan bertahan setelah diperkecil. Desain sederhana dan tebal dengan bentuk yang jelas bekerja jauh lebih baik pada ukuran kecil daripada ilustrasi yang kompleks.

Apakah alat ini menghasilkan file ICO?

Ya. Selain keenam PNG, alat ini menyusun favicon.ico yang menggabungkan gambar 16x16, 32x32, dan 48x48 dalam satu file, format yang masih dicari oleh browser Windows lama dan beberapa crawler di root situs. Browser modern sudah puas dengan tautan PNG, jadi menerbitkan keduanya tidak merugikan dan membiarkan setiap klien memilih.

Apakah gambar sumber diproses di server?

Tidak. Panggilan Canvas drawImage yang menghasilkan setiap ukuran berjalan di tab browser Anda. Gambar sumber dibaca dari disk lokal Anda dan enam keluaran PNG dibuat di memori dan ditawarkan sebagai unduhan. Tidak ada data file yang melewati server.

Ukuran mana yang harus saya gunakan untuk ikon sentuh Apple?

iOS dan iPadOS menggunakan PNG 180x180 piksel yang direferensikan oleh tag link apple-touch-icon. Ukuran ini digunakan ketika pengguna menambahkan situs Anda ke layar beranda di perangkat Apple. Alat ini menghasilkan file ini bersama ukuran lainnya.

Bisakah saya menggunakan gambar persegi panjang sebagai sumber?

Ya, tetapi keluarannya akan di-letterbox atau pillar-box agar sesuai dengan canvas persegi. Untuk hasil terbaik, mulailah dengan gambar persegi atau pangkas gambar sumber menjadi persegi sebelum menggunakan alat ini.

Alat terkait

Jaga semuanya tetap lokal, jelajahi alat pelengkap.

Semua alat gambar