كيفية إنشاء favicon
يستغرق إنشاء أيقونة مفضلة دقيقتين باستخدام الأداة المناسبة. ابدأ من صورة مصدر مربعة - على الأقل 512 × 512 بكسل - وقم بتشغيلها عبر favicon generator، واحصل على حزمة كاملة: .ico متعدد الحجم، وSVG، وapple-touch-icon، وPNGs الواضح. يشرح هذا الدليل كل خطوة بدءًا من إعداد المصدر وحتى التحقق من المتصفح. للحصول على مرجع متعمق، راجع أيضًا full tutorial.
الرمز المفضل هو رمز صغير يعرضه المتصفح في شريط علامات التبويب وشريط العناوين وقائمة الإشارات المرجعية. على الهاتف المحمول، يصبح رمز الشاشة الرئيسية عندما يحفظ المستخدم موقعك. في Windows يظهر على دبابيس شريط المهام واختصارات سطح المكتب. يعد الحصول على الأيقونة المفضلة بشكل صحيح مجهودًا صغيرًا له تأثير كبير على العلامة التجارية - كل مشاهدة للصفحة تبدأ بأيقونتك الموجودة في علامة تبويب المستخدم.
إن إعداد الأيقونة المفضلة الحديثة ليس ملفًا واحدًا، بل هو مجموعة منسقة. يتعامل ملف .ico متعدد الأحجام مع الإجراء الاحتياطي للمتصفح العالمي. يوفر SVG عرضًا واضحًا وقابلاً للتطوير على المتصفحات الحديثة، بما في ذلك دعم الوضع المظلم. 180×180 PNG (apple-touch-icon) هو ما يستخدمه iOS لعمليات تثبيت الشاشة الرئيسية. 192×192 و512×512 PNG يغذيان موجه التثبيت Android PWA. صورة مصدر واحدة معدة جيدًا تولد كل هذه الأشياء مرة واحدة.
يعد إعداد الصورة المصدر الخطوة الأكثر إغفالًا. يجب أن يكون شعارك مربعًا — حيث يؤدي الاقتصاص غير المتماثل دائمًا إلى نتيجة ممتدة. صمم نسخة مبسطة من علامة علامتك التجارية بحيث يمكن قراءتها بوضوح بأحجام صغيرة: تقليل الخطوط الدقيقة وإزالة النص الصغير وزيادة التباين. ما يبدو أنيقًا عند 512×512 يمكن أن يصبح نقطة غير قابلة للقراءة عند 16×16 إذا تخطيت تمريرة التبسيط هذه.
يعد SVG تنسيق المصدر المثالي لأنه لا يعتمد على الدقة. يتم تنقيط الرسم المتجه إلى أي كثافة بكسل دون فقدان الجودة. إذا كان لديك فقط بيانات نقطية PNG أو JPG، فتأكد من أنها على الأقل 512×512 قبل الإنشاء - يؤدي تصغير الحجم من أي شيء أصغر إلى ظهور ضبابية تتراكم خلال كل خطوة تغيير الحجم وينتج عنها رمز علامة تبويب غامض.
تنسيق .ico عبارة عن حاوية، وليس صورة واحدة. وهو يحمل إطارات نقطية متعددة - عادةً 16 × 16، و32 × 32، و48 × 48، و64 × 64 - في ملف واحد. يقوم المتصفح بتوزيع الدليل ICO ويعرض فقط الإطار الذي يتطابق بشكل وثيق مع كثافة العرض التي يحتاجها. يعني أسلوب الملف الفردي هذا أنك لا تحتاج إلى علامات ارتباط منفصلة لكل دقة - حيث تغطي علامة واحدة جميع أحجام علامات التبويب.
قم بتحميل الصورة المصدر إلى favicon generator. تقوم الأداة بمعالجة كل شيء محليًا في متصفحك - ولا تترك صورتك جهازك أبدًا. في غضون ثوانٍ، ينتج حزمة تنزيل تحتوي على favicon.ico وfavicon.svg وapple-touch-icon.png (180×180) وandroid-chrome-192x192.png وandroid-chrome-512x512.png وsite.webmanifest، بالإضافة إلى علامات الارتباط HTML الجاهزة لللصق.
وضع الملفات أمر بسيط. قم بإسقاط جميع الملفات التي تم إنشاؤها في الدليل الجذر العام لموقعك - وهو نفس المجلد الذي يخدم index.html. بالنسبة لمشاريع Vite وCreate React App، هذا هو المجلد /public. بالنسبة لمشاريع Next.js App Router، ضع favicon.ico داخل /app وملفات PNG في /public. بالنسبة للمواقع الثابتة، قم بإسقاط كل شيء بجانب ملفات HTML.
تخبر علامات الارتباط HTML المتصفحات بالملف الذي يجب استخدامه لكل سياق. الحد الأدنى هو سطر واحد: `<link rel='icon' href='/favicon.ico'>`. تضيف المجموعة الكاملة الموصى بها ثلاثة أسطر أخرى: واحد لمتغير SVG، وواحد لـ apple-touch-icon، وواحد لبيان الويب. الصق المقتطف الذي تم إنشاؤه داخل العنصر `<head>`. لا يهم ترتيب العلامات طالما أنها تسبق `</head>`.
يعد التخزين المؤقت للمتصفح هو السبب الرئيسي للارتباك عندما لا يبدو أن الرمز المفضل يتم تحديثه. تقوم المتصفحات بتخزين ذاكرة التخزين المؤقت /favicon.ico لكل أصل وقد لا تحترم رؤوس التحكم في ذاكرة التخزين المؤقت القياسية كما تفعل مع الأصول الأخرى. إذا استمر الرمز القديم، فافتح نافذة تصفح متخفي جديدة، أو ألحق سلسلة استعلام لإخفاء ذاكرة التخزين المؤقت مثل `?v=2` إلى href في علامة الارتباط الخاصة بك لإجبار المتصفحات على جلب الملف المحدث.
تتضمن الأخطاء الشائعة تحميل صورة غير مربعة (تنتج أيقونات ممتدة)، واستخدام مصدر أقل من 256 × 256 بكسل (تمويه بأحجام عرض أكبر)، وحذف apple-touch-icon (تعرض عمليات التثبيت على الشاشة الرئيسية iOS لقطة شاشة للصفحة بدلاً من ذلك). يتم حل هذه المشكلات الثلاثة عن طريق البدء من مصدر مربع 512×512 PNG أو SVG والسماح للمولد بالتعامل مع كل حجم الإخراج.
يستحق دعم الوضع المظلم البناء عليه منذ البداية. تعرض العديد من المتصفحات شريط علامات التبويب باللون الكرومي الداكن عندما يكون نظام المستخدم في الوضع الداكن. إذا كان الرمز الخاص بك عبارة عن علامة داكنة على خلفية شفافة، فمن الممكن أن يختفي في علامة تبويب داكنة. قم بشحن أيقونة SVG المفضلة مع قالب نمط `@media (prefers-color-scheme: dark)` المضمن الذي يقوم بتبديل لون التعبئة - لا يلزم وجود علامات HTML إضافية، فقط ملف SVG محدث.
تحقق من الرمز المفضل لديك باستخدام live favicon tester بعد النشر. يحاكي جهاز الاختبار علامة تبويب المتصفح والإشارة المرجعية وسياقات مطالبة التثبيت ويعرض كيفية عرض الرمز الخاص بك عند 16 و32 و48 و128 و512 بكسل جنبًا إلى جنب. تحقق أيضًا يدويًا من علامة التبويب المثبتة في Chrome وSafari، واستخدم "إضافة إلى الشاشة الرئيسية" في iOS لتأكيد apple-touch-icon.
للاطلاع على الإرشادات التفصيلية الخاصة بالمنصة، راجع favicon for WordPress وfavicon for Shopify وfavicon for React وfavicon for Next.js. مجموعة الملفات التي تم إنشاؤها متطابقة عبر جميع الأنظمة الأساسية - ما يختلف هو مكان تحميل الملفات وكيفية قيام النظام الأساسي بإدراج علامات الارتباط HTML أو تجاوزها.
قم بإعادة زيارة الرمز المفضل لديك كلما قمت بتغيير علامتك التجارية. تظل الرموز المفضلة المخزنة مؤقتًا في الإشارات المرجعية وشاشات الهاتف المحمول الرئيسية لفترة طويلة بعد بدء إعادة تصميم الموقع. يؤدي تحديث سلسلة الإصدار في علامة الارتباط href إلى إجبار المتصفحات على جلب الملف الجديد في الزيارة التالية، واستبدال الرمز القديم تدريجيًا عبر جميع المواقع المخزنة مؤقتًا. راجع دليل best favicon format للحصول على تفصيل لكل تنسيق لحجم الملف ومقايضات التوافق.
كيف يعمل
- 1
إعداد صورة مصدر مربع
قم بتصدير الشعار أو الرمز الخاص بك بتنسيق 512×512 PNG بخلفية شفافة، أو بتنسيق SVG بمربع viewBox (على سبيل المثال، `viewBox='0 0 512 512''). قم بتبسيط التفاصيل الدقيقة التي ستكون غير مرئية عند 16×16.
- 2
قم بإنشاء حزمة الأيقونة المفضلة لديك
قم بتحميل المصدر إلى [favicon generator](tool:favicon-generator). تنتج الأداة favicon.ico (متعدد الأحجام 16/32/48/64)، وfavicon.svg، وapple-touch-icon.png (180×180)، وandroid-chrome-192x192.png، وandroid-chrome-512x512.png، وsite.webmanifest - كل ذلك في مسار واحد.
- 3
انسخ جميع الملفات إلى جذر موقعك
ضع كل ملف من ملف التنزيل المضغوط في الجذر العام لمشروعك - الدليل الذي يخدم index.html. بالنسبة إلى Next.js App Router، يتم إدخال favicon.ico في /app؛ يتم إدخال PNGs في /public.
- 4
الصق علامات الارتباط HTML في <head>
انسخ مقتطف HTML الذي تم إنشاؤه وأضفه داخل عنصر `<head>`. تغطي المجموعة الكاملة النسخة الاحتياطية .ico، ومتغير SVG، وapple-touch-icon، ورابط البيان - إجمالي ستة أسطر.
- 5
التحقق عبر المتصفحات والأجهزة
افتح موقعك باللغات Chrome وSafari وFirefox وEdge. افحص علامة التبويب وشريط الإشارات المرجعية وشريط العناوين. في iOS، انقر فوق ورقة المشاركة و"إضافة إلى الشاشة الرئيسية" لاختبار apple-touch-icon. استخدم [favicon tester](utility:favicon-tester) لمحاكاة سريعة.
- 6
تعطل ذاكرة التخزين المؤقت عند تحديث أيقونة مفضلة موجودة
في حالة استبدال رمز مفضل مباشر، قم بزيادة سلسلة الإصدار في علامة الارتباط href (`?v=2`، `?v=3`، وما إلى ذلك). وهذا يفرض على كافة المتصفحات جلب الملف المحدث عند تحميل الصفحة التالية بدلاً من عرض النسخة المخزنة مؤقتًا.
جربه الآن
قم بإنشاء أيقونة المفضلة الخاصة بك الآن
مولد Faviconالأسئلة الشائعة
ما هي أسهل طريقة لإنشاء أيقونة مفضلة؟+
قم بتحميل 512×512 مربع PNG أو SVG إلى المولد FetchFavicon. وينتج جميع الملفات المطلوبة - .ico، SVG، apple-touch-icon، البيان PNGs - بالإضافة إلى HTML الجاهز لللصق في أقل من ثانية، بدون اشتراك ولا تحميل على الخادم.
ما الحجم الذي يجب أن تكون عليه الصورة المصدر؟+
512 × 512 بكسل على الأقل، ويفضل أن تكون SVG. يؤدي الانتقال إلى حجم أصغر إلى مخاطر حدوث ضبابية مرئية عند الحجم 256 × 256 الذي يستخدمه Windows وحجم 512 × 512 المطلوب لمطالبات التثبيت PWA. يؤدي رفع مستوى الصورة الصغيرة إلى تفاقم فقدان الجودة في كل خطوة لتغيير الحجم.
هل أحتاج إلى apple-touch-icon؟+
نعم، إذا كان أي زائر يستخدم جهاز iPhone أو iPad. وبدون ذلك، تعرض عمليات التثبيت على الشاشة الرئيسية iOS صورة مصغرة للقطة شاشة منخفضة الجودة لصفحتك بدلاً من علامة علامتك التجارية. كل ما تحتاجه هو 180×180 PNG مرتبط بـ `<link rel='apple-touch-icon' size='180x180' href='/apple-touch-icon.png'>`.
لماذا لا يظهر الرمز المفضل لدي في علامة تبويب المتصفح؟+
في أغلب الأحيان تكون مشكلة التخزين المؤقت. افتح نافذة خاصة/متخفية وانتقل إلى موقعك. إذا استمر عدم ظهوره، فتأكد من تقديم favicon.ico في جذر النطاق الخاص بك وأن مسار href لعلامة الارتباط يتم حله بشكل صحيح - تحقق من وجود أخطاء إملائية وشرطات مائلة بادئة مفقودة.
هل أحتاج إلى كل من .ico و SVG؟+
نعم للتغطية الكاملة. يتعامل .ico مع المتصفحات القديمة واختصارات Windows وأدوات الطرف الثالث التي تجلب /favicon.ico مباشرة. يتعامل SVG مع العرض الواضح على Chrome وFirefox وEdge وSafari 15+ ويدعم تبديل الألوان في الوضع الداكن. عادةً ما يكون حجم الملف المدمج أقل من 30 كيلو بايت.
ما المدة التي يستغرقها نشر تغيير الرمز المفضل؟+
في أي مكان من ثوانٍ إلى عدة أيام، اعتمادًا على مدى قوة المتصفح في تخزين النسخة الأصلية مؤقتًا. أسرع حل هو إلحاق سلسلة استعلام جديدة (`?v=2`) بالرمز المفضل لديك. وهذا يجعل المتصفحات تتعامل معه كعنوان URL جديد وتجلب نسخة جديدة على الفور.
هل يمكنني استخدام ملف JPEG كمصدر الأيقونة المفضلة لدي؟+
يمكنك تحميل ملف JPEG إلى المولد، لكن ملفات JPEG لا تدعم الشفافية. إذا كان الرمز الخاص بك يحتاج إلى خلفية شفافة - والتي تبدو أفضل في علامات تبويب المتصفح - فابدأ من PNG-32 أو SVG بدلاً من ذلك. سيقوم المولد بتحويل إما إلى .ico و PNG بشكل صحيح.