مولد الفافيكون
ارفع صورة واحدة وحمّل كل أحجام الفافيكون — صور PNG من 16 إلى 512 بكسل مع وسوم HTML. يعمل بالكامل داخل متصفحك.
1,145 مشاهدة
تعذّرت قراءة الصورة — جرّب PNG/JPG/WebP
الأحجام المهمة في 2026
تتوقع كل الأجهزة والسياقات المختلفة حجم فافيكون مختلفًا، لأن الفافيكون ليس ملفًا واحدًا — بل هو عائلة من الملفات. تستخدم تبويبات المتصفح صورًا صغيرة جدًا بصيغة PNG بمقاس 16×16 و32×32 بكسل. تستخدم ميزة "أضف إلى الشاشة الرئيسية" في iOS أيقونة apple-touch-icon بمقاس 180×180 بكسل. أما أندرويد وتطبيقات الويب التقدمية (PWA) المثبَّتة فتسحب أيقونات بمقاس 192×192 و512×512 بكسل من بيان تطبيق الويب لعرضها على الشاشة الرئيسية وشاشة البدء. لا يمكن لصورة مصدر واحدة أن تخدم كل هذه الاحتياجات مباشرة — فشعار بمقاس 512 بكسل يُضغط مباشرة في تبويب 16 بكسل يفقد كل تفاصيله تقريبًا، وأيقونة بمقاس 16 بكسل تُمدَّد إلى 512 بكسل تبدو ضبابية ومربّعة الشكل. لذا فالنهج الصحيح هو تصيير مصدر واحد عالي الدقة إلى كل حجم مستهدف على حدة، بإعادة رسم البكسلات من جديد في كل حجم بدلاً من تحجيم ناتج واحد من آخر.
هذا بالضبط ما تفعله هذه الأداة: تحمّل صورتك المصدر إلى عنصر canvas في متصفحك وتُعيد تحجيمها إلى الأحجام الستة القياسية جميعها — 16 و32 و48 و180 و192 و512 بكسل — كل منها يُرسَم مباشرة من الأصل، ثم تمنحك ملفات PNG المطابقة إلى جانب وسوم <link> لتُلصقها في <head> موقعك. لا شيء يُرفع؛ يحدث التحجيم عبر Canvas API على جهازك أنت.
التصميم من أجل أصغر حجم
ولأن قدرًا كبيرًا من التفاصيل يضيع عند 16 بكسل، يعمل تصميم الفافيكون بالاتجاه المعاكس بدءًا من أصغر حجم، لا الأكبر. اقتصر على قصّ رمز الشعار بدلاً من اسم العلامة الكامل — إذ يتحول النص إلى بقعة غير مقروءة دون نحو 24 بكسل. حافظ على تباين قوي أمام أشرطة التبويبات الفاتحة والداكنة على حد سواء، لأن المتصفحات تتنقل بين السمات. تُقرأ الخلفية الصلبة عادةً بشكل أفضل من الشفافية عند أصغر الأحجام، حيث يمكن أن تبدو بضعة بكسلات حافة شبه شفافة وكأنها تشويش. تحتفظ علامات تجارية كثيرة بنسخة مبسّطة من شعارها كـ"أيقونة تطبيق" — حرف واحد أو رمز أولي أو شكل بسيط — لسبب محدد هو أن شعارها الكامل لا يصمد أمام اختبار 16 بكسل.
يفيد أيضًا فهم ملف البيان (manifest) الذي يربط أيقونتي 192 و512 بكسل معًا للمواقع القابلة للتثبيت: يشير بيان تطبيق الويب (manifest.json) إلى هذين الحجمين عبر رابط URL لكي تعرف برامج تثبيت أندرويد وتطبيقات سطح المكتب التقدمية أي أيقونة تجلبها للشاشة الرئيسية ومبدّل التطبيقات. تظل المواقع التي تتجاوز أيقونات البيان تعمل بشكل كامل — إذ يعمل تبويب المتصفح وأيقونات الشاشة الرئيسية في iOS بشكل مستقل — لكن قد تعود رسالة التثبيت نفسها إلى أيقونة عامة أو ترفض عرض التثبيت أصلاً.
الأسئلة الشائعة
هل ما زلت بحاجة إلى ملف .ico؟
نادرًا. تقبل جميع المتصفحات الحديثة أيقونات PNG المعلَنة عبر خاصية sizes في وسم link. الاحتفاظ بملف /favicon.ico في جذر موقعك لا يفيد إلا العملاء القديمة جدًا والأدوات التي تطلب هذا المسار الثابت والقديم مباشرة.
ما نوع الصورة التي يجب أن أرفعها؟
صورة مربعة، يُفضَّل أن تكون 512 بكسل أو أكبر، بصيغة PNG أو صورة نقطية مصدَّرة من SVG مع توسيط الرمز وترك مساحة كافية حوله. تُقصّ الصور غير المربعة من المنتصف إلى مربع قبل التحجيم حتى لا يتمدد أي شيء.
لماذا يبدو رمزي ضبابيًا أو باهتًا عند 16 بكسل؟
لا يمكن لستة عشر بكسلًا أن تحمل تفاصيل دقيقة فعليًا — تتلاشى الخطوط الرفيعة والتدرجات والنصوص الصغيرة في بقعة ضبابية. بسّط الرمز المصدر، أو زد التباين، أو صمم نسخة مخصصة للأحجام الصغيرة إذا كان شعارك الكامل لا يصمد أمام أصغر أيقونة تبويب.
ما الفرق بين أيقونتي 192 و512 بكسل؟
كلتاهما تغذّي بيانات أندرويد وPWA: يُستخدم 192 بكسل لأيقونة الشاشة الرئيسية بالكثافة العادية، بينما يُستخدم 512 بكسل للشاشات عالية الكثافة وشاشة البدء المعروضة أثناء تحميل تطبيق PWA — يختار أندرويد ما يناسب السياق.
هل يجب إضافة كل حجم، أم بضعة أحجام فقط؟
بالنسبة لموقع حديث، يغطي 32 بكسل إلى جانب apple-touch-icon بمقاس 180 بكسل الغالبية العظمى من الزوار. أضف أيقونات بيان 192/512 بكسل فقط إذا كان الموقع قابلاً للتثبيت كتطبيق PWA؛ أما مقاسا 16 و48 بكسل فيساعدان بشكل أساسي في السياقات القديمة.
أدوات مشابهة
الإبلاغ عن مشكلة
مولد الفافيكون
التعليقات
لا توجد تعليقات بعد — كن أول من يكتب تعليقًا!