دليل favicon الشفاف
خلفية مصمتة على favicon تبدو قديمة وتتعارض مع الوضع الداكن. إليك كيف تحافظ على قناة ألفا من البداية إلى النهاية.
تحقق من أيقونات أي موقع
ثبّت إضافة FetchFavicon لمتصفح Chrome لاستخراج الأيقونات ومعاينتها والتحقق منها فورًا.
ابدأ بمصدر شفاف
صدّر شعارك بصيغة PNG-32 بدون تعبئة خلفية، أو استخدم SVG. معظم التشويش يأتي من خلفية بيضاء مدمجة في المصدر وليس من أداة الـ favicon.
.ico يدعم قناة ألفا
الإدخالات المضغوطة بصيغة PNG داخل .ico تحتفظ بقناة ألفا. إدخالات BMP لا تفعل — استخدم أداة تختار الترميز المناسب لكل مقاس.
التعامل مع الوضع الداكن
وفّر SVG يحتوي كتلة <style>@media (prefers-color-scheme: dark) { ... }</style>، ودع .ico يتولّى البديل الثابت.
الأسئلة الشائعة
How do I make a favicon with a transparent background?
Start from a PNG-32 or SVG with no baked-in background. Export to .ico using a tool that preserves the alpha channel.
Does .ico support transparency?
Yes when entries use PNG compression. Bitmap-encoded .ico entries do not preserve alpha.
How do transparent favicons work in dark mode?
Ship an SVG favicon with prefers-color-scheme styles, and keep a static .ico fallback for browsers that ignore SVG.