مولّد Favicon
اصنع الأيقونة الصغيرة التي تظهر في علامات تبويب المتصفح وعلى الشاشة الرئيسية للهاتف، من بضعة حروف أو من شعارك. تحصل على كل المقاسات، وملف favicon.ico، وشيفرة HTML جاهزة للصق.
المعاينة
HTML
<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" sizes="180x180" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">
الصق هذه الأسطر داخل <head> في صفحاتك.
تعمل هذه الأداة بالكامل داخل متصفحك. لا يُرسل أي شيء تُدخله إلى الخادم.
كيف تنشئ Favicon؟
اختر حروفًا أو صورة
اكتب من حرف إلى ثلاثة أحرف أو رمزًا تعبيريًا، أو افتح شعارك.
صمّم الأيقونة
اختر الشكل والألوان، أو الخلفية والهامش الداخلي إذا استخدمت صورة.
نزّلها وأضفها
نزّل ملف ZIP، وارفع الملفات إلى المجلد الجذر لموقعك، والصق شيفرة HTML في رأس الصفحة.
ماذا تتضمن الحزمة؟
ملف favicon.ico بإصدارات 16 و32 و48 بكسل للمتصفحات، وأيقونات PNG بحجم 16 و32 بكسل، وأيقونة Apple Touch بحجم 180 بكسل للشاشات الرئيسية في iPhone وiPad، وأيقونات بحجم 192 و512 بكسل لنظام Android، وملف site.webmanifest يسردها.
التصميم بحجم 16 بكسل
تظهر أيقونة Favicon صغيرة جدًا في علامة تبويب المتصفح. يبقى حرف أو حرفان عريضان أو رمز بسيط سهل التمييز، أما الشعارات المليئة بالتفاصيل فتصبح غير واضحة. راجع معاينة 16 بكسل قبل التنزيل.
الأسئلة الشائعة
أين أضع الملفات؟
في المجلد الجذر لموقعك، بحيث يكون المسار /favicon.ico والمسارات الأخرى الواردة في HTML موجودة. ثم أضف أسطر HTML داخل <head>.
لماذا لا تزال أيقونتي القديمة تظهر؟
تحتفظ المتصفحات بأيقونات Favicon في ذاكرة التخزين المؤقت لمدة طويلة. أعد تحميل الصفحة بعد مسح ذاكرة التخزين المؤقت، أو افتح الموقع في نافذة خاصة للتحقق.
هل يُرفع شعاري؟
لا. تُرسم كل الأيقونات في متصفحك.