شيفرة هذه الصفحة لم تبدأ العمل.

فتح index.html مباشرة من مجلد يمنع المتصفح من تحميل وحدات JavaScript، فلا يحدث شيء عند اختيار صورة. قدّم المجلد عبر HTTP بدلا من ذلك:

powershell -ExecutionPolicy Bypass -File serve.ps1

ثم افتح http://localhost:8080/.

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

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

اللغة: العربية
عرض الشيفرة المصدرية
صورك لا تُرفع أبدا. لا يوجد خادم.

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

فحص حي: جارٍ الفحص…

دون اتصال: جارٍ الفحص…

لا داعي لأن تصدّقنا: افتح أدوات المطوّر، وراقب تبويب «الشبكة»، ثم اصنع أيقونة. لن يحمل أي طلب صورةً ولا مصغَّرة ولا اسم ملف ولا بايتاً واحداً مما اخترته. أو اقطع الاتصال بالإنترنت واصنع واحدة رغم ذلك.

1 اختر صورة

2 قل لماذا الأيقونة

ملف الأيقونة ليس صورة واحدة بل عدة صور: الشعار نفسه مرسوماً من جديد عند كل حجم يطلبه الشيء الذي يقرؤه. وأيُّ الأحجام تلك ليس مسألة ذوق — فالمتصفح يريد ثلاثة منها، والتطبيق على حاسوب محمول عالي الدقة يريد عشرة، وMac يريد عشرته هو، وما كُتِب قبل Windows Vista يريدها مخزَّنة على نحو مختلف كل الاختلاف.

أيقونة Windows — .ico يقرؤها كل متصفح بوصفها فافيكون، ويقرؤها Windows للتطبيق والاختصار والمجلد. والأحجام لك تختارها أدناه.

أيقونة macOS — .icns ما تحمله حزمة تطبيق Mac. وتُسمّي Apple عشر خانات بالضبط، من 16 بكسلاً إلى 1024، فلا شيء يُختار: تدخل العشر جميعاً، مرسومةً من سبع عمليات رسم لأن خانة Retina والحجم الذي فوقها هما الصورة نفسها.

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

ماذا تصنع

الأحجام التي تدخل في ملف ‎.ico‎

كيف تُرسَم

3 تحقّق منها بالحجم الذي سترى به

هذا هو الجزء الجدير بالنظر قبل أن تنزّل شيئاً. فالشعار الذي يُقرأ قراءة تامة عند 512 بكسلاً يصير عرضه ستة عشر بكسلاً في تبويب المتصفح، وأجزاؤه الرفيعة — خطوط الكلمة، وحدٌّ شعري، وتدرّجٌ لوني — لا تنجو من ذلك. وكل مربع أدناه مرسوم بحجمه الحقيقي من الملف الذي اخترته.

عرض بصيغة Markdown

كيف تصنع ملف ‎.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 واحد.

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

كيف تصنع فافيكون يظل مقروءاً عند ستة عشر بكسلاً أيَّ مقاسات يحتاج ملفُّ favicon.ico فعلاً، وأيَّ ملفات إضافية تطلبها هواتفُ iPhone وأجهزةُ Android وأجهزةُ Mac، ولماذا يختفي شعارٌ ينجح على ملصق عند ستة عشر بكسلاً.

أسئلة

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

لا. يفكّ متصفحك أنت ترميز الصورة ويحجّمها على جهازك أنت، ويُجمَّع ملف ‎.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 وحلّ أحدهما محلّ الآخر. ويُصنَع كل خَرج أشّرت عليه لكل صورة. وانقر أي صف لتضع تلك الصورة في المعاينة.

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

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

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

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