Cara Format Favicon Berfungsi
Apabila favicon rosak, meneka membuang masa. Memahami direktori ICO, pemampatan PNG-dalam-ICO, pertanyaan media SVG dan logik pemilihan penyemak imbas membolehkan anda nyahpepijat dengan niat. Penyelaman mendalam ini termasuk gelagat peringkat bait, contoh, Soalan Lazim dan laluan penyelesaian masalah untuk setiap mod kegagalan biasa.
Saluran paip permintaan favicon
Apabila anda memuatkan halaman, penyemak imbas menghuraikan HTML <head>, menemui calon <link rel="icon"> dan juga boleh mengambil /favicon.ico jika tiada yang sepadan.
Setiap calon membawa petunjuk: URL href, taip MIME, atribut saiz dan pertanyaan media pada kandungan SVG.
Tindanan rangkaian memuat turun bait, menyahkod bekas, merasterkan kepada peta bit untuk tab dan menyimpan cache secara agresif — selalunya mengabaikan pengepala cache HTTP standard.
Use our favicon generator, PNG to ICO converter, SVG to ICO converter, and live favicon tester to build and verify your icon set, and read the companion guide for a condensed walkthrough.
Bekas .ico
Fail .ico bermula dengan pengepala direktori menyenaraikan imej terbenam. Setiap entri merekodkan lebar, ketinggian, kedalaman warna dan ofset bait.
Bait lebar dan ketinggian 0 bermakna 256 piksel — satu keanehan sejarah spesifikasi format.
Penyahkod berusaha untuk mengimbangi, membaca sama ada peta bit BMP atau gumpalan PNG dan menyerahkan piksel ke kit alat UI. Hanya satu bingkai dinyahkod setiap permintaan.
PNG dalam .ico
Untuk bingkai 64×64 dan lebih besar, pemampatan PNG mengecutkan bekas secara mendadak tanpa kehilangan yang boleh dilihat pada ikon rata.
Gumpalan PNG ialah kata kerja fail PNG biasa, termasuk ketulan IHDR dan IDAT, bersarang di dalam struktur ICO.
Penjana yang masih mengeluarkan BMP pada 256×256 tidak salah dari segi spesifikasi, tetapi ia membazirkan lebar jalur. Lebih suka entri termampat PNG apabila tersedia.
SVG favicons
SVG favicon dipaparkan oleh enjin SVG penyemak imbas pada saiz tab, serupa dengan sebaris SVG pada halaman.
CSS terbenam boleh merujuk prefers-color-scheme, membenarkan satu fail memaparkan penampilan terang dan gelap tanpa permintaan rangkaian kedua.
Rujukan luaran (fon, penapis, imej jauh) mungkin disekat dalam konteks favicon. Pastikan SVG serba lengkap.
Cara pelayar memilih
Apabila berbilang teg <link rel="icon"> wujud, penyemak imbas menjaringkan calon mengikut jenis sokongan, saiz sepadan dan kadangkala susunan pengisytiharan.
Chromium biasanya lebih suka SVG apabila type="image/svg+xml" ditetapkan dan fail dimuatkan dengan jayanya.
Safari masih boleh menunjukkan ICO dalam beberapa konteks semasa menggunakan ikon-sentuh epal PNG untuk skrin utama iOS — laluan kod yang berasingan.
Jika setiap calon gagal, penyemak imbas menunjukkan ikon dokumen generik dan boleh mencuba semula /favicon.ico pada navigasi seterusnya.
Contoh nyahpepijat
Tab rangkaian menunjukkan 200 untuk favicon.svg tetapi tab menggunakan ICO: SVG gagal menghidu MIME — betulkan Jenis Kandungan pada pelayan.
Muat turun ICO tetapi kelihatan salah saiz: buka dalam pemapar heks — anda mungkin mempunyai hanya satu bingkai 16×16 di dalamnya.
Mod gelap SVG berfungsi dalam Firefox, bukan Chrome: semak sintaks CSS di dalam <style>; Chrome lebih ketat mengenai pemilih yang tidak sah.
Ikon manifes diabaikan: ralat sintaks JSON — sahkan site.webmanifest dalam panel Aplikasi DevTools.
Soalan lazim
Adakah favicons dicache selama-lamanya? Selalunya untuk hari setiap profil, bebas daripada cache halaman.
Adakah favicon mengikuti CORS? Biasanya tidak — ia dimuatkan seperti imej tanpa CORS preflight.
Bolehkah saya menggunakan WebP untuk favicons? Sokongan terhad; berpegang pada ICO, PNG, SVG untuk liputan luas.
Mengapa 48×48 di dalam ICO? Saiz cengkerang Windows lama; murah untuk dimasukkan ke dalam bundle.
Menyelesaikan masalah
Ikon hilang sekejap-sekejap: perlumbaan antara penghuraian HTML dan pengambilan /favicon.ico — isytiharkan <pautan> awal dalam <head>.
Betulkan secara setempat, salah pada CDN: cache tepi basi untuk .ico — bersihkan atau versikan nama fail.
Ikon terbalik atau warna salah: Orientasi EXIF pada sumber PNG — jalur EXIF sebelum menjana ICO.
Dua ikon berbeza pada www dan apex: penempatan berasingan — menyatukan fail atau mengubah hala nama hos.
Sejarah format ringkas
Favicon bermula sebagai fail 16×16 ICO dalam kegemaran Internet Explorer. Laluan de-facto /favicon.ico tersekat walaupun format berkembang.
Teg pautan PNG tiba apabila paparan mendapat ketumpatan. Apple memperkenalkan ikon-sentuh epal sebagai hubungan pautan yang berasingan untuk skrin utama iOS.
SVG favicons mendapat daya tarikan selepas penyemak imbas melaksanakan pemaparan subset SVG yang selamat dalam UI krom, bukan sahaja dalam kandungan halaman.
Manifes apl web merasmikan keperluan 192 dan 512 PNG untuk audit kebolehpasangan dalam Chromium.
Memahami garis masa ini menerangkan sebab tiada format tunggal yang menang — setiap lapisan menyelesaikan masalah yang tidak dapat diselesaikan oleh lapisan sebelumnya.
Alat untuk memeriksa favicon bait
Penapis panel Rangkaian Chrome DevTools mengikut jenis sumber Img atau mengikut nama fail. Lumpuhkan cache semasa menyahpepijat.
curl -I https://yoursite.com/favicon.ico mendedahkan status, Jenis Kandungan dan pengepala cache tanpa gangguan cache penyemak imbas.
ImageMagick mengenal pasti favicon.ico menyenaraikan bingkai dan dimensi terbenam pada baris arahan.
Penganalisis ICO dalam talian menunjukkan entri direktori tanpa memasang perisian — berguna pada komputer riba korporat yang dikunci.
Untuk SVG, buka fail dalam editor teks dan sahkan tiada xlink:href mata luar domain luar.
Bandingkan saiz bait sebelum dan selepas penjanaan semula. Penurunan saiz 10× biasanya bermaksud pemampatan PNG menggantikan BMP di dalam ICO.
Pelayan jenis MIME harus dihantar
favicon.ico — imej/ikon-x atau imej/vnd.microsoft.icon. Pelayar bertolak ansur tetapi MIME yang betul membantu proksi.
favicon.svg — imej/svg+xml. Teks yang salah/biasa menyebabkan sesetengah enjin melangkau SVG.
Ikon PNG — imej/png. Gzip atau Brotli pada lapisan CDN adalah baik.
Blok jenis nginx yang salah konfigurasi ialah punca utama SVG favicon berfungsi secara setempat (pelayan dev Vite) tetapi gagal dalam pengeluaran.
Mana nak baca spek
Struktur ICO didokumenkan dalam format sumber Windows awal dan dimodenkan oleh piawaian de-facto PNG-dalam-ICO.
WHATWG HTML mentakrifkan pautan rel=icon gelagat pelayar melaksanakan dengan tweak vendor.
Manifes Apl Web W3C menentukan skema tatasusunan ikon untuk kebolehpasangan.
SVG favicons mengikut SVG Peraturan subset kecil penyemak imbas digunakan dalam UI chrome — bukan setiap ciri SVG 2 disokong.
Apabila spesifikasi tidak bersetuju, uji dalam penyemak imbas sasaran. Tingkah laku de-facto memenangi catatan blog berusia sedekad.
Simpan fail nota setempat dengan ambang versi penyemak imbas apabila pasukan anda menggugurkan sokongan untuk pelanggan ICO sahaja yang lama.
Buku permainan tindak balas insiden
Jika favicons memecahkan seluruh tapak selepas digunakan, gulung semula aset statik dahulu — perubahan HTML jarang menjadi punca apabila hanya ikon yang gagal.
Semak log CDN 404 untuk favicon.ico dan apple-touch-icon.png dalam masa lima minit selepas kejadian bermula.
Bandingkan bait tindak balas antara pengeluaran dan artifak baik yang terakhir diketahui dalam git.
Bedah siasat: dokumen sama ada punca utama ialah MIME, bingkai hilang atau cache — tiga pembetulan berbeza.
Tambah monitor sintetik yang HEAD-meminta /favicon.ico setiap jam jika ikon adalah perniagaan yang kritikal untuk kepercayaan.
Ajar jurutera atas panggilan di mana fail ikon hidup dalam artifak atur jadi supaya rollback adalah beberapa minit, bukan jam.