Favicon هو أيقونة صغيرة تمثل موقع الويب الخاص بك في علامات تبويب المتصفح. لتطبيقات الويب التقدمية (PWA)، تحتاج أيضاً إلى بيان ويب وأيقونات أكبر للشاشات الرئيسية للجوال.
تثبيت ملفات أيقونة الموقع وPWA
يتضمن 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 إلى المجلد العام للموقع وانشرها في جذر النطاق، أو عدّل المسارات للمجلد الذي اخترته.
- عدّل name وshort_name في site.webmanifest. يتحدد start_url وscope نسبةً إلى موقع البيان؛ تبدأ مسارات الأيقونات المصدّرة بـ /. غيّرها إذا كانت الصور في مجلد فرعي.
- أضف روابط البيان وأيقونة الموقع و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">هذه الأيقونات ليست مجهزة كصور maskable. لا يضيف ZIP عامل service worker أو دعمًا دون اتصال؛ الأيقونات وحدها لا تضمن التثبيت. اختبر المتصفح والجهاز المستهدفين.
قراءة دليل تكامل الويب وPWA وChrome