محوّل أيقونة الموقع
أنشئ من صورة نقطية واحدة الملفات اللازمة لإضافة أيقونة موقع إلى موقع ويب. حدّد طريقة احتواء المصدر داخل اللوحة المربعة، واضبط الخلفية، ثم نزّل ملف ZIP يحتوي على ICO متعدد المقاسات وسبع أيقونات PNG وملف بيان لتطبيق الويب وإعدادات لوحة Windows ومقتطف HTML جاهز للنسخ إلى رأس الصفحة. تتم معالجة الصورة وتجميع ملف ZIP محليًا داخل متصفحك.
كيفية تحويل صورة إلى حزمة أيقونة موقع
-
1
اختر صورة نقطية
حدّد ملف PNG أو JPEG أو WebP يلتزم بالحدود المعروضة لحجم الملف وأبعاد الصورة. لا تقبل الأداة ملفات SVG أو GIF أو AVIF.
-
2
اختر طريقة الاحتواء
استخدم «تغطية» لملء المربع مع قص الحواف، أو «احتواء» للحفاظ على الصورة كاملة وإضافة مساحة حولها.
-
3
اضبط الخلفية
اختر لون خلفية للبكسلات الشفافة ولأي مساحة تنتج عن وضع «احتواء»، ثم راجع المعاينات التي تم إنشاؤها.
-
4
نزّل الملفات وثبّتها
نزّل ملف ZIP، وضع ملفات الأيقونات والإعدادات في موقعك، وانسخ وسوم الربط المرفقة إلى رأس المستند.
محتويات ملف ZIP
| عنصر الحزمة | الغرض منه |
|---|---|
favicon.ico |
حاوية ICO واحدة تضم مقاسات 16 و32 و48 و256 بكسل للمتصفحات والبرامج التي تطلب مسار أيقونة الموقع التقليدي |
favicon-16x16.png |
ملف PNG صغير لعلامات تبويب المتصفح والمواضع الصغيرة الأخرى |
favicon-32x32.png |
أيقونة أعلى كثافة لعلامات تبويب المتصفح والإشارات المرجعية |
favicon-48x48.png |
مقاس إضافي لسطح المكتب والاختصارات |
mstile-150x150.png |
ملف PNG بمقاس 150 × 150 تشير إليه إعدادات لوحة Windows |
apple-touch-icon.png |
ملف PNG بمقاس 180 × 180 لروابط الشاشة الرئيسية على أجهزة Apple |
android-chrome-192x192.png |
أيقونة تطبيق بمقاس 192 × 192 يشير إليها بيان تطبيق الويب |
android-chrome-512x512.png |
أيقونة تطبيق بمقاس 512 × 512 يشير إليها بيان تطبيق الويب |
site.webmanifest |
بيانات JSON وصفية توجّه المتصفحات المتوافقة إلى أيقونتي 192 و512 بكسل |
browserconfig.xml |
إعدادات لوحة Windows التي تشير إلى ملفات الأيقونات المنشأة |
favicon-head.html |
وسوم جاهزة للنسخ تربط الصفحة بملفات ICO وPNG وأيقونة Apple والبيان وإعدادات المتصفح |
ملفات ICO وPNG منفصلة لسبب مقصود. تختار المتصفحات وأنظمة التشغيل الأيقونات بطرق مختلفة، لذا تدعم الحزمة الكاملة طلب /favicon.ico التقليدي وتعريفات الأيقونات الحديثة الصريحة في الوقت نفسه.
وسوم رأس HTML
تتضمن الحزمة التي تنزّلها مقتطفًا بهذا الشكل:
<link rel="icon" href="/favicon.ico" sizes="any">
<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">
<meta name="msapplication-config" content="/browserconfig.xml">
إذا كانت الملفات داخل مجلد فرعي أو على مضيف مستقل للملفات، فعدّل المسارات قبل لصق الوسوم داخل <head>. حافظ على تطابق أسماء الملفات ومساراتها داخل site.webmanifest وbrowserconfig.xml مع الملفات التي تنشرها.
خيارات التغطية والاحتواء والخلفية
- تغطية تملأ كل مخرج مربع. تُقص الصورة العريضة أو الطويلة بالتساوي من الحافتين المتقابلتين، لذلك يُفضّل إبقاء الجزء المهم من التصميم قرب الوسط.
- احتواء يحافظ على ظهور المصدر كاملًا. تتحول المساحة غير المستخدمة إلى حشو بلون الخلفية المحدد.
- الخلفية يمكن أن تبقى شفافة أو تستخدم لونًا واحدًا مخصصًا. في وضع «احتواء»، يحدد هذا الخيار أيضًا لون الحشو حول الصورة. افحص المعاينات على خلفيات صفحات فاتحة وداكنة قبل النشر.
للحصول على أوضح أيقونات صغيرة، ابدأ بصورة مربعة بسيطة لا تقل عن 512 × 512 بكسل. قد تختفي الكتابة الدقيقة والخطوط الرفيعة والتفاصيل الصغيرة في نسخة 16 بكسل حتى عندما يكون المصدر كبيرًا.
حدود الإدخال وطريقة النشر
يقبل هذا المحوّل صور PNG وJPEG وWebP النقطية فقط. يفحص توقيع الصورة ويرفض SVG وGIF وAVIF وأي تنسيق آخر غير مذكور. يمكن أن يصل حجم المصدر إلى 20 ميبيبايت، على ألا يتجاوز أي ضلع 8,192 بكسل وألا يزيد إجمالي الصورة على 24 ميغابكسل. تُفحص حدود الأبعاد قبل فك ترميز الصورة بالكامل.
بعد التنزيل، استخرج ملف ZIP وارفع الملفات المنشأة إلى المسارات المستخدمة في المقتطف المرفق. تفترض المسارات التي تبدأ من الجذر، مثل /favicon.ico، أن الملفات متاحة من جذر النطاق الحالي. امسح ذاكرة التخزين المؤقت للموقع أو شبكة CDN عند استبدال أيقونة موجودة، لأن المتصفحات غالبًا ما تحتفظ بملفات الأيقونات مدة أطول من ملفات الصفحة العادية.
يوفر ملف البيان المرفق بيانات الأيقونات الوصفية، لكن البيان ومجموعة الأيقونات وحدهما لا يجعلان الموقع تطبيق ويب تقدميًا قابلًا للتثبيت. يعتمد التثبيت أيضًا على الصفحة وأمان الاتصال ومتطلبات كل متصفح.
الأسئلة الشائعة
يمكنك استخدام PNG أو JPEG أو WebP. يفحص المحوّل توقيع الملف بدل الاعتماد على اسمه وحده، ويرفض SVG وGIF وAVIF وأي تنسيقات أخرى.
يكبّر وضع «تغطية» الصورة حتى تمتلئ المساحة المربعة، مع قص مقدار متساوٍ من الحواف عندما لا تكون نسبة الأبعاد مربعة. يحافظ وضع «احتواء» على الصورة كاملة ويملأ المساحة المربعة المتبقية بلون الخلفية المحدد.
ICO حاوية تستطيع تخزين عدة مقاسات صغيرة للأيقونات في ملف تقليدي واحد. تمنح ملفات PNG المنفصلة المتصفحات والمنصات أصولًا محددة المقاس لعلامات التبويب وروابط الشاشة الرئيسية وأيقونات التطبيقات. وجود النوعين معًا يوسّع التوافق العملي.
لا. يصف البيان أيقونات التطبيق المنشأة وبيانات العرض المرتبطة بها، لكن قابلية التثبيت تعتمد على متطلبات إضافية للمتصفح وعلى طريقة إنشاء الموقع وتقديمه.
يستخدم المقتطف المرفق مسارات تبدأ من الجذر، لذا فإن أبسط إعداد هو وضع الملفات المستخرجة في جذر النطاق. إذا استخدمت مجلدًا آخر أو مضيفًا للملفات، فحدّث المقتطف والمسارات داخل البيان وإعدادات المتصفح لتتطابق معه.
لا. تتم معالجة الصورة وإنشاء ملف ZIP داخل متصفحك. في المسار متعدد الخطوات، قد يحتفظ IndexedDB بمسودة الصورة في هذا المتصفح مدة تصل إلى 30 دقيقة كي تنتقل بين الخطوات. عملية التسليم المحلية هذه ليست رفعًا إلى الخادم.
أدوات ذات صلة
مولّد رموز QR
أنشئ رمز QR محليًا في المتصفح من رابط أو نص عادي أو حمولة QR منسقة، ثم نزّله بصيغة PNG.
مولد الباركود
أنشئ باركودات 1D قابلة للمسح بصيغ Code 128 وCode 39 وEAN-13 وUPC-A وITF-14 وCodabar. صدّر كـ PNG أو SVG أو PDF للطباعة.
منشئ ملفات GIF
حوّل سلسلة صور أو فيديو قصيرًا إلى ملف GIF متحرك. اضبط معدل الإطارات وعدد مرات التكرار والحجم قبل التصدير.
محول PNG إلى SVG متجهي
حوّل صور PNG النقطية إلى مسارات SVG داخل المتصفح. مناسب للشعارات والأيقونات ورسومات الخطوط. تحكم في العتبة وعدد الألوان والتنعيم.
مولد الميمز
أنشئ ميمز من قوالب شهيرة مثل Drake وDistracted Boyfriend وDoge، أو ارفع صورتك الخاصة. نص علوي وسفلي بخط Impact مع حد وظل.
مغيّر حجم الصور
غيّر حجم الصور إلى أبعاد دقيقة بالبكسل أو إلى نسب مئوية مع الحفاظ على نسبة العرض إلى الارتفاع. مناسب للدفعات، ومن دون رفع الملفات.