Alat Favicon

Buat dan periksa favicon untuk situs web Anda dalam hitungan detik.

Pemeriksa Favicon

Analisis implementasi favicon situs web Anda dan dapatkan rekomendasi.

Ringkasan (TL;DR)

  • Validasi itu Penting: Favicon yang rusak bukan hanya ikon yang hilang; itu menyebabkan error 404 di log server dan menurunkan citra merek.
  • Analisis Komprehensif: Alat ini merayapi situs Anda seperti browser untuk memverifikasi favicon.ico, ikon PNG, Ikon Sentuh Apple, dan Manifes Web.
  • Umpan Balik yang Dapat Ditindaklanjuti: Dapatkan laporan spesifik tentang keterjangkauan file, ketidakcocokan dimensi, dan validitas format.

Mengapa memvalidasi favicon?

Menerapkan favicon tampak sederhana, tetapi rentan terhadap kegagalan diam-diam. Ekosistem browser modern (Desktop, Android, iOS) memiliki persyaratan yang berbeda.

  • Caching Browser: Browser lokal menyimpan favicon dalam cache secara agresif, sering kali menyembunyikan masalah yang dilihat pengunjung baru.
  • Standar Terfragmentasi: Anda memerlukan lebih dari sekadar favicon.ico. Perangkat Apple mencari apple-touch-icon. Android dan PWA mencari site.webmanifest.
  • Konfigurasi Server: Jalur yang benar di HTML tidak ada artinya jika server Anda mengembalikan 403 atau tipe MIME yang salah.

Apa yang diperiksa

Penganalisis kami melakukan audit multi-langkah:

  1. Parsing HTML: Kami memindai <head> untuk menemukan semua tautan ikon yang dideklarasikan.
  2. Validasi Manifes: Kami memverifikasi apakah ukuran yang dideklarasikan dalam Manifes Web cocok dengan file sebenarnya.
  3. Keterjangkauan: Kami mencoba mengunduh setiap ikon untuk memverifikasi bahwa ia mengembalikan 200 OK.
  4. Format & Dimensi: Kami memeriksa data biner untuk memastikan file tersebut adalah gambar yang valid dan dimensinya cocok.
  5. Penemuan Implisit: Kami memeriksa jalur standar seperti /favicon.ico.

Kegagalan Penerapan Umum

1. Ikon “Hantu”

Anda memiliki tag <link>, tetapi file tersebut mengembalikan 404. Perbaikan: Periksa jalur file relatif terhadap root domain Anda.

2. Ketidakcocokan Format

Anda mendeklarasikan type="image/png" tetapi menyajikan JPEG atau ICO. Perbaikan: Pastikan header Content-Type server cocok dengan format sebenarnya.

3. Kebohongan Dimensi

HTML mengatakan sizes="32x32", tetapi gambar sebenarnya adalah 16x16. Perbaikan: Gunakan Pembuat Favicon untuk menghasilkan ukuran yang tepat.

4. Apple Touch Icon Hilang

Tanpa apple-touch-icon, pengguna iOS akan melihat tangkapan layar halaman umum. Perbaikan: Selalu sertakan PNG 180x180 untuk Apple.

Praktik Terbaik

  1. Root Fallback: Selalu miliki favicon.ico di root (/favicon.ico).
  2. SVG untuk Modern: Gunakan favicon SVG untuk independensi resolusi.
  3. Manifes: Tentukan ikon terpisah di manifest.json.
  4. Cache Busting: Gunakan string kueri (mis. ?v=2) saat memperbarui.

FAQ

Mengapa pemeriksa mengatakan “Hilang” padahal saya bisa melihatnya?

Browser Anda mungkin menyimpan versi lama dalam cache. Pemeriksa melihat apa yang dilihat pengunjung baru.

Apakah saya benar-benar membutuhkan semua file ini?

favicon.ico adalah batas minimal. Tetapi untuk tampilan profesional, set lengkap adalah standar.

Bisakah saya menggunakan CDN?

Ya. Pastikan saja tag <link> mengarah ke URL absolut di CDN.

enesvizharptrujadefrkoittrplnlidthhi