Favicon لـ Webflow
يدير Webflow الرمز المفضل لديك من إعدادات المشروع ويقدمه من CDN العالمي الخاص به في كل صفحة منشورة. قم بتحميل مربع PNG أو ICO - من الناحية المثالية 512×512 - ويقوم Webflow بإدخال علامة `<link rel='icon'>` الصحيحة عبر موقعك بالكامل. للحصول على دعم SVG وapple-touch-icon، استخدم حقن الرمز المخصص `<head>` المتوفر في الخطط المدفوعة. ابدأ بـ favicon generator لإنشاء حزمة أيقونات كاملة قبل التحميل.
يعد تحميل أيقونة Webflow جزءًا من لوحة إعدادات المشروع، وهي منفصلة عن لوحة المصمم. انقر فوق اسم المشروع في لوحة المعلومات Webflow، ثم انتقل إلى إعدادات المشروع > عام. قم بالتمرير لأسفل إلى قسم Favicon & App Icon، وانقر فوق منطقة التحميل، واختر ملف الصورة الخاص بك. يقبل Webflow تنسيقات PNG وICO وGIF.
32×32 بكسل PNG هو الحد الأدنى للحجم المطلوب لبرنامج تحميل الأيقونات المفضلة لـ Webflow، ولكن البدء من 512×512 ينتج نتيجة أكثر وضوحًا. يقوم Webflow باختزال صورتك لعرض علامة التبويب وأي متغيرات تم إنشاؤها بواسطة CDN. قم دائمًا بتوفير أكبر مصدر نظيف لديك — يُسهل المولد إنشاء 512×512 PNG من أي شعار.
يستضيف Webflow الرمز المفضل على CDN الخاص به مع عنوان URL يتم إنشاؤه تلقائيًا (عادةً بالتنسيق uploads-ssl.webflow.com/...). لا تحتاج إلى توفير مسار CDN يدويًا. بعد التحميل، انقر فوق حفظ ثم نشر مشروعك. يتم إدراج الرمز المفضل عند النشر، وليس فقط عند الحفظ - فالتغييرات غير المنشورة لا تكون مرئية في نطاقك المباشر.
تعمل الخلفيات الشفافة بشكل صحيح مع تحميلات الأيقونات المفضلة Webflow. يحتفظ CDN بقنوات ألفا PNG، لذلك يتم عرض رمز الخلفية الشفافة بشكل واضح مقابل سمات المتصفح ذات الوضع الداكن. إذا كان شعارك يحتوي على خلفية بيضاء أو ملونة خالصة، فسوف يظهر كمربع مربع في علامات تبويب المتصفح. قم بتصدير شعارك بدون تعبئة الخلفية قبل التحميل.
لا يدعم برنامج تحميل الأيقونات المضمن في Webflow ملفات SVG. إذا كنت تريد رمزًا مفضلاً متجهًا SVG لعرض واضح على أي نطاق ودعم الوضع الداكن، فأضفه عبر حقن التعليمات البرمجية المخصصة. انتقل إلى إعدادات المشروع > الرمز المخصص > رمز الرأس وأضف: `<link rel='icon' type='image/svg+xml' href='https://yourdomain.com/favicon.svg'>`. قم باستضافة الملف SVG على الخادم الخاص بك أو خدمة CDN.
تتطلب إضافة apple-touch-icon لعمليات تثبيت iOS على الشاشة الرئيسية أيضًا رمزًا مخصصًا في Webflow، نظرًا لأن برنامج التحميل المدمج يتعامل فقط مع الرمز المفضل القياسي. قم بتحميل ملف apple-touch-icon.png مقاس 180×180 إلى مضيف ملف (أو أصول Webflow إذا كانت خطتك تدعم ذلك)، ثم أدخل `<link rel='apple-touch-icon' size='180x180' href='URL_TO_YOUR_FILE'>` في إعدادات المشروع > الرمز المخصص > حقل رمز الرأس.
دعم رمز PWA الخاص بـ Webflow محدود مقارنة بأطر عمل مثل Next.js. لا يوجد منشئ بيان ويب أصلي في Webflow. للحصول على الدعم الكامل لتثبيت PWA، أنشئ ملف site.webmanifest JSON يدويًا، واستضفه خارجيًا، وأدخل علامة رابط البيان عبر تعليمات برمجية مخصصة. قم بتضمين إدخالات 192×192 و512×512 PNG في مجموعة أيقونات البيان.
إذا كنت تقوم بإنشاء موقع Webflow لعميل، فغالبًا ما يتم تعيين الرمز المفضل في وقت متأخر من المشروع ثم يتم نسيانه. يتمثل سير العمل المفيد في تعيين رمز مفضل للعنصر النائب في وقت مبكر من المشروع واستبداله قبل التسليم. لا يقوم Webflow بإصدار سجل الأيقونة المفضلة - بمجرد حفظ أيقونة مفضلة جديدة، تختفي الأيقونة القديمة من إعدادات المشروع، على الرغم من أنها قد تظل قابلة للوصول عبر عنوان URL الخاص بـ CDN لبعض الوقت.
تشترك مواقع Webflow متعددة النطاق - حيث يتم نشر نفس المشروع على نطاقات مخصصة متعددة - في رمز مفضل واحد لإعدادات المشروع. لا يوجد تجاوز للرمز المفضل لكل مجال في Webflow الأصلي. يظهر نفس الرمز على كافة المجالات المنشورة. إذا كنت بحاجة إلى رموز لكل مجال، فاستخدم حقن التعليمات البرمجية المخصصة لتجاوز علامة رابط الرمز بشكل مشروط (يتطلب ذلك نظام إدارة المحتوى Webflow أو منطقًا مخصصًا).
يمكن أن تستغرق تحديثات Favicon في Webflow بعض الوقت للنشر بسبب التخزين المؤقت لـ CDN. بعد نشر أيقونة مفضلة جديدة، قد تظهر الأيقونة القديمة في المتصفحات لمدة تتراوح بين 24 و48 ساعة. افتح موقعك المباشر في نافذة خاصة/متخفية لرؤية الرمز المحدث دون التدخل في ذاكرة التخزين المؤقت للمتصفح المحلي. إذا كان جمهورك يستخدم صفحات CDN المخزنة مؤقتًا، فإن تأخير النشر يعتمد على إعدادات CDN TTL الخاصة بـ Webflow.
بالنسبة لمستخدمي محرر Webflow (العملاء الذين يقومون بتحرير المحتوى دون وصول المصمم)، لا يمكن تغيير الرمز المفضل من خلال المحرر - فهو مقفل في إعدادات المشروع. يمكن فقط للمتعاونين الذين لديهم حق وصول المصمم أو مالكي الحسابات تحديث الرمز المفضل. قم بتوصيل ذلك بوضوح إلى العملاء حتى يعرفوا مكان طلب تحديثات الأيقونة المفضلة في المستقبل.
بعد نشر أيقونة Webflow المفضلة لديك، استخدم favicon tester لتأكيد حلها في مجال الإنتاج الخاص بك. قارن النتيجة بالحجم المتوقع: 32×32 لعلامات التبويب، 180×180 لـ iOS إذا أضفت apple-touch-icon. راجع أيضًا دليل best favicon size لفهم الأحجام التي تعمل على تحسين درجة اكتمال أيقونة موقعك.
كيف يعمل
- 1
قم بإنشاء حزمة favicon كاملة
استخدم [favicon generator](tool:favicon-generator) مع مصدر 512×512 PNG أو SVG. قم بتنزيل الحزمة — ستستخدم PNG لبرنامج التحميل Webflow وSVG وapple-touch-icon لإدخال التعليمات البرمجية المخصصة.
- 2
افتح إعدادات المشروع
في لوحة المعلومات Webflow، انقر فوق اسم مشروعك، وانتقل إلى إعدادات المشروع > عام، ثم قم بالتمرير إلى قسم أيقونة المفضلة وأيقونة التطبيق.
- 3
قم بتحميل الرمز المفضل لديك PNG
انقر فوق منطقة التحميل، وحدد 512×512 PNG، ثم انقر فوق "حفظ". لا تنشر بعد — أضف SVG وapple-touch-icon بشكل اختياري عبر التعليمات البرمجية المخصصة أولاً.
- 4
أضف SVG وapple-touch-icon عبر الرمز المخصص
في إعدادات المشروع > رمز مخصص > رمز الرأس، أضف `<link rel='icon' type='image/svg+xml' href='URL_TO_SVG'>` و`<link rel='apple-touch-icon' size='180x180' href='URL_TO_180PNG'>`. قم باستضافة كلا الملفين خارجيًا أو في أصول Webflow.
- 5
النشر والتحقق
انقر فوق نشر في Webflow. افتح نطاقك المباشر في نافذة التصفح المتخفي لتأكيد ظهور الرمز المفضل في علامة تبويب المتصفح. استخدم [favicon tester](utility:favicon-tester) للتحقق من الصحة الخارجية.
جربه الآن
قم بإنشاء أيقونة مفضلة جاهزة لـ Webflow
مولد Faviconالأسئلة الشائعة
أين يوجد إعداد الأيقونة المفضلة في Webflow؟+
إعدادات المشروع > عام > أيقونة المفضلة وأيقونة التطبيق. انقر فوق منطقة التحميل، وحدد ملف PNG أو ICO، وانقر فوق "حفظ"، ثم "نشر". يتم نشر الرمز المفضل على نطاقك المخصص بعد النشر.
ما هو حجم الرمز المفضل الذي يقبله Webflow؟+
يقبل Webflow PNG وICO وGIF، مع 32×32 كهدف للعرض. قم دائمًا بتحميل 512 × 512 للحصول على أفضل نتيجة للاختزال. قد يُظهر حقل التحميل معاينة بحجم 32 × 32، لكن جودة الصورة المعروضة الفعلية تأتي من دقة المصدر لديك.
لماذا لا يتم تحديث أيقونة المفضلة Webflow بعد النشر؟+
تأخيرات ذاكرة التخزين المؤقت لـ CDN شائعة. افتح نافذة التصفح المتخفي/الخاص وانتقل إلى عنوان URL لموقعك. إذا استمر ظهور الرمز القديم حتى هناك، فانتظر 24 ساعة حتى تنتهي صلاحية Webflow CDN. قم بإلحاق ?v=2 بالرمز المفضل href في التعليمات البرمجية المخصصة إذا لزم الأمر لفرض جلب جديد.
هل يمكنني استخدام الرمز المفضل SVG في Webflow؟+
ليس عبر برنامج التحميل المدمج، فهو يقبل التنسيقات النقطية فقط. أضف SVG عبر إعدادات المشروع > الرمز المخصص > رمز الرأس: `<link rel='icon' type='image/svg+xml' href='YOUR_SVG_URL'>`. قم باستضافة SVG على الخادم الخاص بك أو على CDN.
كيف أقوم بإضافة apple-touch-icon في Webflow؟+
لا يقوم برنامج تحميل الأيقونة المفضلة لـ Webflow بإنشاء apple-touch-icon تلقائيًا. قم بتحميل 180×180 PNG إلى مضيف ملف، ثم قم بإدخال `<link rel='apple-touch-icon' size='180x180' href='URL'>` في إعدادات المشروع > الرمز المخصص > رمز الرأس.
هل يدعم Webflow أيقونات البيان PWA؟+
ليس أصليا. لإضافة أيقونات PWA، قم بإنشاء ملف site.webmanifest واستضافته خارجيًا باستخدام إدخالات أيقونة 192×192 و512×512، ثم قم بإدخال علامة رابط البيان عبر حقن الكود المخصص لـ Webflow `<head>`.
لا يستطيع عميلي تغيير الرمز المفضل Webflow — لماذا؟+
يتم تعيين الرمز المفضل في إعدادات المشروع، الأمر الذي يتطلب وصول المصمم. محرر Webflow (وضع تحرير محتوى العميل) لا يعرض إعدادات المشروع. يجب على مالك الموقع أو المتعاون على مستوى المصمم إجراء تغييرات على الأيقونة المفضلة.