مجاني

صانع أيقونة الموقع والتطبيق

الأيقونة الصغيرة هي الصورة التي تظهر في تبويب المتصفح، وتُستعمل نفسها عندما يضيف أحدهم موقعك إلى شاشة جواله.

كل شيء يحدث داخل متصفحك، ولا يُرسل شيء مما تكتبه إلى أي مكان.

حرف أو أحرف أو إيموجيمن حرف إلى ثلاثة أحرف، أو إيموجي واحد.

لون الخلفية

لون الحرف

الشكل

اسم موقعك أو تطبيقك

أيقونتك

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

ملفات منفردة

favicon-16x16.png (صورة PNG 16 × 16)
favicon-32x32.png (صورة PNG 32 × 32)
favicon-48x48.png (صورة PNG 48 × 48)
apple-touch-icon.png (صورة PNG 180 × 180)
android-chrome-192x192.png (صورة PNG 192 × 192)
android-chrome-512x512.png (صورة PNG 512 × 512)
favicon.ico (مقاسات 16 و32 و48 معاً)

الكود لموقعك

<link rel="icon" href="/favicon.ico" sizes="48x48">
<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="#b4521c">

الصقه داخل وسم head في كل صفحة. وارفع الملفات الموجودة في ملف zip إلى المجلد الرئيسي لموقعك.

ملف manifest (site.webmanifest)

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

ما العمل بعد ذلك

اقرأ الدليل: اجعل موقعك قابلاً للتثبيت كتطبيق أدوات مجانية

لماذا مجانية؟ هذه الأدوات تساعدك على إكمال موقعك، ويسعدنا أن تعود إلينا حين تحتاج الباقي. تعمل داخل متصفحك ولا يُرسل إلينا شيء مما تكتبه.