لديك شعار أصلاً. ما تحتاجه هو تحويل ذلك الشعار إلى كومة ملفات الأيقونات الصغيرة التي يتوقّعها متصفح — favicon.ico، وحفنة PNG بمقاسات محددة، وwebmanifest، وHTML لربط كل ذلك. ذلك التحويل ميكانيكي، وتستطيع القيام به في نحو دقيقة دون تثبيت أي شيء.
المأزق أن ليس كل شعار يتصغّر برشاقة. لذا يغطّي هذا المسار السريع وكيف تصلح شعاراً يتحوّل إلى عجينة عند 16 بكسلاً.
النسخة المختصرة
- احصل على شعارك كصورة مربعة — مثالياً 512×512 أو أكبر، على خلفية شفافة أو خالصة.
- ضعه في مولّد Favicon.
- نزّل الطقم المولَّد وضع الملفات في جذر موقعك.
- الصق مقتطف HTML المقدَّم في
<head>.
تلك هي المهمة كلها. المولّد يُخرج favicon.ico، وملفات PNG بـ 16 و32 و48 و180 و192 و512، وملف webmanifest، ووسوم <link> الدقيقة — فلا تقصّ ست صور يدوياً أو تخمّن صيغة الmanifest.
حضّر شعارك أولاً — هنا تُكسَب الجودة أو تُخسَر
الـ favicon يعيش بـ 16×16 في لسان المتصفح. أي تفصيل لا يستطيع النجاة من ذلك المقاس مهدور. أنفق دقيقتين هنا فتبدو النتيجة حادة في كل مكان.
اجعله مربعاً. الأيقونات مربعة. شعار عريض أفقي سيُؤطَّر بأشرطة أو يُسحَق. اقصص إلى أكثر عنصر يمكن التعرّف عليه — عادة العلامة أو حرف أول واحد — ووسّطه في إطار مربع.
أسقط علامة الكلمة. اسم شركتك كاملاً لن يكون مقروءاً بحجم اللسان. "Acme Corporation" تصبح لطخة رمادية. أبقِ الرمز، أو حرفاً واحداً، ودع عنوان اللسان يحمل الاسم.
افحص التباين مقابل السمتين. ألسنة المتصفح تأتي فاتحة وداكنة. أيقونة كحلية داكنة تختفي على لسان داكن؛ وأيقونة شاحبة تختفي على فاتح. إن كانت علامتك لوناً مسطّحاً واحداً، تأكّد أن ذلك اللون يُقرأ على الاثنين. حدّ خفيّ أو رقاقة خلفية خالصة صغيرة قد تساعد.
اترك مساحة تنفّس. أضف قليلاً من الهامش داخل المربع كي لا تنحشر الأيقونة على الحواف. ستبدو أكثر توازناً في كل خانة.
ابدأ كبيراً. مصدر 512×512 (أو أكبر) يعطي المولّد تفاصيل نظيفة للتصغير منها. تكبير شعار صغير أولاً يطبع الضبابية فحسب.
خلفية شفافة أم خالصة؟
كلاهما ينجح — يعتمد على المظهر الذي تريده.
- الشفافة تدع خلفية اللسان أو الشاشة الرئيسية تظهر من خلالها. نظيفة وحديثة، وتتكيّف مع المحيط الفاتح/الداكن. الأفضل حين تكون علامتك شكلاً مميّزاً.
- رقاقة خلفية خالصة (مربع مدوّر ملوّن خلف العلامة) تضمن قراءة الأيقونة مهما كان خلفها. هذا ما تفعله معظم أيقونات التطبيقات، وهو الخيار الأأمن إن كان شعارك رفيعاً أو منخفض التباين.
عند الشك، رقاقة خالصة بلون علامتك هي الخيار المتين — لا تختفي أبداً في خلفية مطابقة.
بعد التنزيل: أين تذهب الملفات
المولّد يسلّمك طقم ملفات ومقتطفاً. قاعدتا وضع تغطّيان الأمر:
favicon.icoيذهب إلى جذر موقعك (/favicon.ico). المتصفحات وWindows تبحث عنه هناك بالاسم حتى بلا وسم<link>.- كل ما عداه يمكن أن يعيش حيث تحب طالما تطابق المسارات في مقتطف HTML. معظم الناس يضعونها كلها في الجذر ويلصقون المقتطف كما هو.
ثم إنه مجرد مقتطف <head> — روابط الأيقونات، وapple-touch-icon، ومرجع الmanifest. الصق، انشر، حدّث بقوة، وينبغي أن ترى شعارك في اللسان.
لماذا تفعله في المتصفح؟
لأن شعارك لا يغادر جهازك أبداً. العملية كلها — قراءة الصورة، تغيير المقاس إلى كل بُعد، حزم .ico، كتابة الmanifest — تحدث محلياً في متصفحك باستخدام Canvas. لا شيء يُرفع إلى خادم، ولا تسجيل ولا علامة مائية، وبعد زيارتك الأولى تعمل الأداة دون اتصال. لأصل علامة قد لا تكون نشرته بعد، إبقاؤه بعيداً عن خوادم الغير هو الافتراضي المنطقي.
بمجرد أن يصبح شعارك مربعاً وعالي التباين ومقروءاً صغيراً، يصبح توليد الطقم الكامل هو الجزء السهل.