2026-06-28

الصورة إلى المفضلة: إنشاء أيقونات موقع الويب من أي صورة

قم بتحويل أي صورة إلى أيقونة مفضلة لموقعك على الويب: أحجام أيقونات ICO وPNG وSVG وApple Touch. خطوات حقيقية، والأحجام التي تتوقعها كل منصة، والبقاء واضحًا عند 16 بكسل.

الصورة إلى المفضلة: إنشاء أيقونات موقع الويب من أي صورة

آخر تحديث: 28 يونيو 2026. تطور دعم الأيقونة المفضلة للمتصفح؛ تغطي الأحجام والتنسيقات الأساسية هنا المشهد الحالي.

الرمز المفضل هو رمز صغير يظهر في علامة تبويب المتصفح، وقائمة الإشارات المرجعية، والشاشة الرئيسية للهاتف عندما يقوم شخص ما بحفظ موقعك. يعني تحويل صورة إلى أيقونة مفضلة إنشاء أنواع الملفات المناسبة بالأحجام المناسبة بحيث تبدو الأيقونة واضحة في كل مكان تظهر فيه - بدءًا من علامة تبويب المتصفح بحجم 16 بكسل إلى أيقونة Apple Touch بحجم 180 بكسل. يغطي هذا الدليل الأحجام التي تتوقعها كل منصة، وتنسيقات الملفات التي سيتم إنشاؤها، وكيفية الحفاظ على إمكانية التعرف على الأيقونة بأحجام صغيرة.

إجابة سريعة: كيف يمكنك إنشاء رمز مفضل من صورة؟

ابدأ بصورة مربعة المصدر (أو قم بقصها إلى مربع باستخدام أداة اقتصاص الصورة) وتغيير حجمها وصولاً إلى أحجام الأيقونة المفضلة القياسية (16px و32px و180px و512px) وتصديرها بتنسيق PNG بالإضافة إلى ملف ICO للمتصفحات القديمة. قم بالإشارة إليها في ملف HTML<head>باستخدام علامات الارتباط المناسبة. اختبر الإصدار 16 بكسل في علامة تبويب المتصفح، لأنه إذا لم يكن من الممكن التعرف على الأيقونة بهذا الحجم، فلن تتمكن أي إصدارات أكبر من إصلاحها. احتفظ بإصدار SVG أيضًا إذا كان الشعار متجهًا، للحصول على عرض واضح على الشاشات ذات DPI العالية.

ما هي الأحجام التي تحتاجها الأيقونة المفضلة؟

تعرض السياقات المختلفة الأيقونة المفضلة بأحجام مختلفة، كما أن توفير الأحجام المناسبة يبقيها واضحة في كل مكان.

مقاس ملف تستخدم ل
16x16 إيكو / بابوا نيو غينيا علامة تبويب المتصفح (القديمة)
32x32 إيكو / بابوا نيو غينيا علامة تبويب المتصفح (شبكية العين)
180x180 PNG أيقونة أبل تاتش
192x192 PNG شاشة أندرويد الرئيسية
512x512 PNG PWA / دفقة
أي SVG المتصفحات الحديثة ذات DPI العالي
  • الإصدار 16 بكسل هو الأكثر أهمية، فهو ما يراه معظم الأشخاص في علامة التبويب.
  • تحتاج أيقونة Apple Touch إلى دقة 180 بكسل لعرض الشاشة الرئيسية بوضوح على نظام iOS.
  • يخدم SVG المتصفحات الحديثة بأي دقة وبدون ملفات متعددة.
  • يمكن لـ ICO واحد تجميع أحجام متعددة للدعم القديم.

كيف تصمم أيقونة مفضلة بحجم 16 بكسل؟

التحدي الذي يواجه الأيقونة المفضلة هو أنه يجب التعرف عليها بدقة 16 بكسل، وهي صغيرة جدًا. التفاصيل التي تبدو جيدة عند 512 بكسل تختفي عند 16 بكسل، لذلك يجب أن يكون التصميم بسيطًا.

لقطة مقربة لصفحة ويب توضح مكان ظهور الرموز المفضلة

  • استخدم شكلاً واحدًا عريضًا — حرفًا أو علامة شعار أو رمزًا بسيطًا.
  • تجنب الخطوط الرفيعة والنصوص الصغيرة - فهي تختفي عند 16 بكسل.
  • استخدم التباين العالي حتى يقرأ الشكل على خلفية علامة التبويب.
  • اختبر الإصدار 16 بكسل بالحجم الفعلي قبل الشحن.

من الأخطاء الشائعة استخدام الشعار الكامل مع النص. عند 16 بكسل، يكون النص غير مقروء، لذا تبدو الأيقونة المفضلة وكأنها لطخة ضبابية. الحل هو استخراج العنصر الوحيد الأكثر شهرة - الرمز أو الحرف الأول - واستخدامه باعتباره الرمز المفضل. يغطي دليل SVG إلى PNG تصدير العلامات المتجهة بالأحجام التي تحتاجها.

ما هي تنسيقات الملفات التي يجب عليك إنشاؤها؟

تمتد الرموز المفضلة إلى عدة تنسيقات لأن دعم المتصفح تطور مع مرور الوقت، وتغطيتها جميعًا تضمن عمل الرمز في كل مكان.

كمبيوتر محمول يعرض صفحة ويب تحتوي على أيقونات مفضلة في علامات التبويب

  • ICO — التنسيق القديم، يحتوي على أحجام متعددة، ويدعمه جميع المتصفحات.
  • PNG — المعيار الحديث، ملف واحد لكل حجم.
  • SVG — متجه، يمكن تغيير حجمه إلى أي حجم، تدعمه المتصفحات الحديثة.
  • Apple Touch PNG — تحديدًا بحجم 180×180، لأيقونات الشاشة الرئيسية لنظام iOS.
شكل متى تستخدم
عرض أولي للعملة دعم المتصفحات القديمة وأحجام الحزم
PNG المتصفحات الحديثة، الملفات حسب الحجم
SVG المتصفحات الحديثة، ملف واحد قابل للتطوير
أبل تاتش PNG شاشة iOS الرئيسية

قم بإنشاء ICO للتوافق القديم، وملفات PNG بكل حجم للحصول على دعم واسع النطاق، وSVG إذا كان المصدر متجهًا. يتولى محول الصور إنشاء التنسيق، ويحصل مقص الصور على مربع المصدر أولاً.

كيف يمكنك الرجوع إلى الرموز المفضلة في HTML؟

يجب الإشارة إلى الملفات التي تم إنشاؤها في الصفحة<head>حتى تتمكن المتصفحات من العثور عليها. تخبر علامات الارتباط المتصفح بالملف الذي سيتم استخدامه وفي أي سياق.

سيدة أعمال تعمل على جهاز كمبيوتر محمول، سياق التطوير لإضافة الرموز المفضلة

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
  • يغطي ICO المتصفحات القديمة ذات الأحجام المجمعة.
  • يخدم SVG المتصفحات الحديثة بأي دقة.
  • يغطي رمز Apple Touch عمليات الحفظ على شاشة iOS الرئيسية.
  • ضع الملفات في جذر الموقع لتحقيق أقصى قدر من التوافق.

يوثق دليل Mozilla favicon علامات الارتباط وسلوك المتصفح، ويغطي دليل رموز تطبيقات Web.dev معيار الأيقونة القابلة للإخفاء لنظام Android. اختبر النتيجة في علامة تبويب متصفح حقيقية وعلى الشاشة الرئيسية للهاتف بعد النشر، لأن ميزات العرض الغريبة تظهر فقط في السياقات الفعلية.

تصميم أيقونات مفضلة للوضع الفاتح والداكن

تقوم المتصفحات وأنظمة التشغيل الحديثة بالتبديل بين الوضع الفاتح والداكن، ويمكن أن تختفي الأيقونة المفضلة التي تبدو رائعة في علامة تبويب فاتحة في علامة تبويب داكنة. تتعامل PNG ذات الخلفية الشفافة أو SVG ذات الألوان المتكيفة مع كلا السياقين، لأن الأيقونة تتكيف مع الكروم المحيط بدلاً من أن تحمل خلفيتها الخاصة.

تحدي الوضع حل
يختفي الرمز الداكن في علامة التبويب المظلمة أضف مخططًا تفصيليًا دقيقًا أو استخدم الشفافية
يختفي رمز الضوء في علامة التبويب الخفيفة نفسه - مخطط تفصيلي أو لون متكيف
إمكانية القراءة الصعبة عند 16 بكسل تبسيط الشكل وزيادة التباين

بالنسبة لأيقونات SVG المفضلة، يمكنك استخدام استعلام الوسائطprefers-color-schemeداخل SVG لتقديم ألوان مختلفة للسياقات الفاتحة والداكنة، وهو الحل الأنظف. بالنسبة إلى PNG، تعمل الخلفية الشفافة ذات الشكل الذي يحتوي على ما يكفي من التباين الداخلي بشكل مقبول على كليهما. الهدف هو أن تتم قراءة الرمز المفضل في علامة تبويب بغض النظر عما إذا كان المستخدم يشغل الوضع الفاتح أو المظلم، والذي أصبح بشكل متزايد هو الوضع الافتراضي وليس الاستثناء.

الأخطاء الشائعة في الأيقونات المفضلة

  • الكثير من التفاصيل — لا يمكن التعرف على الرمز عند 16 بكسل. بسّط.
  • مصدر غير مربع — قم بالاقتصاص إلى المربع أولاً أو يتم تشويه الرمز.
  • رمز Apple Touch مفقود - تعرض عمليات حفظ iOS لقطة شاشة عامة بدلاً من ذلك.
  • لا توجد ملفات SVG — تعرض الشاشات ذات DPI العالية صورة PNG ضبابية بدلاً من أن تكون متجهة واضحة.
  • نسيان إجراء الاختبار عند 16 بكسل — الحجم الذي يراه معظم الأشخاص هو الحجم الذي يتم إهماله في أغلب الأحيان.

الرمز المفضل صغير ولكنه يظهر في كل مكان يتم فيه تمثيل موقعك - ​​علامات التبويب والإشارات المرجعية والشاشات الرئيسية ونتائج البحث. تعمل الأيقونة الواضحة التي يمكن التعرف عليها بكل حجم على تعزيز العلامة التجارية في لمحة، في حين تشير الأيقونة المفضلة غير الواضحة أو المفقودة إلى نقص الصقل. اقضِ بعض الوقت للحصول على الإصدار الصحيح بحجم 16 بكسل، وإنشاء الحجم الكامل ومجموعة التنسيق، وسيمثل الرمز الموقع بشكل واضح أينما ظهر. الاستثمار صغير - بعد ظهر يوم واحد من أعمال التصميم والتصدير - ولكنه يؤتي ثماره في كل مرة يرى المستخدم موقعك في علامة تبويب، أو إشارة مرجعية، أو شاشة رئيسية، وهو ما يحدث في كثير من الأحيان أكثر مما تدركه معظم الفرق.

الأسئلة المتداولة

ما هي الأحجام التي تحتاجها الأيقونة المفضلة؟

مجموعة حديثة: 16×16، 32×32، 48×48 (كلاسيكي)، بالإضافة إلى 180×180 (أيقونة Apple touch) و192×192 / 512×512 (Android). صورة رئيسية واحدة تولد المجموعة بأكملها. يختار المتصفح الحجم المناسب لكل سياق.

كيف يمكنني تصميم أيقونة مفضلة بحجم 16 بكسل؟

اجعل الأمر بسيطًا - شكل واحد غامق، وتباين عالٍ، بدون تفاصيل أو نص دقيق. عند 16 بكسل، يصبح أي شيء معقد لطخة. اختبر التصميم بحجم 16 بكسل قبل الالتزام به؛ إذا لم يقرأ هناك، فهو معقد للغاية.

ما هي تنسيقات الملفات التي يجب أن تستخدمها الأيقونة المفضلة؟

ICO للتوافق القديم، وPNG للمتصفحات الحديثة وأيقونات Apple/Android، وSVG للإصدار المستقل عن الدقة عندما يكون مدعومًا. توليد المجموعة الكاملة؛ تنسيق واحد لا يغطي كل الأجهزة.

كيف يمكنني الإشارة إلى الرموز المفضلة في HTML؟

مع علامات<link rel="icon">التي تشير إلى كل حجم وتنسيق، بالإضافة إلى<link rel="apple-touch-icon">لنظام iOS. المتصفح يختار أفضل تطابق. مجموعة كاملة من علامات الارتباط تغطي كل منصة.

هل يمكنني استخدام صورة واحدة لكل حجم من أحجام الأيقونة المفضلة؟

نعم - يُنشئ مربع رئيسي واحد (512×512 أو أكبر) المجموعة بأكملها، من 16×16 إلى 512×512. صمم النص الرئيسي ليقرأ بحجم 16 بكسل (شكل غامق واحد) بحيث يظل الحجم الأصغر مناسبًا. سيد واحد، العديد من الأحجام.

كيف يمكنني اختبار أيقونة مفضلة؟

افتح الموقع في علامة تبويب المتصفح وتحقق من الأيقونة بحجم 16 بكسل (حجم علامة التبويب)، و32 بكسل (الإشارات المرجعية)، و180 بكسل (Apple touch). إذا لم تتم قراءة الإصدار 16 بكسل، فهذا يعني أن التصميم معقد جدًا - قم بتبسيطه إلى شكل واحد غامق. إن الرموز المفضلة صغيرة ولكنها تظهر في كل مكان، لذا فإن الأيقونة الواضحة التي يمكن التعرف عليها بكل حجم تعزز العلامة التجارية في لمحة.

ما هو ملف ICO؟

تنسيق حاوية قديم يحتوي على صورة نقطية واحدة أو أكثر بأحجام مختلفة، يُستخدم للأيقونات المفضلة في المتصفحات القديمة (خاصة Internet Explorer القديم). تستخدم المتصفحات الحديثة PNG وSVG، لذا فإن ICO هو في الأساس طبقة متوافقة مع الإصدارات السابقة. قم بإنشاء ICO جنبًا إلى جنب مع مجموعة PNG/SVG الخاصة بك بحيث يحصل كل متصفح، مهما كان قديمًا، على أيقونة.

استخدم الأدوات المجانية أثناء متابعة الدليل.

ضغط صورةإزالة خلفية

تابع القراءة

صورة غلاف كيفية إضافة علامة مائية للصور (حماية حقوق النشر)

Tue Mar 24 2026 20:00:00 GMT-0400 (北美东部夏令时间)

كيفية إضافة علامة مائية للصور (حماية حقوق النشر)

أضف علامة مائية للصور لحماية حقوق النشر: مقارنة بين وضع العلامة في الزاوية مقابل التوزيع الشبكي أو الوسط الخافت، وكيفية تطبيقها على دفعات (batch-watermark)، والموازنة بين مستوى الحماية وجودة الصورة.