كيفية إنشاء favicon
إن favicon الحديث هو أكثر من مجرد صورة بحجم 16×16. يستعرض هذا الدليل إعداد المصدر، والتوليد متعدد الأحجام، وإعداد HTML، وأمثلة واقعية، وإصلاحات للمشكلات التي تعوق معظم الفرق.
ما هو favicon؟
favicon هو رمز صغير يتم عرضه في المتصفحات في علامات التبويب وأشرطة الإشارات المرجعية وقوائم المحفوظات وأشرطة العناوين. على الهواتف، يصبح رمز الشاشة الرئيسية عندما يقوم شخص ما بحفظ موقعك. في Windows يظهر على دبابيس شريط المهام واختصارات سطح المكتب. استخدم [مولد favicon] (الأداة: favicon-generator)، و[محول PNG إلى ICO] (الأداة: png-to-ico)، و[محول SVG إلى ICO] (الأداة: svg-to-ico)، و[اختبار favicon المباشر] (الأداة المساعدة: favicon-tester) لإنشاء مجموعة الرموز الخاصة بك والتحقق منها، وقراءة [الرفيق دليل] (الدليل: كيفية إنشاء a-favicon) للحصول على إرشادات تفصيلية مكثفة.
تأتي الكلمة من أيقونة المفضلة، لكن المهمة تطورت إلى ما هو أبعد من مجرد صورة GIF واحدة مقاس 16 × 16. تعد favicon اليوم عبارة عن عائلة أصول صغيرة: favicon.ico على مستوى الجذر، ومتغيرات SVG وPNG الاختيارية، وأيقونة apple-touch لـ iOS، وأيقونات بيانية لـ PWAs القابلة للتثبيت.
نادرًا ما يعلق المستخدمون على favicon جيد، لكنهم يلاحظون وجود مفقود أو ضبابي على الفور. تشير الأيقونة الواضحة إلى التلميع وتجعل علامة التبويب الخاصة بك قابلة للتحديد من بين عشرين صفحة مفتوحة.
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.
قم بإعداد الصورة المصدر الخاصة بك
ابدأ من صورة مربعة بحجم 512 × 512 بكسل على الأقل. يعد SVG مع مربع viewBox مثاليًا لأنه يتناسب بشكل واضح مع كل حجم نقطي ستقوم بتصديره.
تجنب الخطوط الرفيعة والطباعة الدقيقة والتدرجات المعقدة. عند 16×16، تندمج تفاصيل خط الشعر في الهريسة الرمادية. قم بتبسيط العلامة: أشكال أقل، وتباين أعلى، والمزيد من الحشو حول الحرف الرسومي.
إذا كان شعارك أفقيًا، فقم بإنشاء اقتصاص مربع يؤدي إلى توسيط الرمز بدون العلامة النصية. نادرًا ما تنجو أشكال الحروف التي يقل ارتفاعها عن 8 بكسل من عملية تصغير الحجم.
قم بتصدير PNG-32 بشفافية عندما تكون البيانات النقطية هي خيارك الوحيد. ستظهر الخلفية البيضاء المخبأة بشكل خاطئ في متصفح Chrome الداكن وعلى مشغلات الأجهزة المحمولة الملونة.
إنشاء .ico متعدد الأحجام
حزمة إطارات 16 و32 و48 و64 و128 و256 بكسل داخل ملف favicon.ico واحد. تقوم المتصفحات وWindows بقراءة رأس الدليل وفك ترميز الحجم الذي يحتاجونه فقط.
ضع favicon.ico في جذر موقعك (/favicon.ico). حتى لو أعلنت عن علامات <link> حديثة، فإن برامج الزحف والعملاء الأقدم لا تزال تستكشف هذا المسار وفقًا للاتفاقية.
يقوم المولد favicon الخاص بنا بتنقيط كل حجم من جانب العميل في أقل من ثانية. لا تترك الصورة المصدر المتصفح أبدًا، وهو ما يهم عندما تكون العلامة عبارة عن شعار منتج لم يتم طرحه.
أضف العلامات HTML
قم بإسقاط هذه العلامات في <head> لإعداد 2026 الكامل:
<link rel="icon" href="/favicon.ico"sizes="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
يوفر الخط SVG علامات تبويب واضحة على Chromium وFirefox. يغطي السطر .ico العناصر الاحتياطية Safari واختصارات Windows وقارئات RSS التي تتجاهل SVG.
أمثلة من العالم الحقيقي
موقع تسويق ثابت: قم بتحميل 512 × 512 PNG لعلامة الشعار الخاصة بك، وقم بإنشاء favicon.ico بالإضافة إلى رمز apple-touch بحجم 180 × 180، وأضف أربعة أسطر <link>، وانشرها على /public أو جذر الويب. الوقت الإجمالي: أقل من خمس دقائق.
تطبيق React / Vite: ضع الرموز في /public، وقم بالإشارة إليها باستخدام المسارات النسبية للجذر في ملف Index.html. لم يتم تغيير النسخ /public في وقت الإنشاء، لذلك يتم حل /favicon.ico بشكل صحيح في الإنتاج.
WordPress: تخطي الدليل HTML — استخدم المظهر → التخصيص → هوية الموقع → Site Icon. تحميل مصدر 512×512؛ يقوم WordPress بإصدار العلامات الصحيحة تلقائيًا. راجع برنامجنا التعليمي WordPress للحصول على نصائح بشأن خرق ذاكرة التخزين المؤقت.
العلامة التجارية ذات الوضع الداكن: قم بتصدير SVG الذي يتم تبديل تعبئته داخل @media (prefers-color-scheme: داكن). قم بإقرانه مع خيار احتياطي .ico محايد للعملاء الذين لم يقوموا بتحميل SVG مطلقًا.
التحقق في كل متصفح
إعادة التحميل القسري (Ctrl+Shift+R أو Cmd+Shift+R) في Chrome وSafari وFirefox وEdge. غالبًا ما تحتفظ عمليات إعادة التحميل العادية بـ favicon المخزن مؤقتًا لعدة أيام.
تحقق من أربعة أسطح: علامة تبويب المتصفح، وشريط الإشارات المرجعية، والإضافة إلى الشاشة الرئيسية على iOS، وأيقونة شريط المهام Windows المثبتة. قد يطلب كل سطح دقة مختلفة عن الحزمة الخاصة بك.
افتح DevTools → Network، وقم بالتصفية حسب ico أو png، وأعد التحميل، وقم بتأكيد 200 استجابة لكل عنوان URL للرمز الذي أعلنته. يعد 404 المنفرد على apple-touch-icon.png خطأً شائعًا.
الأسئلة المتداولة
هل ما زلت بحاجة إلى favicon.ico إذا كان لدي SVG؟ نعم. احتفظ بـ .ico كبديل عالمي. SVG هو تحسين وليس بديلاً.
ما هو الحد الأدنى القابل للحياة favicon؟ متعدد الأحجام favicon.ico في /favicon.ico. كل شيء آخر يعمل على تحسين الوضوح على الشاشات ذات DPI العالية والشاشات المنزلية المحمولة.
هل يمكنني استخدام JPG؟ يمكنك ذلك، لكنك تفقد الشفافية. يعد PNG أو SVG أفضل دائمًا لأيقونات الواجهة.
كم مرة يجب أن أقوم بتحديث favicon؟ كلما تغيرت علامة علامتك التجارية. قم بإضافة استعلام ?v=2 على علامات <link> مرة واحدة للتغلب على ذاكرة التخزين المؤقت القوية للمتصفح.
استكشاف الأخطاء وإصلاحها
لا يتم تحديث الرمز بعد النشر: تقوم المتصفحات بتخزين favicons بشكل مستقل عن HTML. قم بتحديث بيانات الموقع أو مسحها أو إلحاق ?v=2 بعناوين URL الخاصة بالأيقونات مؤقتًا.
رمز علامة التبويب غير واضحة: كان المصدر صغيرًا جدًا أو غير مربع. إعادة إنشاء من 512×512 أو SVG؛ تحقق من أن .ico يحتوي فعليًا على إطار مقاس 32×32.
مربع أبيض حول الشعار: المصدر ذو خلفية غير شفافة. أعد التصدير بشفافية وأعد إنشاء .ico باستخدام الإدخالات المضغوطة PNG.
يعمل محليًا ولكن ليس في الإنتاج: تأكد من وجود الملفات في جذر الويب العام، وليس فقط في src/. تحقق من ذاكرة التخزين المؤقت لـ CDN والمسارات الحساسة لحالة الأحرف على خوادم Linux.
قائمة مرجعية خطوة بخطوة
قم بتصدير أو تحديد موقع مربع رئيسي بحجم 512 × 512 أو أكبر. تأكد من الشفافية وملف تعريف ألوان sRGB وعدم وجود طبقة خلفية مخفية في ملف التصميم الخاص بك.
قم بتشغيل البرنامج الرئيسي من خلال مولد favicon من جانب العميل. قم بتنزيل favicon.ico، وfavicon.svg، إن أمكن، وapple-touch-icon.png، والبيان PNGs في مسار واحد.
قم بتحميل جميع الملفات إلى جذر الويب العام الخاص بك. على المضيفين الثابتين، هذا يعني نفس المجلد مثل ملف Index.html؛ في الأطر، استخدم الدليل /public أو /static الذي يعين /.
الصق كتلة <link> الموصى بها في <head> قبل أي نصوص برمجية لحظر العرض. يساعد التنسيب المبكر المتصفحات على اكتشاف الأيقونات عند الطلاء الأول.
التحقق من الصحة من خلال إعادة التحميل القسري عبر Chrome وSafari وFirefox. قم بتثبيت علامة تبويب، ووضع إشارة مرجعية على الصفحة، واختبار الإضافة إلى الشاشة الرئيسية على جهاز iPhone حقيقي إذا كانت حركة المرور iOS تهمك.
قم بتوثيق الأيقونة التي تم تعيينها في ملف README أو نظام التصميم الخاص بك حتى لا تبدأ إعادة العلامة التجارية التالية من شخص واحد مقاس 32 × 32 PNG تم العثور عليه في البريد الإلكتروني.
أخطاء شائعة يجب تجنبها
باستخدام شعار أفقي كامل بحجم فتحة 16 × 16 - يصبح النص ضجيجًا غير قابل للقراءة. اقتصاص إلى الرمز.
شحن فقط 16 × 16 PNG تمت إعادة تسميته إلى .ico بدون دليل مناسب متعدد الأحجام - Windows وعلامات التبويب Retina راقية وغير واضحة.
نسيان أيقونة apple-touch أثناء الهوس بعلامات تبويب سطح المكتب - يمثل مستخدمو iOS حصة كبيرة من حركة مرور الويب عبر الهاتف المحمول.
توجيه <link href> إلى مسار CDN الذي يختلف بين التدريج والإنتاج دون إنشاءات صديقة للبيئة.
بافتراض أن WordPress أو Shopify أو Webflow سيصلح بطريقة سحرية تحميل المصدر منخفض الدقة. القمامة في، القمامة في كل حجم.