حوّل شعاراً أو أحرف علامة قصيرة إلى حزمة فافيكون للمتصفح والإشارات وشاشة الهاتف وتطبيقات PWA مع وسوم HTML جاهزة.
تحقق من المقاسات الصغيرة والهاتف وPWA قبل التنزيل. تحتاج الأيقونات الصغيرة إلى تباين قوي وشكل بسيط.
المصدر
أيقونة نصية
6 مقاسات
استخدم شعاراً مربعاً إن أمكن. تعمل ملفات PNG الشفافة وJPG وWebP وSVG جيداً.
نزّل كل مقاس PNG أو انسخ مقتطفات التنفيذ.
ضع هذه الوسوم داخل head بعد رفع الملفات المنزلة إلى مجلد /favicon.
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="48x48" href="/favicon/favicon-48x48.png"> <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">
أضف هذه الإدخالات إلى manifest عند استخدام تثبيت PWA.
{
"icons": [
{
"src": "/favicon/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/favicon/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}ملاحظات مهمة
تعتمد الحسابات على صيغ قياسية. قد يتم تقريب القيم المعروضة لتسهيل القراءة. تحقق من مصدر رسمي قبل القرارات المهمة.
احفظ هذه النتيجة أو قارنها بنتائج سابقة أو شارك تقريرًا.
لا تكفي صورة واحدة بحجم 16 بكسل لحزمة جيدة. تجهز الأداة أحجام PNG الشائعة وتعرض وسوم الربط التي توضع في رأس الموقع.
لا. تُقرأ الصورة ويُعاد تحجيمها داخل متصفحك باستخدام Canvas.
تكفي أيقونات PNG للمواقع الحديثة. للمتصفحات القديمة جداً يمكن تحويل PNG بحجم 32px إلى .ico بشكل منفصل.