Cara Membuat Favicon
Favicon moden adalah lebih daripada imej 16×16. Berikut ialah aliran kerja penuh untuk persediaan yang kelihatan jelas pada setiap penyemak imbas, OS dan peranti.
Check favicons on any website
Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.
Apakah favicon?
Favicon ialah ikon kecil yang ditunjukkan oleh penyemak imbas dalam tab, bar penanda halaman dan senarai sejarah. Pada mudah alih ia adalah ikon skrin utama. Pada Windows ia ialah ikon pintasan.
Tapak moden menyediakan berbilang resolusi dan format supaya setiap permukaan mendapat paparan yang jelas.
Sediakan imej sumber anda
Mulakan daripada imej segi empat sama yang sekurang-kurangnya 512×512 — idealnya SVG dengan segi empat sama viewBox. Apa-apa yang lebih kecil akan kabur apabila dikecilkan.
Elakkan garis nipis dan teks kecil. Mereka hilang pada 16×16.
Hasilkan .ico berbilang saiz
Himpunan 16, 32, 48, 64, 128 dan 256 dalam satu favicon.ico. Pelayar memilih saiz yang betul secara automatik.
Penjana favicon kami melakukan bahagian pelanggan ini dalam masa kurang satu saat.
Tambahkan teg HTML
Lepaskan favicon.ico ke dalam akar tapak anda. Kemudian tambahkan ikon SVG, apple-touch-icon dan manifes dalam <head> untuk persediaan lengkap.
Sahkan dalam setiap penyemak imbas
Muat semula keras dalam Chrome, Safari, Firefox dan Edge. Semak bar penanda halaman, tab dan pemasangan skrin utama.
Soalan lazim
What is a favicon?
A favicon is the small icon shown in browser tabs, bookmarks, and mobile home screens. Modern sites ship multiple sizes and formats for crisp rendering everywhere.
What size should my favicon source image be?
Start from a square image at least 512×512 pixels. SVG with a square viewBox works best for sharp downscaling.
Do I need both favicon.ico and PNG files?
Yes — ship a multi-size favicon.ico for universal fallback plus PNGs (180×180 and 192/512) for Apple, Android, and PWAs.
Where do I put favicon files on my website?
Place favicon.ico in your site root and add <link rel="icon"> tags in <head> for SVG and PNG variants.