تحويل الصور إلى أيقونات وfavicon
اختر صورة واحدة وسنولّد منها ملف أيقونة كامل: favicon.ico يحمل ست مقاسات داخله، وأيقونات PNG لكل المقاسات التي يطلبها المتصفح ونظام التشغيل.
كيف تستخدمها
- 1
اختر صورة — يُفضّل PNG مربّعة بخلفية شفافة.
- 2
اختر طريقة الملاءمة والمقاسات التي تريدها.
- 3
عاين النتيجة بكل مقاس قبل التنزيل.
- 4
نزّل ملف favicon.ico وحده، أو الحزمة كاملة مع أيقونات PNG وملف البيان.
لماذا لا تكفي صورة واحدة؟
المتصفح يطلب ١٦ و٣٢ بكسل لتبويب الصفحة، وiOS يطلب ١٨٠ لأيقونة الشاشة الرئيسية، وAndroid يطلب ١٩٢ و٥١٢ لملف البيان. إعطاء صورة كبيرة واحدة يجعل كل جهاز يصغّرها بنفسه بنتيجة باهتة عند المقاسات الصغيرة، لذا نولّد كل مقاس على حدة بتنعيم عالي الجودة.
ما هو ملف ICO؟
ملف واحد يحوي عدة صور بمقاسات مختلفة، ويختار النظام المقاس المناسب لكل موضع. نضع فيه ١٦ و٣٢ و٤٨ و٦٤ و١٢٨ و٢٥٦ بكسل، وهي التغطية التي تحتاجها المتصفحات وويندوز معاً.
احتواء أم اقتطاع؟
الأيقونات مربّعة وصورتك غالباً ليست كذلك. «احتواء كامل» يُبقي الصورة كلها ويضيف هوامش شفافة، وهو الأنسب للشعارات. «ملء واقتطاع» يملأ المربّع ويقتطع الأطراف، وهو الأنسب للصور الفوتوغرافية.
الأسئلة الشائعة
- ما الفرق بين favicon.ico وأيقونات PNG؟
- ملف ICO يحوي عدة مقاسات معاً ويفهمه كل متصفح حتى القديم منها. وأيقونات PNG المنفصلة تلزم لـ iOS وAndroid وملف البيان. الحزمة الكاملة تعطيك الاثنين.
- أين أضع الملفات؟
- في جذر موقعك، ثم أضف وسوم الربط المعروضة أسفل الأداة داخل قسم head في صفحاتك.
- ما أفضل صورة مصدر؟
- صورة مربّعة بخلفية شفافة وأبعاد ٥١٢ بكسل أو أكثر. الشعارات البسيطة تظهر أوضح عند ١٦ بكسل من الصور المزدحمة بالتفاصيل.
- هل تُحفظ الشفافية؟
- نعم. كل المقاسات تُولَّد بصيغة PNG داخل ملف ICO وخارجه، وهي تدعم الشفافية بالكامل.
- هل يدعم SVG؟
- نعم، يُرسم على مقاس كل أيقونة مباشرةً فتخرج حادّة تماماً — وهو أفضل مصدر ممكن.
- ما مقاس أيقونة iOS؟
- ١٨٠ بكسل لوسم apple-touch-icon. وهو مُحدَّد افتراضياً في قائمة المقاسات.
- هل تُرفع صورتي إلى خادم؟
- لا. التوليد كله يجري داخل متصفحك، وملف ICO نفسه يُبنى في الصفحة بايتاً بايتاً.
- ما ملف site.webmanifest؟
- ملف يخبر Android بأيقونات تطبيقك عند إضافة الموقع إلى الشاشة الرئيسية. نولّده جاهزاً داخل الحزمة.