Cara Membuat Favicon
Mencipta favicon ialah kerja dua minit dengan alat yang betul. Mulakan daripada imej sumber segi empat sama — sekurang-kurangnya 512×512 piksel — jalankannya melalui favicon generator dan dapatkan pakej lengkap: .ico berbilang saiz, SVG, apple-touch-icon dan PNGs manifes. Panduan ini berjalan setiap langkah daripada penyediaan sumber kepada pengesahan penyemak imbas. Untuk rujukan mendalam juga lihat full tutorial.
Favicon ialah ikon kecil yang dipaparkan oleh penyemak imbas dalam bar tab, bar alamat dan senarai penanda halaman. Pada mudah alih, ia menjadi ikon skrin utama apabila pengguna menyimpan tapak anda. Pada Windows ia muncul pada pin bar tugas dan pintasan desktop. Memperbetulkan favicon adalah satu usaha kecil dengan kesan jenama yang terlalu besar — setiap paparan halaman bermula dengan ikon anda berada dalam tab pengguna.
Persediaan favicon moden bukan satu fail — ia adalah set yang diselaraskan. .ico berbilang saiz mengendalikan sandaran penyemak imbas universal. SVG memberikan pemaparan berskala yang jelas pada penyemak imbas moden, termasuk sokongan mod gelap. 180×180 PNG (apple-touch-icon) ialah perkara yang digunakan iOS untuk pemasangan skrin utama. A 192×192 dan 512×512 PNG suapan gesaan pemasangan Android PWA. Satu imej sumber yang disediakan dengan baik menghasilkan semua ini sekaligus.
Penyediaan imej sumber adalah langkah yang paling diabaikan. Logo anda mestilah segi empat sama — tanaman asimetri sentiasa menghasilkan hasil regangan. Reka versi ringkas tanda jenama anda yang dibaca dengan jelas pada saiz kecil: kurangkan garis halus, keluarkan teks kecil dan tingkatkan kontras. Perkara yang kelihatan elegan pada 512×512 boleh menjadi gumpalan tidak boleh dibaca pada 16×16 jika anda melangkau pas pemudahan ini.
SVG ialah format sumber yang ideal kerana ia bebas resolusi. Grafik vektor meraster kepada sebarang ketumpatan piksel tanpa kehilangan kualiti. Jika anda hanya mempunyai raster PNG atau JPG, pastikan ia adalah sekurang-kurangnya 512×512 sebelum menjana — penskalaan bawah daripada apa-apa yang lebih kecil memperkenalkan kabur yang menggabungkan setiap langkah ubah saiz dan menghasilkan ikon tab kabur.
Format .ico ialah bekas, bukan satu imej. Ia memegang berbilang bingkai raster — biasanya 16×16, 32×32, 48×48, dan 64×64 — dalam satu fail. Penyemak imbas menghuraikan direktori ICO dan hanya memaparkan bingkai yang paling hampir sepadan dengan ketumpatan paparan yang diperlukannya. Pendekatan satu fail ini bermakna anda tidak memerlukan teg pautan yang berasingan untuk setiap resolusi — satu teg merangkumi semua saiz tab.
Muat naik imej sumber anda ke favicon generator. Alat ini memproses semuanya secara setempat dalam penyemak imbas anda — imej anda tidak pernah meninggalkan peranti anda. Dalam beberapa saat, ia menghasilkan pakej muat turun yang mengandungi favicon.ico, favicon.svg, apple-touch-icon.png (180×180), android-chrome-192x192.png, android-chrome-512x512.png dan site.webmanifest, serta teg pautan HTML sedia tampal.
Meletakkan fail adalah mudah. Letakkan semua fail yang dijana ke dalam direktori akar awam tapak anda — folder yang sama yang menyediakan index.html anda. Untuk projek Apl Vite dan Buat React ini ialah folder /public. Untuk projek Next.js App Router, letakkan favicon.ico di dalam /app dan fail PNG dalam /public. Untuk tapak statik, lepaskan semuanya bersama fail HTML anda.
Teg pautan HTML memberitahu pelayar fail yang hendak digunakan untuk setiap konteks. Minimum ialah satu baris: `<link rel='icon' href='/favicon.ico'>`. Set penuh yang disyorkan menambah tiga lagi baris: satu untuk varian SVG, satu untuk apple-touch-icon dan satu untuk manifes web. Tampalkan coretan yang dijana dalam elemen `<head>` anda. Pesanan teg tidak penting selagi ia mendahului `</head>`.
Caching penyemak imbas ialah punca utama kekeliruan apabila favicon tidak kelihatan dikemas kini. Cache penyemak imbas /favicon.ico setiap asal dan mungkin tidak menghormati pengepala kawalan cache standard seperti yang mereka lakukan untuk aset lain. Jika ikon lama anda berterusan, buka tetingkap inkognito baharu atau tambahkan rentetan pertanyaan penghapus cache seperti `?v=2` pada href dalam teg pautan anda untuk memaksa penyemak imbas mengambil fail yang dikemas kini.
Kesilapan biasa termasuk memuat naik imej bukan segi empat sama (menghasilkan ikon terbentang), menggunakan sumber di bawah 256×256 piksel (kabur pada saiz paparan yang lebih besar) dan mengetepikan apple-touch-icon (pemasangan skrin utama iOS menunjukkan tangkapan skrin halaman sebaliknya). Ketiga-tiganya diselesaikan dengan bermula dari sumber persegi 512×512 PNG atau SVG dan membiarkan penjana mengendalikan setiap saiz output.
Sokongan mod gelap patut dibina dari awal. Banyak penyemak imbas menjadikan bar tab dalam krom gelap apabila sistem pengguna berada dalam mod gelap. Jika ikon anda ialah tanda gelap pada latar belakang lutsinar ia boleh hilang dalam tab gelap. Hantar favicon SVG dengan blok gaya `@media (prefers-color-scheme: dark)` terbenam yang menukar warna isian — tiada teg HTML tambahan diperlukan, hanya fail SVG yang dikemas kini.
Sahkan favicon anda menggunakan live favicon tester selepas penggunaan. Penguji mensimulasikan tab penyemak imbas, penanda halaman dan konteks gesaan pemasangan dan menunjukkan cara ikon anda dipaparkan pada 16, 32, 48, 128 dan 512 piksel bersebelahan. Semak secara manual tab yang disematkan dalam Chrome dan Safari, dan gunakan 'Tambah pada Skrin Utama' pada iOS untuk mengesahkan apple-touch-icon.
Untuk panduan khusus platform, rujuk favicon for WordPress, favicon for Shopify, favicon for React dan favicon for Next.js. Set fail yang dijana adalah sama merentas semua platform — apa yang berbeza ialah tempat anda memuat naik fail dan cara platform menyuntik atau mengatasi teg pautan HTML.
Lawati semula favicon anda apabila anda menjenamakan semula. Favicon dicache kekal dalam penanda halaman dan skrin utama mudah alih lama selepas reka bentuk semula tapak disiarkan secara langsung. Mengemas kini rentetan versi dalam teg pautan href memaksa penyemak imbas untuk mengambil fail baharu pada lawatan seterusnya, secara beransur-ansur menggantikan ikon lama merentas semua lokasi cache. Lihat panduan best favicon format untuk pecahan format demi format bagi pertukaran saiz fail dan keserasian.
Cara ia berfungsi
- 1
Sediakan imej sumber segi empat sama
Eksport logo atau ikon anda sebagai 512×512 PNG dengan latar belakang lutsinar atau sebagai SVG dengan segi empat sama viewBox (cth., `viewBox='0 0 512 512'`). Permudahkan butiran halus yang tidak akan kelihatan pada 16×16.
- 2
Hasilkan pakej favicon anda
Muat naik sumber ke [favicon generator](tool:favicon-generator). Alat ini menghasilkan favicon.ico (berbilang saiz 16/32/48/64), favicon.svg, apple-touch-icon.png (180×180), android-chrome-192x192.png, android-chrome-512x512.png dan site.webmanifest — semuanya dalam satu laluan.
- 3
Salin semua fail ke akar tapak anda
Letakkan setiap fail daripada zip muat turun ke dalam akar awam projek anda — direktori yang menyediakan perkhidmatan index.html. Untuk Next.js App Router, favicon.ico masuk dalam /app; PNG masuk dalam /public.
- 4
Tampalkan teg pautan HTML ke dalam <head>
Salin coretan HTML yang dijana dan tambahkannya di dalam elemen `<head>` anda. Set penuh merangkumi .ico fallback, varian SVG, apple-touch-icon dan pautan manifes — enam baris keseluruhannya.
- 5
Sahkan merentas penyemak imbas dan peranti
Buka tapak anda dalam Chrome, Safari, Firefox dan Edge. Periksa tab, bar penanda halaman dan bar alamat. Pada iOS, ketik helaian Kongsi dan 'Tambah pada Skrin Utama' untuk menguji apple-touch-icon. Gunakan [favicon tester](utility:favicon-tester) untuk simulasi pantas.
- 6
Cache-bust apabila mengemas kini favicon sedia ada
Jika menggantikan favicon langsung, naikkan rentetan versi dalam href teg pautan anda (`?v=2`, `?v=3`, dsb.). Ini memaksa semua penyemak imbas untuk mengambil fail yang dikemas kini pada pemuatan halaman seterusnya dan bukannya menyediakan versi cache.
Cuba sekarang
Cipta favicon anda sekarang
Penjana FaviconSoalan lazim
Apakah cara paling mudah untuk mencipta favicon?+
Muat naik 512×512 persegi PNG atau SVG ke penjana FetchFavicon. Ia menghasilkan semua fail yang diperlukan — .ico, SVG, apple-touch-icon, manifes PNGs — ditambah HTML sedia tampal dalam masa kurang satu saat, tanpa pendaftaran dan tiada muat naik pelayan.
Apakah saiz imej sumber saya?+
Sekurang-kurangnya 512×512 piksel, idealnya sebagai SVG. Risiko yang lebih kecil boleh dilihat kabur pada saiz 256×256 yang digunakan oleh Windows dan pada saiz 512×512 yang diperlukan untuk gesaan pemasangan PWA. Menaikkan skala imej kecil menggabungkan kehilangan kualiti pada setiap langkah mengubah saiz.
Adakah saya memerlukan apple-touch-icon?+
Ya, jika ada pelawat menggunakan iPhone atau iPad. Tanpanya, pemasangan skrin utama iOS menunjukkan lakaran kecil tangkapan skrin berkualiti rendah halaman anda dan bukannya tanda jenama anda. 180×180 PNG dipautkan dengan `<pautan rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'>` ialah semua yang anda perlukan.
Mengapa favicon saya tidak dipaparkan dalam tab penyemak imbas?+
Selalunya ia adalah isu caching. Buka tetingkap peribadi/inkognito dan navigasi ke tapak anda. Jika ia masih tidak muncul, sahkan bahawa favicon.ico disampaikan pada akar domain anda dan bahawa laluan href teg pautan diselesaikan dengan betul — semak kesilapan menaip dan tiada garis miring utama.
Adakah saya memerlukan kedua-dua .ico dan SVG?+
Ya, untuk liputan penuh. .ico mengendalikan penyemak imbas lama, pintasan Windows dan alatan pihak ketiga yang mengambil /favicon.ico secara langsung. SVG mengendalikan pemaparan yang jelas pada Chrome, Firefox, Edge dan Safari 15+ dan menyokong penukaran warna mod gelap. Saiz fail gabungan biasanya di bawah 30 KB.
Berapa lamakah perubahan favicon diambil untuk disebarkan?+
Di mana-mana sahaja dari saat hingga beberapa hari, bergantung pada sejauh mana agresif penyemak imbas mencache yang asal. Pembetulan terpantas ialah menambahkan rentetan pertanyaan baharu (`?v=2`) pada href favicon anda. Ini menjadikan penyemak imbas menganggapnya sebagai URL baharu dan mendapatkan salinan baharu serta-merta.
Bolehkah saya menggunakan JPEG sebagai sumber favicon saya?+
Anda boleh memuat naik JPEG ke penjana, tetapi JPEG tidak menyokong ketelusan. Jika ikon anda memerlukan latar belakang lutsinar — yang kelihatan terbaik dalam tab penyemak imbas — mulakan daripada PNG-32 atau SVG sebaliknya. Penjana akan menukar sama ada kepada .ico dan PNG dengan betul.