Favicon وApple Touch Icon
إضافة الأيقونات التي تظهر في علامات تبويب المتصفح وعلى الشاشات الرئيسية
Favicon وApple Touch Icon درس مجاني في HTML Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML Academy 4 دروس في المجموع.
ما هو Favicon؟
favicon هو الرمز الصغير الذي يظهر في:
- علامات تبويب المتصفح
- قوائم الإشارات المرجعية
- سجل المتصفح
- نتائج البحث (أحيانًا)
وهو يساعد المستخدمين على التعرف على موقعك بسرعة بين علامات التبويب المفتوحة المتعددة.
رابط Favicon الأساسي
أضف favicon باستخدام عنصر link داخل head:
<head>
<!-- SVG favicon (modern, scales at any size) -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<!-- PNG fallback -->
<link rel="icon" type="image/png" href="/favicon.png">
<!-- Legacy ICO for Internet Explorer -->
<link rel="shortcut icon" href="/favicon.ico">
</head>تنسيقات Favicon
استراتيجية تنسيق favicon الموصى بها:
- SVG — متجهي، قابل للتحجيم بدقة، وحجمه صغير (استخدمه أولًا)
- PNG 32x32 — بديل للمتصفحات التي لا تدعم SVG
- ICO — تنسيق قديم يحتوي على حجمي 16x16 و32x32
موضع ملف ICO
يُجلب الملف favicon.ico الموجود في جذر النطاق تلقائيًا:
<!-- Browsers request /favicon.ico automatically -->
<!-- Placing it at the domain root means no link tag is needed:
/favicon.ico -- served without any HTML link tag
-->
<!-- But: specifying it explicitly is better: -->
<link rel="icon" href="/favicon.ico" sizes="32x32">السمة sizes
تحدد السمة sizes أبعاد الرمز:
<link rel="icon" href="/icon-16.png" sizes="16x16">
<link rel="icon" href="/icon-32.png" sizes="32x32">
<link rel="icon" href="/icon-64.png" sizes="64x64">رمز Apple Touch
يظهر Apple Touch Icon عندما يضيف المستخدمون موقعك إلى الشاشة الرئيسية في iOS:
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- Recommended size: 180x180 px -->
<!-- Used by: iOS Safari, some Android browsers -->
<!-- Apple applies rounded corners and gloss effect automatically -->
<!-- Pre-composited icon (no transparency) looks best -->الرموز maskable لنظام Android
تستخدم تطبيقات PWA على Android رموزًا maskable تملأ شكل الرمز:
<link rel="manifest" href="/manifest.json">
<!-- In manifest.json: -->
<!--
{
"icons": [
{
"src": "/icon-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any maskable"
}
]
}
-->Favicon للوضع الداكن
وفّر favicon بتنسيق SVG يدعم الوضع الداكن:
<!-- SVG favicon with dark mode support: -->
<!-- In /favicon.svg: -->
<!--
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
@media (prefers-color-scheme: dark) {
.icon-bg { fill: white; }
.icon-mark { fill: black; }
}
.icon-bg { fill: #0070f3; }
.icon-mark { fill: white; }
</style>
<circle class="icon-bg" cx="16" cy="16" r="16"/>
<text class="icon-mark" x="50%" y="60%">C</text>
</svg>
-->Web App Manifest لرموز PWA
إعداد كامل للرموز في تطبيقات الويب التقدمية:
<link rel="manifest" href="/manifest.json">
<!-- manifest.json icons array: -->
<!--
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
-->إعداد Favicon الكامل
إعداد حديث وكامل لـ favicon:
<head>
<!-- SVG: scales to any size, supports dark mode -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<!-- PNG fallback -->
<link rel="icon" type="image/png" href="/favicon-32.png" sizes="32x32">
<!-- Apple home screen -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- PWA manifest (for Android home screen) -->
<link rel="manifest" href="/manifest.json">
</head>اختبار Favicons
كيفية التحقق من إعداد favicon:
- أعد التحميل بقوة (Ctrl+Shift+R / Cmd+Shift+R) لمسح favicon المخزّن مؤقتًا
- استخدم أداة Favicon Checker (realfavicongenerator.net)
- اختبر على جهاز iOS فعلي للتحقق من Apple Touch Icon
- تحقق من بيان PWA باستخدام Lighthouse ← تدقيق PWA
تحقق سريع
ما الحجم الموصى به لصور Apple Touch Icon؟
مراجعة: Favicons
أساسيات Favicon:
- favicon بتنسيق SVG — حديث، وقابل للتحجيم، ويدعم الوضع الداكن
- PNG 32x32 — بديل للمتصفحات التي لا تدعم SVG
- ICO في الجذر — بديل قديم لـ IE
apple-touch-icon180×180 — للشاشة الرئيسية في iOS- بيان تطبيق الويب — رموز PWA في Android (192px و512px)
تعلم HTML مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 40
- الدروس
- 159
الأسئلة الشائعة
هل درس «Favicon وApple Touch Icon» مجاني؟
نعم — نص درس «Favicon وApple Touch Icon» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML Academy، انتقل إلى CoddyKit PRO. تتضمن دورة HTML Academy 4 دروس في المجموع.
ماذا ستتعلم في «Favicon وApple Touch Icon»؟
إضافة الأيقونات التي تظهر في علامات تبويب المتصفح وعلى الشاشات الرئيسية تتمرن على HTML Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ HTML Academy؟
لا تُشترط خبرة سابقة. HTML Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «Favicon وApple Touch Icon»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس HTML Academy هذا؟
نعم. كل درس في HTML Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- العنصر title ودوره في SEO
- meta charset وviewport وauthor وdescription
- عناوين URL الأساسية وmeta robots
- Favicon وApple Touch Icon