مولّد أيقونات المواقع
حوّل صورة واحدة إلى كل مقاسات الأيقونة التي يحتاجها موقع، مع ملفّ ico متعدّد المقاسات.
تتم المعالجة على جهازك — بلا رفع
كيف تولّد أيقونة موقع
- اختر صورة مربّعة، يفضَّل 512 بكسلًا أو أكبر.
- اضغط «ولّد» — تُنتَج كل المقاسات دفعة واحدة.
- نزّل ملفّ ico ومقاسات PNG التي تحتاجها.
كيف يعمل
يُنتَج كل مقاس برسم صورتك على لوحة مربّعة بذلك المقاس. وتُقاس الصورة المصدر لتلائم لا لتملأ، وتُوسَّط، فتحتفظ الصورة غير المربّعة بنسبها مع حشو شفّاف بدل أن تُمدَّد إلى شيء مشوَّه.
وملفّ .ico يُجمَّع يدويًا. فصيغة ICO حاوية: ترويسة من ستّة بايتات، ثم مدخل دليل من ستّة عشر بايتًا لكل صورة يعطي أبعادها وموضع بداية بياناتها، ثم حمولات الصور. والمتصفّحات الحديثة تقبل حمولات PNG داخله، فتحزم الأداة صور 16 و32 و48 بكسلًا في ملف واحد تختار منه المتصفّحات المقاس الصحيح تلقائيًا.
والمقاسات ليست اعتباطية. فـ16 و32 هما تبويب المتصفّح بالكثافة القياسية والعالية. و48 تستعمله اختصارات ويندوز. و180 أيقونة الشاشة الرئيسية عند Apple. و192 و512 هما ما يطلبه بيان تطبيق الويب على أندرويد، وتُستعمل 512 لشاشة البداية.
والتفاصيل تختفي سريعًا عند 16 بكسلًا. فذلك 256 بكسلًا في المجموع. والشعار ذو الحروف الدقيقة يصير لطخة غير مقروءة. والأيقونات التي تعمل بذلك المقاس أشكال بسيطة عالية التباين، ولهذا كثير منها حرف واحد أو علامة واحدة.
مثال عملي
لديك logo.png، بأبعاد 1024×1024 وخلفية شفافة، لموقع تُطلقه.
اخترها واضغط «ولّد». تظهر ستّ صور PNG وملفّ favicon.ico واحد. وتُرسم المعاينات الصغيرة بلا تنعيم لترى أيقونة 16 بكسلًا كما يعرضها المتصفّح فعلًا — وهي اللحظة التي يكتشف فيها معظم الناس أن شعارهم لا ينجو بذلك المقاس.
نزّل favicon.ico وapple-touch-icon.png و icon-192.png وicon-512.png، وضعها في جذر موقعك، وأضف:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">ثم يشير site.webmanifest لديك إلى صورتَي 192 و512 لأندرويد.
وإذا كان مصدرك علامة نصية عريضة لا مربّعًا، فستحتوي الأيقونات العلامة كاملةً مصغَّرةً في مربّع بحشو — مقروءة عند 512 بكسلًا وغير مقروءة عند 16. والإصلاح تحريري لا تقني: اقصص إلى الرمز وحده أو إلى الحرف الأول، وولّد منه.
أسئلة
ما مقاسات الأيقونات التي يحتاجها موقع؟
أيقونتا 16 و32 بكسلًا الكلاسيكيتان، وأيقونة لمس بمقاس 180 بكسلًا لشاشات iOS الرئيسية، و192 و512 لأندرويد. وكلها تخرج من صورة مصدر واحدة هنا.
هل يُرفع شعاري لتوليد الأيقونات؟
لا. كل مقاس يُرسم على لوحة في متصفّحك ويُجمَّع ملفّ ico في الذاكرة على جهازك. ولا شيء يُرسَل.
ما مقاس صورة المصدر المناسب؟
مربّعة و512 بكسلًا على الأقل. فالمصادر الأصغر يجب تكبيرها للأيقونات الكبيرة وتبدو رخوة. والأصل بمقاس 1024 بكسلًا مثالي.
ما الملفات التي أحتاجها فعلًا؟
ملفّ favicon.ico يغطّي المتصفّحات على نطاق واسع، وapple-touch-icon.png يغطّي شاشات iOS الرئيسية، وicon-192 مع icon-512 يغطّيان أندرويد عبر بيان الويب. أما صور 16 و32 و48 فموجودة داخل ملفّ ico أصلًا.
لماذا يبدو شعاري سيّئًا عند 16 بكسلًا؟
لأن 16×16 هي 256 بكسلًا في المجموع. والحروف الدقيقة والخطوط الرفيعة لا تستطيع النجاة. والأيقونات التي تعمل بذلك المقاس أشكال بسيطة عالية التباين — حرف واحد أو علامة واحدة غالبًا.
ماذا لو لم تكن صورتي مربّعة؟
تُوسَّط بحشو شفّاف بدل أن تُمدَّد، فتحتفظ بنسبها. وللحصول على نتيجة أفضل، اقصص إلى مربّع أولًا.
هل يحتوي ملفّ ico أكثر من مقاس؟
نعم — 16 و32 و48 بكسلًا في ملف واحد. وتختار المتصفّحات وويندوز ما يلائم السياق الذي ترسم فيه.
هل تُحفظ الشفافية؟
نعم. كل الأيقونات بصيغة PNG، بما فيها الحمولات داخل ملفّ ico، فتنتقل الخلفيات الشفافة كما هي.
أين تذهب الملفات؟
إلى جذر موقعك، بجانب index.html، ثم تشير إليها من ترويسة صفحاتك. وملفّ favicon.ico في الجذر تجده معظم المتصفّحات تلقائيًا حتى بلا وسم رابط.
هل مولّد أيقونات المواقع مجاني على الإنترنت؟
نعم — مجاني، بلا حساب، وبلا حد يومي، وبلا علامة مائية. يعمل في متصفّحك عبر الإنترنت، ولأن المعالجة تجري على جهازك فإنه يستمر في العمل دون اتصال بعد تحميل الصفحة.
أدوات Image ذات صلة
ضغط الصور
صغّر صورة JPG أو PNG أو WebP بجودة تتحكّم فيها، وانظر التوفير قبل التنزيل.
افتح$termiva fit photo.jpg --under 200kbضغط الصور إلى حجم محدّد
اكتب الحدّ الذي أعطاك إياه النموذج، وتبحث الأداة رجوعًا حتى تستقرّ تحته.
افتح$termiva convert photo.png --to webpتحويل صيغ الصور
غيّر صيغة صورة بين JPG وPNG وWebP، بلا رفع وبلا علامة مائية.
افتح$termiva resize photo.jpg --width 1200تغيير مقاس الصور
قِس صورة إلى عرض وارتفاع تختارهما، مع تثبيت النسبة حتى لا تتشوّه.
افتح