Generator favicon

Jatuhkan logo, lihat di setiap ukuran nyata, dan bawa pulang favicon.ico, set PNG, serta HTML.

PNG / JPEG / WebP / GIF / SVG — atau jatuhkan ke kartu ini

Tambahkan gambar (atau ganti ke huruf) dan setiap ukuran muncul di sini — tidak ada tombol "buat".favicon.ico 16/32/48 · PNG 16 · 32 · 48 · 180 · 192 · 512 · site.webmanifest · HTML

Cara menggunakan

  1. Pilih gambar, atau seret ke kartu: setiap ukuran langsung muncul. Tidak ada tombol buat — apa yang Anda lihat itulah yang diunduh.
  2. Belum punya logo? Ganti ke "Huruf / emoji" dan ketik satu atau dua karakter. Pemilih warna mengatur latar, dan huruf berubah hitam atau putih sesuai kontras.
  3. Unduh paketnya, ekstrak ke akar situs Anda, tempel tag <link> yang disalin ke <head>, lalu muat ulang situs — ikon tab seharusnya sudah muncul.

Contoh

Sumber

logo.png · 512×512, bentuk "Membulat"

Paket (9 berkas)

favicon.ico (16/32/48)
favicon-16x16.png
favicon-32x32.png
favicon-48x48.png
apple-touch-icon.png (180)
android-chrome-192x192.png
android-chrome-512x512.png
site.webmanifest
snippet.html

Sumber yang sama dengan opsi yang sama menghasilkan PNG yang identik byte demi byte dan ZIP yang identik byte demi byte (stempel waktu arsip dipatok pada 1980-01-01), sehingga paketnya dapat di-commit dan di-diff. Mengubah bentuk hanya memangkas sudut; tidak pernah menggambar ulang karya seninya.

Cakupan, batasan, dan pertanyaan umum

  • Tidak ada ekspor SVG. SVG yang tetap jernih di 16 px perlu jalur yang disederhanakan dengan tangan; membungkus bitmap dalam SVG atau menggambar teks font sistem hanya akan tampak seperti seni vektor. Simpan .svg Anda sendiri di samping set PNG ini jika ingin.
  • Gambar dipaskan, tidak pernah dipotong. Logo non-persegi mempertahankan margin transparan — pangkas atau susun dulu (pengubah ukuran / konverter gambar di sini dapat membantu).
  • Ikon transparan mendapat latar dari platform: iOS mengecat latar di belakang apple-touch-icon, dan sebagian peluncur Android juga. Untuk latar yang Anda kendalikan, gunakan "Huruf / emoji", atau tambahkan latar ke gambar sumber.
  • site.webmanifest hanya mencantumkan ikon — tanpa name atau short_name. Itu nama situs Anda, yang tidak dapat diketahui alat ini; tambahkan kedua kunci setelah mengekstrak (name opsional dan peramban memakai judul halaman sebagai cadangan).
  • favicon.ico memuat 16, 32, dan 48 px, bukan 64 atau 128. Itu cukup untuk peramban modern dan Windows; tambahkan ukuran lain sebagai PNG jika perlu.
  • GIF / WebP animasi: hanya bingkai pertama yang dipakai. Lagi pula favicon tidak beranimasi.
  • Ikon huruf digambar dengan font sistem Anda, jadi berbeda di macOS, Windows, Linux, dan ponsel. PNG membekukan apa yang ditampilkan perangkat Anda — itulah juga alasan tidak ada pemilih font.
  • Tidak ada pengambilan URL dan tidak ada pemeriksaan langsung: alat ini tidak dapat menerima alamat situs web, dan tidak dapat memverifikasi favicon yang sudah dipasang. Setelah deploy, buka situs Anda dan lihat tabnya.
  • Batas: 20 MB per berkas dan 8000 px per sisi. Sumber di bawah 180 px diperbesar untuk ikon besar dan mungkin tampak lembut.
  • Tanpa pemangkasan, tanpa penghapusan latar, tanpa batch, dan tanpa riwayat: muat ulang dimulai dari keadaan kosong (tidak ada yang disimpan, tidak ada yang masuk ke URL).

Yang biasanya dibutuhkan berikutnya setelah ikon siap dipasang.