Will the PNG-based favicon.ico work everywhere?

The .ico file embeds PNG images, which all modern browsers and Windows Vista or later support. Very old Windows XP-era tools may not read PNG-compressed ICO frames.

Why are the Apple touch and maskable icons not transparent?

iOS fills transparent areas with black and rounds the corners itself, and Android crops maskable icons into shapes, so both get an opaque background. The maskable icon also keeps your artwork inside a safe zone with at least 10% padding.

Favicon Generator

Generate favicon.ico, Apple touch, Android, and maskable icons with a manifest

Sumber

Letakkan logo PNG, JPEG, WebP, atau SVG

Gambar persegi minimal 512 × 512 px memberi hasil terbaik. File SVG dibersihkan sebelum dirender.

Anda juga dapat menempel dari clipboard.

Gaya ikon

Latar transparan

Berlaku untuk ikon browser dan Android. Ikon Apple touch dan maskable selalu memakai warna latar.

Warna latar

Bentuk

Jarak tepi0%

Manifest aplikasi web

Nama aplikasi

Nama pendek

Warna tema

Warna latar splash

Path ikon

Lokasi file di situs Anda, mis. / atau /icons/.

Paket favicon

Tambahkan gambar atau beralih ke Teks untuk membuat favicon

Semua ukuran, favicon.ico, dan site.webmanifest dibuat sekaligus.

Cuplikan HTML <head>

<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">

site.webmanifest

{
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "/maskable-icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Generator AvatarBuat avatar berbasis seed dalam enam gaya: inisial, geometris, hewan, karakter, profesi, dan identicon. Ekspor SVG atau PNG secara lokal.SVG ke GambarUbah SVG menjadi gambar PNG, JPEG, WebP, atau AVIF yang tajam di ukuran apa pun Pengubah Ukuran GambarUbah ukuran banyak gambar per persentase, ukuran persis, atau batas maksimum

Apa yang dibuat Generator Favicon?

Paket favicon lengkap dari satu logo atau beberapa huruf: favicon.ico (16, 32, dan 48 px), favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, apple-touch-icon.png (180 px), android-chrome-192x192.png, android-chrome-512x512.png, maskable-icon-512x512.png, dan site.webmanifest, ditambah tag HTML untuk menautkannya.

Cara menggunakan

1.Letakkan logo PNG, JPEG, WebP, atau SVG, atau beralih ke Teks dan ketik hingga tiga karakter.
2.Pilih latar (transparan atau warna), padding, dan bentuk.
3.Isi nama aplikasi, nama pendek, warna tema, dan path ikon untuk manifest.
4.Periksa pratinjau terang dan gelap serta tiruan tab browser.
5.Unduh ZIP atau file satuan, lalu tempel cuplikan HTML ke <head> Anda.

Cara setiap ikon dibuat

Ikon browser dan Android mengikuti pengaturan bentuk, padding, dan transparansi Anda. Ikon Apple touch selalu berupa persegi tidak transparan karena iOS membulatkan sudutnya sendiri. Ikon maskable tidak transparan dan menjaga gambar di dalam zona aman (padding minimal 10%) agar Android dapat memotongnya menjadi lingkaran atau squircle. Ukuran kecil diperkecil bertahap agar ikon 16 px tetap tajam.

Format, keamanan, dan batasan

favicon.ico menyematkan gambar PNG, yang didukung semua browser modern dan Windows Vista ke atas; alat Windows XP yang sangat lama mungkin tidak bisa membacanya. Unggahan SVG dibersihkan sehingga skrip, event handler, dan referensi eksternal dihapus sebelum dirender. Ikon teks memakai font UI sistem. Semuanya dibuat secara lokal di browser Anda.