كيف يعمل إنشاء الفافيكون في المتصفح
خط أنابيب الإنشاء بأكمله يعمل داخل علامة تبويب المتصفح باستخدام Canvas API ومكتبة الضغط fflate. لا معالجة على الخادم، ولا رفع، ولا خدمات طرف ثالث.
- حمّل صورة المصدر أو اعرض النص أو الرمز التعبيري على لوحة رسم خارج الشاشة بدقة عالية. إذا اخترت صورة، يقوم المتصفح بفك تشفيرها أصلاً. إذا اخترت وضع النص، ترسم الصفحة كلمتك على لوحة رسم بالخط واللون الأمامي ولون الخلفية المختارة.
- لكل حجم مستهدف (16 و32 و48 و180 و192 و512 بكسل)، تنشئ الصفحة لوحة رسم جديدة خارج الشاشة بتلك الأبعاد الدقيقة، ثم ترسم المحتوى المصدر عليها باستخدام Canvas API. يتولى تغيير الحجم المضمّن في المتصفح التصغير باستخدام ترشيح bilinear أو bicubic تلقائيًا، منتجًا فافيكون حادة بكل الأحجام.
- تُصدّر كل لوحة رسم إلى PNG عبر
canvas.toBlob(). تعرض لوحة المعاينة جميع الأحجام الستة لتتمكن من فحص النتيجة قبل التنزيل. يتم بناء كتلة HTML جاهزة للصق ومقتطف بيان تطبيق الويب (manifest.json) من أسماء الملفات لتتمكن من إدراجها مباشرة في وسم head لموقعك. - عند النقر على تنزيل ZIP، تقرأ الصفحة كل PNG في الذاكرة، وتستخدم fflate لتعبئتها مع ملف
manifest.jsonفي أرشيف ZIP واحد، وتبدأ التنزيل بنقرة واحدة. الحزمة بأكملها تُبنى في متصفحك — لا شيء يُرفع في أي مرحلة.
لماذا إنشاء الفافيكون في المتصفح؟
- مجموعة فافيكون كاملة تلغي خطأ 404 الناتج عن عدم وجود الفافيكون في أول زيارة وتضمن أن موقعك يبدو احترافيًا في الإشارات المرجعية وعلامات تبويب المتصفح وشاشات تثبيت PWA. الأحجام المفقودة تعني أن المتصفح إما لا يحمل شيئًا أو يتراجع إلى مقياس جارٍ قريب مشوش.
- كتلة HTML وبيان manifest المرفقان يوفران عليك كتابة ستة وسوم وكتلة JSON يدويًا. الصقها في head موقعك، وعدّل المسارات إذا لزم الأمر، وستنتهي في ثوانٍ بدلاً من دقائق.
- الإنشاء من جانب العميل هو الخيار الوحيد على أجهزة الشركات المقفلة التي تفتقر إلى محرر صور. نظرًا لعدم رفع أي شيء، لا يوجد خطر تسرب بيانات ولا حاجة لمراجعة الامتثال للصور الحساسة أو ذات العلامات التجارية.
- وضع النص والرموز التعبيرية يتيح لك إنشاء فافيكون بدون أي صورة على الإطلاق. اكتب الحرف الأول لعلامتك التجارية أو حرفًا أو رمزًا تعبيريًا، واختر خطًا ولونًا، واحصل على مجموعة كاملة — مثالية للمشاريع الشخصية والنماذج الأولية أو المواقع التي تحتاج فافيكون مؤقتًا الآن.
تطبيقات شائعة لإنشاء الفافيكون
كل موقع يضع الأشخاص إشارة مرجعية عليه أو يثبتونه يحتاج فافيكون. إليك ثلاثة سيناريوهات حيث يوفر المنشئ القائم على المتصفح الوقت.
- إعداد صفحة هبوط جديدة أو موقع مصغر. أنشئ مجموعة فافيكون كاملة من شعار العلامة التجارية في أقل من دقيقة، وانسخ وسوم في head الموقع، وانشر. لا حاجة لأداة تصميم.
- إنتاج أيقونات PWA لتطبيق ويب تقدمي. أيقونات PNG 192×192 و512×512 مطلوبة لملف manifest.json. أنشئها مع باقي مجموعة الفافيكون في خطوة واحدة بدلاً من تغيير حجم الشعار يدويًا.
- إنشاء أيقونات مؤقتة للنماذج الأولية ومواقع التطوير. اكتب حرفًا واحدًا أو رمزًا تعبيريًا، واختر لون خلفية، واحصل على فافيكون واقعية دون انتظار الأصول النهائية من فريق التصميم.
مثال عملي: إنشاء مجموعة فافيكون من شعار شركة
لديك شعار PNG بحجم 500×500 بكسل وتحتاج مجموعة فافيكون كاملة لموقع تسويقي جديد.
افتح هذه الصفحة وأسقط شعار PNG في منطقة الرفع. يتم تحميل الصورة وتظهر معاينة بجانب شبكة الأحجام. انقر على إنشاء الفافيكون. ترسم الصفحة الشعار على ست لوحات رسم خارج الشاشة بأحجام 16 و32 و48 و180 و192 و512 بكسل وتعرض كل نتيجة. أسفل لوحة المعاينة، تظهر كتلة HTML الجاهزة للصق مع إدخالات rel="icon" للأحجام 16/32/48 ورابط apple-touch-icon للحجم 180 ورابط manifest لأيقونات PWA. يسرد مقتطف البيان أدناه أيقونات 192 و512. انقر على تنزيل ZIP — تقوم الصفحة بتعبئة جميع ملفات PNG الستة مع manifest.json في أرشيف ZIP واحد عبر fflate. الرحلة بأكملها تستغرق ثانيتين ولا تستهلك نطاقًا تردديًا يتجاوز تحميل الصفحة الأولي.
ما أحجام الفافيكون التي تولدها الأداة؟
ستة أحجام: 16×16 و32×32 و48×48 للفافيكون القياسي في المتصفحات، و180×180 لأيقونة Apple Touch، و192×192 و512×512 لأيقونات بيان PWA. كل حجم يُصدر بصيغة PNG. المتصفحات الحديثة تقبل PNG كفافيكون عبر .
هل يمكنني إنشاء فافيكون من نص أو رمز تعبيري؟
نعم. انتقل إلى وضع النص أو الرموز التعبيرية، اكتب كلمة أو الصق رمزًا تعبيريًا، واختر خطًا ولونًا أماميًا ولون خلفية، وانقر على إنشاء. يُعرض النص على لوحة رسم خارج الشاشة بدقة عالية ثم يُغيّر حجمه إلى كل حجم فافيكون مستهدف.
هل تُرفع الصورة إلى خادم؟
لا. الصورة لا تغادر جهازك أبدًا. تستخدم الصفحة File API لقراءة الصورة في الذاكرة وCanvas API لتغيير الحجم وتصدير كل فافيكون. افتح لوحة DevTools Network أثناء الإنشاء — الطلبات الصادرة الوحيدة هي تحميل الصفحة الأولي وطلبات الإعلانات. لا تُنقل أي بيانات صورة.
ما الصيغ المقبولة لرفع الصور؟
أي صيغة يمكن للمتصفح فك تشفيرها: PNG وJPEG وWebP وGIF وSVG (يُحوّلها المتصفح إلى نقطية). حد حجم الملف هو 10 ميغابايت لكل رفع.
كيف يعمل تنزيل ZIP؟
تستخدم الصفحة مكتبة fflate (تُحمّل عند الطلب من مسار مورد مشترك) لتعبئة جميع PNG المُنشأة بالإضافة إلى manifest.json في أرشيف ZIP قياسي. تتم التعبئة بالكامل في ذاكرة المتصفح — بدون رفع، بدون رحلة ذهاب وإياب للخادم. يُقدّم ZIP كتنزيل Blob بنقرة واحدة.
هل يمكنني استخدام هذه الفافيكون على أي موقع؟
نعم. تعمل أيقونات الفافيكون PNG المُنشأة على كل متصفح حديث يدعم وسم . أيقونة Apple Touch 180×180 تغطي iOS وSafari. أيقونات PWA 192×192 و512×512 تفي بمتطلبات البيان لـ Chrome على Android والمتصفحات الأخرى الداعمة لـ PWA.
هل هناك خيار صيغة .ico حقيقية؟
الإصدار الحالي يُخرج PNG لأن جميع المتصفحات الحديثة تقبلها عبر . صيغة .ico متعددة الدقة غير مدعومة بعد وقد تُضاف في إصدار مستقبلي.