مولّد الأيقونات المفضلة (Favicon)
أنشئ كل أيقونات favicon التي يحتاجها موقعك من صورة واحدة.
الإبلاغ عن مشكلة في هذه الأداة
كيفية استخدام مولّد الأيقونات المفضلة
أضف شعارك أو صورتك
أفلت صورة PNG أو JPG أو WebP أو GIF أو SVG على الصفحة. تعمل الصورة المربعة ذات الشكل البسيط بشكل أفضل.
اضبط المظهر
قص إلى مربع أو احتوِ الصورة كاملة، واختر خلفية شفافة أو ملونة، وأضف حشواً ودوّر الزوايا. تعرض المعاينة كل مقاس وعلامة تبويب متصفح.
حمّل وأضف الشيفرة
حمّل ملف ZIP، وارفع الملفات إلى المجلد الجذر لموقعك، والصق أسطر HTML في قسم head في صفحاتك.
لماذا تستخدم Utils365
المجموعة الكاملة
favicon.ico بمقاسات 16 و32 و48 بكسل، وأيقونات PNG، وأيقونة Apple touch، وأيقونات Android، وsite.webmanifest، كلها بالأسماء التي تتوقعها المتصفحات.
شاهدها قبل التحميل
تحقق من شكل الأيقونة بمقاساتها الحقيقية وفي علامات تبويب المتصفح الفاتحة والداكنة، حتى لا تضيع التفاصيل الصغيرة.
خصوصية تامة
يحدث كل شيء في متصفحك، فلا يُرفع شعارك إلى أي خادم.
الأسئلة الشائعة
ما مقاسات favicon التي أحتاجها؟
ملف favicon.ico (16 و32 و48 بكسل) يغطي علامات تبويب المتصفح والإشارات المرجعية، وأيقونة Apple touch بمقاس 180 بكسل تغطي الشاشات الرئيسية في iPhone وiPad، وملفات PNG بمقاس 192 و512 بكسل تغطي Android وتطبيقات الويب المثبتة. تنشئها هذه الأداة كلها من صورة واحدة.
ICO أم PNG أم SVG: أي صيغة favicon أستخدم؟
استخدم الثلاث. يعمل favicon.ico في كل مكان، بما في ذلك المتصفحات القديمة والأدوات التي تبحث عنه تلقائياً. تعطي أيقونات PNG نتائج حادة بمقاسات محددة. أما أيقونة SVG فتبقى حادة بأي مقاس؛ وتحصل عليها عندما تبدأ من ملف SVG.
ما هي apple-touch-icon؟
هي الأيقونة التي تستخدمها أجهزة iPhone وiPad عندما يضيف أحدهم موقعك إلى شاشته الرئيسية. مقاسها 180 × 180 بكسل ولا يمكن أن تكون شفافة، لذا تُحفظ بخلفية مصمتة (بيضاء إذا اخترت شفافة). يتولى iOS تدوير الزوايا بنفسه.
أين أضع ملفات favicon؟
فك ضغطها في المجلد الجذر لموقعك، بجوار صفحتك الرئيسية، ليكون favicon.ico على العنوان yoursite.com/favicon.ico. ثم الصق أسطر HTML المعروضة في هذه الصفحة في قسم head في كل صفحة، أو في قالب موقعك.
لماذا لا تظهر أيقونتي الجديدة؟
تحتفظ المتصفحات بأيقونات favicon لفترة طويلة. افتح عنوان الأيقونة مباشرةً، أو حدّث الصفحة تحديثاً كاملاً، أو جرّب نافذة خاصة لرؤية الأيقونة الجديدة.