Fruga
English

الأيقونة المفضّلة وأيقونات التطبيقات

رسمة واحدة بكل مقاس يطلبه المتصفح أو الهاتف، بما فيها أيقونة iOS المعتمة وأيقونة Android القابلة للقص، وهما الأيقونتان اللتان تُنشران معطوبتين عادةً. يُرسم الشعار في هذا التبويب ولا يُرفع أبداً.

  • الملفات8 أيقونات + manifest
  • المدخلاتPNG أو JPG أو WebP أو SVG
  • شعاركلا يغادر التبويب

شعارك

الرسمة المربّعة هي الأفضل، وSVG يعطي أوضح نتيجة.

الشعار الذي اخترته

placeholder.svg · أفلت ملفاً في المربّع، أو استخدم الزر في الأعلى.

ما ستحصل عليه

المعاينات مصغّرة لتتّسع، وكل ملف يُولَّد بمقاسه المذكور. انقر أي أيقونة لتنزيلها وحدها.

  • favicon.ico

    48×48

    16 و32 و48 في ملف واحد، للمتصفحات القديمة والإشارات المرجعية

  • favicon-16x16.png

    16×16

    التبويب، بأصغر مقاس

  • favicon-32x32.png

    32×32

    التبويب على شاشة عالية الكثافة

  • favicon-48x48.png

    48×48

    شريط مهام Windows والاختصارات

  • apple-touch-icon.png

    180×180

    الشاشة الرئيسية في iOS، الشفافية تظهر سوداء فهذه الأيقونة مملوءة

  • icon-192.png

    192×192

    الشاشة الرئيسية في Android

  • icon-512.png

    512×512

    شاشة البدء وقوائم التطبيقات

  • icon-maskable-512.png

    512×512

    أيقونة Android التكيّفية، الرسمة داخل الدائرة الآمنة

الصق هذا في <head> صفحتك

المقتطف وملف manifest موجودان في ملف ‎.zip أيضاً.

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0ea5e9">

site.webmanifest

{
  "name": "My site",
  "short_name": "Site",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "/icon-maskable-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "theme_color": "#0ea5e9",
  "background_color": "#ffffff",
  "display": "standalone",
  "start_url": "/"
}

لماذا أيقونة iOS مملوءة

يضع Safari أيقونة الشاشة الرئيسية الشفافة فوق خلفية سوداء، فيختفي الشعار المرسوم بلون داكن. لذلك تحصل apple-touch-icon.png هنا على خلفية دائماً، أياً كان ما تستخدمه الأيقونات الأخرى.

ما معنى «قابلة للقص»

يقصّ Android الأيقونة التكيّفية إلى الشكل الذي تستخدمه واجهة التشغيل، دائرة أو مربّع مستدير أو غيرهما، وقد يقتطع عشرين بالمئة من كل حافة. لذلك يُبقي الملف القابل للقص الرسمةَ داخل تلك المنطقة الآمنة بهامش مريح.

عن favicon.ico

ملف ‎.ico هنا يضمّ صوراً بمقاس 16 و32 و48 بكسل بصيغة PNG داخل الحاوية، وهو ما يقرؤه كل متصفح منذ Vista. ولا يزال نشره مفيداً: الإشارات المرجعية والمتصفحات القديمة وبعض قارئات الخلاصات تطلب /favicon.ico بالاسم وتتجاهل وسوم link.

الأسئلة الشائعة

ما مقاسات الأيقونة المفضّلة التي أحتاجها فعلاً؟
ملف favicon.ico يحمل صور 16 و32 و48 بكسل، وأيقونات PNG للتبويب، وأيقونة 180 بكسل لنظام iOS، وأيقونات أندرويد مع نسخة قابلة للقصّ. تنتج هذه الصفحة كل ذلك من رسم واحد، مع ملف البيان ووسوم الربط الجاهزة للّصق.
لماذا تُعطى أيقونة iOS خلفية؟
لأن Safari يركّب الأيقونة الشفافة فوق خلفية سوداء، فيختفي الشعار المرسوم بحبر داكن. لذا يُولَّد ملف apple-touch-icon.png بخلفية دائماً هنا، مهما كانت بقية المقاسات.
ما معنى الأيقونة القابلة للقصّ في أندرويد؟
يقصّ أندرويد الأيقونة التكيّفية إلى شكل المشغّل — دائرة أو مربّع دائري أو مربّع بحواف — وقد يقتطع نحو عشرين بالمئة من كل حافة. والملف القابل للقصّ يبقي الرسم داخل المنطقة الآمنة فينجو مع أي مشغّل.
هل ما زلت أحتاج ملف favicon.ico؟
نعم، ما زال يستحق الشحن. الإشارات المرجعية والمتصفحات الأقدم وبعض قارئات الخلاصات تطلب ‎/favicon.ico‎ بالاسم وتتجاهل وسوم الربط. والملف المنتَج هنا يحمل صور 16 و32 و48 بكسل بصيغة PNG داخل الحاوية، وهو ما يقرأه كل متصفح منذ Vista.