Panduan

Favicon (.ico) vs PNG

ICO dan PNG bukanlah pesaing — mereka adalah mitra. Pengaturan favicon modern menggunakan .ico sebagai pengganti universal dan PNG sebagai penggantian DPI tinggi. Inilah tepatnya saat masing-masing pihak menang.

ICO unik karena satu file menyematkan banyak resolusi. Browser atau OS memilih kecocokan terdekat pada waktu pengundian — tidak ada peningkatan, tidak ada tepian yang kabur.

PNG lebih tajam pada resolusi individual apa pun dan mendukung kompresi yang lebih baik untuk logo berwarna solid. Itu tidak dapat menyematkan banyak ukuran dalam satu file.

Penyiapan optimalnya adalah satu .ico multi-ukuran plus mandiri 32×32 dan 180×180 PNG untuk browser DPI tinggi dan iOS.

Cara kerjanya

  1. 1

    Mulai dari sumber 512x512

    PNG atau SVG.

  2. 2

    Hasilkan kedua format

    FetchFavicon menghasilkan .ico multi-ukuran plus 16/32/48/180/192/512 PNG yang berdiri sendiri.

  3. 3

    Tautkan keduanya di <head>

    <link rel = "icon" href = "/favicon.ico"> diikuti oleh <link rel = "icon" type = "image/png" size = "32x32" href = "/favicon-32x32.png">.

Coba sekarang

Hasilkan .ico dan PNG

Konverter PNG ke ICO

FAQ

Manakah yang ukuran filenya lebih kecil?+

PNG tunggal lebih kecil dari .ico dengan resolusi yang sama, tetapi .ico multi-ukuran menggantikan 4-6 PNG dan biasanya menang dalam total byte.

Apakah Google menampilkan favicon PNG di hasil pencarian?+

Ya. Google mendukung .ico dan PNG. Ini lebih menyukai rasio aspek persegi minimal 48×48.

Bisakah PNG mendukung mode gelap?+

Tidak secara langsung. Gunakan varian SVG bersama PNG Anda untuk dukungan mode gelap.

Alat terkait

Panduan lainnya

Panduan

Jelajahi FetchFavicon

Kategori

Pengonversi

Utilitas

Panduan

Tutorial