إنشاء وسوم HTML لأيقونة favicon وأيقونة Apple touch
يحوّل مولّد وسوم HTML لأيقونة favicon قائمة أحجام الأيقونات ومساراتها العامة إلى كتلة مرتبة من عناصر link توضع داخل head للموقع.
شغّل الأداة مجانًا
وينشئ مرجعًا لكل أيقونة متصفح مقدمة، ثم يضيف تلقائيًا مرجع Apple touch icon. النتيجة حتمية، وتُحمى فيها قيم السمات بطريقة آمنة، وتصبح جاهزة للإدراج في قالب أو موقع ثابت أو نظام إدارة محتوى أو تخطيط تطبيق من دون تكرار المسارات والأبعاد يدويًا.
أعدّ قائمة دقيقة بملفات الأيقونات
ابدأ بملفات الأيقونات التي ينشرها موقعك بالفعل. أضف صفًا لكل ملف، وأدخل أبعاده بالبكسل بصيغة العرضxالارتفاع، ثم حدّد مساره العام أو عنوان URL الخاص به. تتضمن المجموعات الشائعة للمتصفحات ملفات مربعة صغيرة لعلامات التبويب والإشارات المرجعية، بينما تفيد صورة مربعة أكبر عندما يحفظ الجهاز الموقع على الشاشة الرئيسية. يمكن أن يكون المسار نسبيًا إلى الموقع، مثل /assets/icons/favicon-32.png، أو عنوان URL مطلقًا يقدمه مضيف للملفات. يجب ألا يظهر الحجم نفسه إلا مرة واحدة، لأن إعلان ملفين متنافسين بالأبعاد ذاتها يجعل الاختيار ملتبسًا. يتحقق المولّد من كل صف قبل إنتاج الشيفرة، لذلك تتحول المسارات الفارغة والأبعاد غير الصحيحة والأحجام المكررة والقيم القصوى غير المدعومة إلى أخطاء إدخال واضحة بدلًا من وسوم معطلة. لا تفحص الأداة نظام الملفات ولا تنزّل الصور، ولذلك تعامل الأبعاد على أنها تصريح صريح منك. تحقّق من أن كل مسار سيكون متاحًا للعامة بعد النشر، وأن أبعاد الصورة الفعلية تطابق الحجم الذي أدخلته.
تعرّف إلى طريقة اختيار الوسوم وترتيبها
تتضمن النتيجة لكل أيقونة عنصر link تكون قيمة rel فيه icon، وقيمة sizes موحّدة بالأحرف الصغيرة، وقيمة href محمية. تُرتب وسوم المتصفح من أصغر مساحة بالبكسل إلى أكبرها، مع قواعد حتمية لحسم التعادل، ولذلك تنتج المجموعة المنطقية نفسها المخرجات ذاتها حتى إذا وصلت الصفوف بترتيب مختلف. يجري اختيار Apple touch icon بصورة مستقلة. تُفضّل صورة مربعة بأبعاد 180x180 بالضبط لأنه حجم شائع للأيقونات اللمسية. إذا لم تتوافر، تُختار أكبر أيقونة مربعة؛ وإذا لم توجد أي صورة مربعة، يُستخدم أكبر ملف مقدم وفق قاعدة بديلة واضحة. يبقى الملف المختار ضمن قائمة المتصفح العادية، ويعرّفه عنصر link إضافي بقيمة rel تساوي apple-touch-icon. تحمي معالجة السمات علامات العطف والاقتباس والأقواس الزاوية في المسارات من دون تغيير الوجهة التي يفسرها HTML. ولا يُستنتج نوع MIME من امتداد الملف، تجنبًا لإعلان غير صحيح عندما تستخدم الروابط تحويلات أو مسارات بلا امتداد.
ضع الشيفرة الناتجة وتحقق منها
انسخ قيمة html الناتجة إلى head في قالب المستند المشترك الذي يخدم جميع الصفحات العامة. إذا كنت تستخدم إطار عمل، فضعها في التخطيط الجذري أو قالب البيانات الوصفية بدلًا من تكرارها داخل كل مسار. تحتوي مصفوفة tags على الأسطر نفسها كسلاسل منفصلة عندما يحتاج برنامج البناء إلى قيم منظمة، بينما يسهّل icon_count وapple_touch_size عمليات الفحص الآلية. بعد النشر، افتح مصدر الصفحة الناتجة وتحقق من أن قيم href تصل إلى الملفات انطلاقًا من الأصل العام النهائي. يُحل المسار النسبي الذي يبدأ بشرطة مائلة من جذر النطاق، أما المسار النسبي من دونها فيُحل نسبة إلى موضع المستند الحالي وقد يتصرف بصورة مختلفة في المسارات المتداخلة. امسح ذاكرة المتصفح المؤقتة أو استخدم نافذة خاصة عند فحص الاستبدالات، لأن تخزين favicon المؤقت يدوم غالبًا مدة طويلة. واختبر إضافة الموقع إلى شاشة هاتف رئيسية إذا كانت هذه التجربة مهمة. تكتب الأداة المراجع فقط؛ فهي لا تنشئ الصور ولا تعدّل بيان ويب ولا ترفع الملفات ولا تتحقق من نوع المحتوى الذي يرسله الخادم.
حالات الاستخدام
إنشاء head لموقع ثابت
حوّل قائمة بإصدارات ملفات الأيقونات إلى شيفرة جاهزة للإدراج في تخطيط HTML مشترك.
توحيد قوالب التطبيقات
أنشئ إعلانات favicon مرتبة بصورة متسقة لعدة مواقع تنشر مسارات مختلفة للأيقونات.
أتمتة بيانات النشر الوصفية
مرّر الوسوم المنظمة وحجم أيقونة اللمس المختار إلى فحص بناء أو مسار إصدار آلي.
الأسئلة الشائعة
ماذا يحدث إذا لم أرسل أي أيقونة؟
يفشل الطلب بخطأ إدخال غير صالح، لأن مسار أيقونة واحدًا وحجمًا واحدًا مطلوبان على الأقل.
كيف تُختار Apple touch icon؟
تُفضّل أيقونة مربعة بأبعاد 180x180، وإلا تُستخدم أكبر أيقونة مربعة. وإذا لم توجد أيقونات مربعة، يُختار أكبر ملف مقدم.
هل تنشئ الأداة ملفات favicon أو تغيّر أحجامها؟
لا. إنها تنشئ مراجع HTML فقط لملفات سبق أن أنشأتها وأتحتها للعامة.
هل يمكنني استخدام عناوين URL مطلقة؟
نعم. يمكن أن يكون كل مسار عنوان URL مطلقًا أو مسارًا نسبيًا إلى الموقع، وتُحمى المحارف غير الآمنة في سمات HTML.
لماذا تُرفض الأحجام المكررة؟
يجعل الإعلان الواحد لكل حجم اختيار المتصفح متوقعًا، ويمنع تنافس ملفين على الأبعاد ذاتها.
ما تكلفة API؟
تبلغ تكلفة API مقدار $0.002 لكل طلب. وتتوفر نسخة المتصفح مجانًا في هذه الصفحة.
للمطوّرين — الوصول عبر API
كل ما في هذه الصفحة متاح برمجيًا. هذا القسم موجّه للفرق التقنية التي تريد ربط الأداة بأنظمتها الخاصة؛ بقية المستخدمين يمكنهم استخدام الأداة أعلاه مباشرة دون الحاجة لقراءة ما يلي.
الـEndpoint
صادِق على طلبك بترويسة Bearer، وأرسل طلب POST واحدًا لتدخل مهمتك قائمة التنفيذ فورًا؛ ثم تستلم النتيجة عبر webhook أو رابط موقّع.
استدعِ الخدمة من بيئتك
curl -X POST https://api.kit.forhosting.com/web/favicon-meta-generate \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"icons":[{"size":"16x16","path":"/favicon-16x16.png"},{"size":"32x32","path":"/favicon-32x32.png"},{"size":"180x180","path":"/apple-touch-icon.png"}]}'const res = await fetch("https://api.kit.forhosting.com/web/favicon-meta-generate", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"icons": [
{
"size": "16x16",
"path": "/favicon-16x16.png"
},
{
"size": "32x32",
"path": "/favicon-32x32.png"
},
{
"size": "180x180",
"path": "/apple-touch-icon.png"
}
]
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/web/favicon-meta-generate",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"icons": [
{
"size": "16x16",
"path": "/favicon-16x16.png"
},
{
"size": "32x32",
"path": "/favicon-32x32.png"
},
{
"size": "180x180",
"path": "/apple-touch-icon.png"
}
]
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/web/favicon-meta-generate", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"icons":[{"size":"16x16","path":"/favicon-16x16.png"},{"size":"32x32","path":"/favicon-32x32.png"},{"size":"180x180","path":"/apple-touch-icon.png"}]}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"icons":[{"size":"16x16","path":"/favicon-16x16.png"},{"size":"32x32","path":"/favicon-32x32.png"},{"size":"180x180","path":"/apple-touch-icon.png"}]}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/web/favicon-meta-generate", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)مثال على الطلب
{
"icons": [
{
"size": "16x16",
"path": "/favicon-16x16.png"
},
{
"size": "32x32",
"path": "/favicon-32x32.png"
},
{
"size": "180x180",
"path": "/apple-touch-icon.png"
}
]
}مثال على الاستجابة
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "web.favicon_meta_generate",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}الواجهة غير متزامنة: تستلم task_id فور الإرسال، ويمكنك الاستعلام عن الحالة بمعدل طلب واحد في الثانية.
الأسعار
السعر معلن كما تراه: لا tokens ولا نظام نقاط؛ وإن فشلت المهمة فلن تُحاسَب عليها.
الحدود
timeout_sec | 30 |
max_crawl_pages | 25 |
الأخطاء
| HTTP | الرمز | المعنى |
|---|---|---|
401 | unauthorized | مفتاح الوصول مفقود أو غير صالح؛ تحقق من ترويسة Bearer في طلبك. |
402 | insufficient_balance | رصيدك لا يكفي لتنفيذ هذه المهمة؛ أعد شحن الرصيد ثم أعد المحاولة. |
404 | unknown_type | نوع المهمة المطلوب غير موجود في الكتالوج — راجع الاسم المرسل في الطلب. |
429 | rate_limited | تجاوزت الحد المسموح من الطلبات؛ انتظر قليلًا ثم أعد المحاولة. |