# الصورة إلى ICO — صانع الفافيكون وأيقونات Windows وmacOS

صورة واحدة تدخل. وتخرج بكل حجم يطلبه متصفح أو Windows أو Mac.

> حوِّل ملف PNG أو JPEG أو SVG إلى ملف ‎.ico‎ حقيقي متعدّد الأحجام أو ملف ‎.icns‎ لـ macOS داخل متصفحك. فافيكون، وأيقونة تطبيق Windows، وأيقونة تطبيق Mac، ومعها ملفات Apple وAndroid التي يحتاجها الموقع. ولا يُرفع شيء.

هذه الصفحة أداة تفاعلية تعمل بالكامل داخل متصفحك، على العنوان https://abox.tools/ar/إنشاء-فافيكون/ — ولا يُرفَع أي شيء تعطيه إياها. وفيما يلي كل ما تقوله الصفحة عن الأداة بالكلمات؛ لاستخدامها، افتح العنوان.

## صورك لا تُرفع **أبدا**. لا يوجد خادم.

التحجيمُ وملفاتُ الأيقونات نفسها، كلاهما يُصنَع داخل متصفحك أنت. تُرسَم الصورة باللوحة التي يأتي بها متصفحك أصلاً، وتُجمَّع كل حاوية — ملف `.ico` لـ Windows، وملف `.icns` لـ macOS — من تلك البكسلات بمئتَي سطر أو نحوها في `src/ico.js` و `src/icns.js` تستطيع قراءتها. لا تملك هذه الأداة أي وظيفة شبكية على الإطلاق — لا شيء تجلبه ولا شيء ترسله — ولا يقف خلف هذه الصفحة خادم يُرسَل إليه شعار، حتى لو كان فيها ما يرسله.

- ✗ بلا رفع
- ✗ بلا حساب
- ✗ بلا علامة مائية
- ✓ يعمل دون اتصال
- ✓ مفتوح المصدر

## كيف تصنع ملف ‎.ico‎ دون رفع أي شيء

1. **اختر الصورة.** أفلِت ملف PNG أو JPEG أو WebP أو SVG على المُنتقي، أو اختر عدة ملفات وحوِّلها دفعة واحدة. والمربّعة أيسرها، وكل ما كان من 256 بكسلاً فصاعداً فيه من التفصيل ما يكفي كل حجم. ويقرؤها المتصفح من قرصك مباشرة؛ ولا يُرسَل شيء إلى أي مكان أثناء ذلك.
2. **اختر الملفات التي تحتاجها.** يقرأ Windows والمتصفح ملف `.ico`؛ ويقرأ Mac ملف `.icns` ولا ينظر إلى الآخر. أشِّر على أيهما، أو عليهما معاً إن كان ما تصنعه يُشحَن على النظامين. والموقع يريد صور Apple وAndroid والمربّعات كذلك، وذلك هو المربع الثالث.
3. **قل لماذا الأيقونة.** فافيكون الموقع 16 و32 و48 بكسلاً؛ وتطبيق Windows يريد 256 كذلك؛ والتطبيق الذي عليه أن يبدو سليماً على حاسوب محمول عالي الدقة يريد الأحجام الوسطى التي يطلبها Windows عند تحجيم 125% و150%. اختر ما يطابق الغرض، أو أشِّر على الأحجام بنفسك. ويقول كل حجم في القائمة مَن يطلبه. أما ملف `.icns` فلا خيار فيه: تُسمّي Apple عشر خانات بالضبط وتدخل العشر جميعاً.
4. **عالِج أمر النسبة والخلفية.** الأيقونة مربّعة ومعظم الشعارات ليست كذلك. فالحشو يُبقي الصورة كلها ويترك فراغاً فوقها وتحتها؛ والقص يأخذ الوسط؛ والمطّ يضغطها. وتبقى الشفافية شفافيةً ما لم تختر لوناً يقف خلفها.
5. **انظر إلى ذات الـ 16 بكسلاً قبل أن تنزّل.** فهو الحجم الذي سترى الأيقونة به في أكثر الأحوال، وهو الموضع الذي تختفي عنده الخطوط الرفيعة والحروف الصغيرة. وكل مربع في المعاينة مرسوم بحجمه الحقيقي من ملفك أنت. فإن كان أصغرها لطخةً، فالعلاج رسمٌ أبسط لا إعدادٌ آخر.
6. **خذ الملفات.** ملف ‎.ico‎ واحد بكل الأحجام في جوفه، مسمّى `favicon.ico` حين يكون ذلك ما طلبته، لأن ذلك هو العنوان الذي تبحث عنه المتصفحات. وملف ‎.icns‎ بجانبه إن أشّرت عليه، جاهزاً ليدخل في حزمة تطبيق Mac. وأشِّر على طقم الموقع كذلك فتحصل أيضاً على صور Apple وAndroid ومربّع Windows، والبيان، وكتلة HTML للّصق في صفحتك. وكل ما زاد على ملف واحد ينزل في ملف zip واحد.

## النسخة الأطول

[كيف تصنع فافيكون يظل مقروءاً عند ستة عشر بكسلاً](https://abox.tools/ar/أدلة/إنشاء-فافيكون/): أيَّ مقاسات يحتاج ملفُّ favicon.ico فعلاً، وأيَّ ملفات إضافية تطلبها هواتفُ iPhone وأجهزةُ Android وأجهزةُ Mac، ولماذا يختفي شعارٌ ينجح على ملصق عند ستة عشر بكسلاً.

## أيضا في الصندوق

- [الصورة إلى Data URI](https://abox.tools/ar/تحويل-الصورة-إلى-base64/): الصورة كلها في سطر نصّ واحد. الصقه في CSS أو HTML مباشرة.
- [SVG إلى صورة](https://abox.tools/ar/تحويل-svg-إلى-png/): حدّد الحجم. فالرسم المتجهي لا حجم له يخسره.
- [صورة إلى SVG](https://abox.tools/ar/تحويل-صورة-إلى-svg/): شكل واحد، وخط محيط واحد. أشِر إلى ما لا ينبغي أن يكون هناك.
- [رسم مقارنة الأطوال](https://abox.tools/ar/مقارنة-الاطوال/): اكتب الأطوال، وخذ الصورة. ولا يُرسَل شيء لرسمها.

## أسئلة

### هل تُرفع صورتي إلى أي مكان؟

لا. يفكّ متصفحك أنت ترميز الصورة ويحجّمها على جهازك أنت، ويُجمَّع ملف ‎.ico‎ من تلك البكسلات بشيفرة تُخدَم من هذه الصفحة. لا تملك هذه الأداة أي وظيفة شبكية على الإطلاق — فهي لا تجلب شيئاً ولا ترسل شيئاً — و`Content-Security-Policy` الخاصة بالصفحة تُسمّي كل عنوان يجوز لها الاتصال به، وليس واحد منها لنا.

### ما الأحجام التي ينبغي أن يحويها ملف favicon.ico؟

16 و32 و48. وليس ذلك تفضيلاً: فـ 16 هو ما يرسمه المتصفح في التبويب، و32 هو ما يستعمله Windows لاختصار سطح المكتب وما تستعمله عدة متصفحات للإشارة المرجعية، و48 هو الحجم الذي تقرأ به Google أيقونة الموقع. وما زاد على ذلك مكانه ملف PNG بجانب ملف ‎.ico‎ لا داخله — وهو ما ينتجه طقم الموقع هنا.

### ما الأحجام التي تحتاجها أيقونة تطبيق Windows؟

16 و32 و48 و256، وهو ما يحويه ملف app.ico الافتراضي في Visual Studio نفسه. فـ 16 لشريط العنوان ولعرض Explorer الصغير، و32 لسطح المكتب ولشريط المهام، و48 لأيقونات Explorer المتوسطة، و256 لقائمة ابدأ وللعرض الكبير جداً. وعلى شاشة عالية الدقة يطلب Windows كذلك 20 و24 و40 و64 و96، ويعيد أخذ عيّناتها من أقرب حجم عنده إن لم تكن موجودة — وإعداد «كل مقاييس التحجيم» يضعها فيه.

### لماذا الملف أكبر من الصورة التي بدأت بها؟

لأن ملف ‎.ico‎ ليس صورة واحدة بل عدة صور، والصغيرة منها تُخزَّن دون ضغط كي يستطيع أي شيء قراءتها. فمُدخَل ⁦32×32⁩ هو 4,264 بايتاً بالضبط مهما كان فيه، ومُدخَل ⁦256×256⁩ غير المضغوط هو 264 KB — ولهذا تُخزَّن الأحجام فوق 64 بصيغة PNG افتراضياً. واختيار «PNG لكل حجم» ينتج أصغر ملف ممكن؛ واختيار غير المضغوط لكل حجم ينتج أكثرها توافقاً.

### ما الفرق بين مُدخَلات PNG وغير المضغوطة؟

كيفية تخزين البكسلات داخل ملف ‎.ico‎ لا غير. فالمُدخَل غير المضغوط هو الترتيب الأصلي في Windows — ترويسة صورة نقطية، والبكسلات مقلوبة رأساً على عقب، وقناع شفافية ببتّ واحد — وكل إصدار من Windows صدر يوماً يقرؤه. أما مُدخَل PNG فهو ملف PNG كامل مدسوس داخل الأيقونة، وهو أصغر بثلاثة إلى عشرة أضعاف عند الأحجام الكبيرة لكنه لم يُفهَم إلا من Windows Vista فصاعداً. والافتراضي يستعمل كلاً حيث يفوز: غير المضغوط حتى 64 بكسلاً، وPNG فوقها.

### هل يستطيع صنع أيقونة أكبر من 256 بكسلاً؟

لا، ولا يستطيع ذلك شيء. فالصيغة تخزّن كل ضلع في بايت واحد، والصفر محجوز — إذ يعني 256. فذلك هو السقف، وملف ‎.ico‎ فيه صورة بحجم 512 بكسلاً ليس أيقونة أكبر بل أيقونة معطوبة. وإن احتجت إلى 512 فأنت تحتاج إلى ملف PNG، وهو ما يشمله طقم الموقع لـ Android ولشاشة بدء تطبيق الويب.

### هل يحفظ الشفافية؟

نعم، في نوعَي المُدخَلات كليهما، ويكتب كذلك القناع القديم ذا البتّ الواحد بجانب قناة ألفا كي تظل البرمجيات الأقدم من أن تقرأ ألفا تقتطع الأيقونة بدل أن ترسم مربعاً أسود. والملف الوحيد الذي يُجعَل معتماً عن قصد هو أيقونة Apple اللمسية في طقم الموقع: إذ يركّبها iOS على مربّعه هو ويحوّل الشفافية إلى سواد، فتُسطَّح على لون خلفيتك، وهو الأبيض افتراضياً.

### شعاري كلمة عريضة. فماذا يحدث له؟

لا بدّ أن يحدث له شيء، لأن الأيقونة مربّعة. فالحشو يُبقي الشيء كله ويجعله صغيراً — والكلمة المحشوّة في مربع بحجم 16 بكسلاً يصير ارتفاعها نحو ثلاثة بكسلات ولا تُقرأ. والقصُّ إلى الوسط أنجح عادةً: خذ الرمز من التركيبة واستعمله، كما تفعل كل علامة تجارية تقريباً لفافيكونها. والمعاينة تريك أيهما ينجو قبل أن تنزّل شيئاً.

### ما الذي في طقم الموقع، وهل أحتاج إليه كله؟

سبعة ملفات PNG، وبيان تطبيق ويب، وملف browserconfig.xml، وكتلة HTML للّصق. وأنت تحتاج إليها لأن ملف ‎.ico‎ يغطي المتصفحات وWindows ولا شيء غيرهما: فشاشة iPhone الرئيسية تقرأ ملف PNG بحجم 180 بكسلاً باسم خاص به، وAndroid وكل نافذة تطلب التثبيت تقرأ البيان، والمربّع المثبَّت في قائمة ابدأ يقرأ ملف XML. ولن ينظر أيٌّ منها داخل ملف ‎.ico‎. وكلها تُولَّد هنا، على جهازك، وفي ملف zip ملاحظةٌ تقول لماذا كل ملف.

### هل يستطيع صنع أيقونة macOS كذلك؟

نعم — أشِّر على *أيقونة macOS* فتحصل على ملف `.icns` بجانب ملف `.ico`، أو بدلاً منه. وهو حاوية أخرى للفكرة نفسها، ولن يقرأ أيُّ النظامين حاويةَ الآخر: فـ Windows يريد ‎.ico‎ وحزمةُ تطبيق Mac تريد ‎.icns‎. والأحجام ليست خياراً هناك، لأن Apple تنشر عشر خانات بالضبط — 16 و32 و64 و128 و256 و512 و1024 بكسلاً، وثلاث منها تظهر مرتين بوصفها نسخة Retina للحجم الذي تحتها. وتدخل العشر جميعاً، مرسومةً من سبع عمليات رسم، ولذلك كان ملف ‎.icns‎ هو الأكبر.

### كيف أستعمل ملف ‎.icns‎؟

للتطبيق، يوضع في الحزمة عند `YourApp.app/Contents/Resources/` ويُسمّى في `Info.plist` تحت `CFBundleIconFile`؛ ولكل أداة تحزيم على Mac حقلٌ له. ولأي شيء آخر، اختر الملف في Finder، واضغط Command-C، ثم Get Info على المجلد أو صورة القرص التي تريد تغييرها، وانقر الأيقونة الصغيرة في أعلى اليسار واضغط Command-V.

### هل ملف ‎.icns‎ هو نفسه ما تصنعه iconutil؟

الخانات العشر نفسها بالأنواع الرباعية الحروف نفسها، وPNG في كل واحدة، وهو ما تنتجه `iconutil` من مجلد `.iconset`. وثمّة فرق واحد مقصود: أداة Apple تكتب كذلك عنصر `TOC` ، وهو فهرس للأنواع والأطوال التي تليه. وهو تحسينٌ لا جزءٌ من الصيغة — فالقارئ الذي لا فهرس عنده يمشي على العناصر من أولها إلى آخرها ويصل إلى الجواب نفسه — والفهرس الخاطئ أسوأ من لا فهرس، فتُرِك.

### هل أستطيع تحويل عدة صور دفعة واحدة؟

نعم. تصير كل صورة في القائمة ملف ‎.ico‎ خاصاً بها بالإعدادات نفسها، وتنزل الدفعة في ملف zip واحد فيه مجلد لكل صورة — وإلا لسُمّي اثنان منها favicon.ico وحلّ أحدهما محلّ الآخر. ويُصنَع كل خَرج أشّرت عليه لكل صورة. وانقر أي صف لتضع تلك الصورة في المعاينة.

### هل هو مجاني، وهل أحتاج إلى حساب؟

هو مجاني، ولا حساب ولا تسجيل دخول ولا فترة تجريبية ولا علامة مائية. ولا حدّ لعدد الملفات ولا لأحجامها كذلك، إذ لا خادم يدفع ثمنها — فالعمل يجري على جهازك أنت. ويحمل الموقع إعلانات، وهي ما يدفع تكاليفه؛ ولا يُعطى المعلنون شيئاً عن صورك.

### هل يعمل دون اتصال؟

نعم. حمِّل الصفحة مرة، ثم اقطع اتصالك بالإنترنت وستظل تعمل. وهذه أيضاً أبسط طريقة لإثبات أنه لا يُرفع شيء: فأداةٌ ترسل شعارك بعيداً ليُحوَّل كانت ستتوقف في اللحظة التي تقطع فيها الاتصال.

## كيف يمكن التحقق من وعد الخصوصية

- **شعارك لا سبيل له إلى الخروج.** تُسمّي Content-Security-Policy كل عنوان يجوز لهذه الصفحة الاتصال به، وليس واحد منها لنا. فلا يوجد هنا طرفٌ تُجمَع عنده ملفاتك، ولا في الشيفرة ما يرسلها إليه لو وُجد.
- **لا شيء هنا يجلب شيئاً.** لا يوجد `fetch` ولا `XMLHttpRequest` ولا `sendBeacon` في أي موضع من `src/`. والتحجيم هو `drawImage` على لوحة؛ وكل أيقونة ترويسةٌ تُكتَب أمام تلك البكسلات بـ `src/ico.js` أو `src/icns.js`، في هذه الصفحة.
- **الملف يوصَف من بايتاته هو.** قائمة الأحجام المعروضة بجانب أيقونة منتهية ليست قائمة الأحجام التي طلبتها. بل تُقرأ من الملف الذي كُتِب للتوّ، بـ `readIcoDirectory` أو `readIcnsElements`، فلو خالف كاتبٌ يوماً الإعدادات لقالت الصفحة ذلك بدل أن تعرفه أنت حين لا يرسم Windows شيئاً ويرسم macOS ورقة بيضاء.
- **ما تُحمّله Google، وما لا يُعطى لها.** نصوص الإعلانات والقياس تأتي من Google، وزر التبرّع من Buy Me a Coffee. ولا يُعطى أيٌّ منها شيئاً عن صورتك. وكل سطر يقرأ ملفاً أو يحجّمه أو يكتبه يُخدَم من هذا الأصل نفسه ومُدرَج في المستودع.
- **يعمل دون اتصال.** اقطع الاتصال بالشبكة، وتبقى الأداة كما هي، لأنه لم تكن فيها خطوة شبكية قط. وهذا أبسط برهان على الإطلاق.

**تحقّق بنفسك.** لا شيء مما سبق عليك تصديقه دون تحقق. تُولَّد هذه الصفحة من القوالب والإعدادات في المستودع بواسطة سكربت بناء يمكنك قراءته وتشغيله بنفسك، والنتيجة موجودة في فرع `dist` — فقارِن إذن بين ما يُقدَّم فعلا وما ينتجه بناء المصادر: https://github.com/A-Box-of-Tools/website

الملفات الجديرة بالقراءة أولا هي `config/site.toml` من أجل سياسة أمان المحتوى (Content-Security-Policy)، و`src/ico.js` و `src/icns.js` لصيغتَي الأيقونات — الدليل والمُدخَلات والقناع في إحداهما، وخانات Apple العشر المسمّاة في الأخرى — و `src/sizes.js` لمصدر كل حجم على الصفحة.