أيقونات الويب وPWA وChrome

يتضمن ZIP للويب favicon.ico وصور PNG بحجم 16/32 بكسل وأيقونة Apple touch بحجم 180 بكسل وأيقونات PWA بحجم 192/512 بكسل وsite.webmanifest وog.png بحجم 1200x630.

محتويات ZIP للويب

صورتا PWA هما أيقونتان مربعتان عاديتان. تتطابق أسماؤهما ومقاساتهما مع مصفوفة icons في site.webmanifest؛ أما og.png فصورة منفصلة لمشاركة الروابط.

Web/
  favicon.ico
  favicon-16x16.png
  favicon-32x32.png
  apple-touch-icon.png
  android-chrome-192x192.png
  android-chrome-512x512.png
  site.webmanifest
  og.png
  README.txt

ربط الأيقونات بموقعك

1. انسخ ملفات Web إلى المجلد العام للموقع وانشرها في جذر النطاق، أو عدّل المسارات للمجلد الذي اخترته.
2. عدّل name وshort_name في site.webmanifest. يتحدد start_url وscope نسبةً إلى موقع البيان؛ تبدأ مسارات الأيقونات المصدّرة بـ /. غيّرها إذا كانت الصور في مجلد فرعي.
3. أضف روابط البيان وأيقونة الموقع وApple touch إلى head في HTML. استخدم HTTPS أو localhost. افحص البيان في أدوات المتصفح وتأكد أن كل رابط أيقونة يعيد صورة لا صفحة HTML بديلة.

<link rel="manifest" href="/site.webmanifest">
<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

{
  "name": "My App",
  "short_name": "App",
  "start_url": "./",
  "scope": "./",
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

هذه الأيقونات ليست مجهزة كصور maskable. لا يضيف ZIP عامل service worker أو دعمًا دون اتصال؛ الأيقونات وحدها لا تضمن التثبيت. اختبر المتصفح والجهاز المستهدفين.

منشئ أيقونات Favicon و PWA

تصدير أيقونات Chrome وصوره الترويجية

ارفع صورة واختر Chrome لتنزيل PNG وصور مستطيلة. تتوسط الصورة لوحة بيضاء؛ أكمل التصميم قبل إرساله للمتجر.

• أيقونات الإضافة: PNG بمقاسات 16 و32 و48 و128 بكسل، وملف أولي لـ Manifest V3.
• أيقونة المتجر (128x128): PNG منفصل لصفحة Chrome Web Store.
• الصورة الصغيرة (440x280): PNG معتم للمساحة الترويجية الصغيرة.
• Marquee (1400x560): صورة ترويجية كبيرة اختيارية، مختلفة عن لقطة الشاشة.
• لقطات الشاشة: التقط واجهة الإضافة الفعلية منفصلة بمقاس 1280x800 أو 640x400. لا تلتقط هذه الأداة الشاشة ولا تضيف إطارًا.

مولّد أيقونات وصور إضافات Chrome

المراجع الرسمية

• Web App Manifest
• Chrome Web Store