مولد Faviconكل الأحجام، ومعها كتلة head الجاهزة.
أفلت شعارًا واحصل على ملف favicon.ico حقيقي متعدد الدقات، وأحجام PNG التي تطلبها المتصفحات، وأيقونة apple touch، وأيقونة maskable لأندرويد، وملف site.webmanifest مملوءًا مسبقًا. كل ذلك يُنتَج داخل هذا التبويب، وصورتك لا تُرفع أبدًا.
أفلت شعارك هنا
أو اضغط لاختيار ملف. أفضل نتيجة تأتي من صورة مربعة بحجم 512 بكسل أو أكبر.
PNG أو JPG أو WebP أو SVG أو ICO أو GIF
تُقرأ صورتك ويُعاد تحجيمها وتُحزَّم داخل هذا التبويب. لا تُرفع أبدًا، ولا يتدخل أي خادم في أي مرحلة.
ما أحجام الـ favicon التي تحتاجها فعلًا في 2026؟
أقل بكثير من حزم العشرين ملفًا التي ما زالت معظم المولدات توزعها. خمسة مواضع تغطي كل متصفح وكل نظام تشغيل يستحق الاهتمام، وما بعدها وزن زائد في وسم <head> بلا فائدة.
favicon.ico، بأحجام 16 و32 و48
ما زال الملف الذي يبحث عنه المتصفح في جذر نطاقك قبل أن يقرأ سطرًا واحدًا من HTML. حاوية واحدة تحمل الأحجام الثلاثة، ولهذا يبني هذا المحول ملف .ico حقيقيًا بدل إعادة تسمية صورة PNG. حجم 16 بكسل للتبويب، و32 بكسل لتبويب الشاشات عالية الدقة وشريط المفضلة، و48 بكسل لاختصارات ويندوز.
favicon.svg، إن كان لديك ملف متجهي
الأيقونة المتجهية حادة في كل الأحجام، بل يمكنها الاستجابة للوضع الداكن في النظام عبر media query مكتوبة داخل الملف نفسه. والمتصفحات التي تفهمها تفضلها على ملف .ico. وإذا رفعت ملف SVG هنا فسيبقى متجهيًا، ولن يُحوَّل إلى نقاط ويُعاد إليك بوصفه متجهيًا.
apple-touch-icon.png، بحجم 180×180
الأيقونة التي يستخدمها iOS حين يضيف أحدهم موقعك إلى الشاشة الرئيسية. ملف واحد يكفي: فمنذ iOS 8 يصغّر النظام أيقونة واحدة بحجم 180 بكسل بنفسه، وبذلك صارت الكومة القديمة من apple-touch-icon-57x57 حتى 152x152 حملًا زائدًا. هذه الأداة تكتب ملفًا واحدًا وتجعله غير شفاف.
android-chrome بحجمي 192 و512، ومعهما maskable
يُشار إليها من ملف site.webmanifest لا من وسم link. حجم 192 بكسل للشاشة الرئيسية، و512 بكسل لشاشة البدء ولنافذة التثبيت. أما نسخة maskable فهي التي يقصها أندرويد حسب الشكل الذي يستخدمه المشغّل، ولذلك يحتاج رسمها إلى هامش حقيقي.
mstile-150x150.png، تكلفة الاحتفاظ بها زهيدة
ما زالت المواقع المثبّتة في ويندوز تقرؤها. تكلفتها صورة PNG صغيرة ووسما meta، لذلك أدرجناها، لكن لا شيء ينكسر إن حذفتها. هذه هي الإجابة الصريحة، ولهذا جاءت في آخر القائمة بدل تقديمها على أنها ضرورية.
لماذا يحتوي ملف .ico واحد على عدة صور؟
لأن .ico صيغة حاوية لا صيغة صورة. وفهم ذلك هو الفرق بين أيقونة تظهر في كل مكان وأيقونة تفشل بصمت على ويندوز وفي قارئات الخلاصات.
أولًا فهرس، ثم الصور
يبدأ الملف برأس من 6 بايتات يذكر عدد الصور التالية، ثم مدخلًا من 16 بايتًا لكل صورة يحمل عرضها وارتفاعها وطولها بالبايت وموقعها داخل الملف، وبعد ذلك فقط تأتي بيانات الصور. كل ذلك بترتيب little-endian. وهذه البنية هي سبب أن صورة PNG أعدتَ تسميتها إلى .ico ليست ملف .ico.
من يقرأ الملف هو من يختار الحجم
المتصفح الذي يرسم تبويبًا بحجم 16 بكسل يقرأ الفهرس، ويجد المدخل الخاص بـ16 بكسل، ويفك ترميزه وحده. أعطه صورة واحدة بحجم 512 بكسل فسيصغّرها لحظة الرسم، بمعاينة رخيصة ونتيجة ضبابية. وأعطه صورة 16 بكسل مصنوعة لهذا الغرض فسيستعملها كما هي.
البيانات في الداخل يمكن أن تكون PNG
كانت الصيغة الأصلية تضمّن BMP بترتيب بكسلات مقلوب وقناع شفافية منفصل من بت واحد. وكل متصفح وكل إصدار ويندوز منذ Vista يقبل أيضًا صور PNG داخل الحاوية، وهو ما يكتبه هذا المحول: ملفات أصغر، وقناة ألفا حقيقية، وبلا مرمّز قديم.
الجودة تظهر عند 16 بكسل
تصغير شعار من 1024 بكسل إلى 16 بكسل دفعة واحدة يأخذ عينات من بكسلات أصلية قليلة جدًا فيمنحك بقعة رمادية. تنصّف هذه الأداة الصورة على لوحات وسيطة، من 1024 إلى 512 إلى 256 وهكذا، حتى تسهم كل بكسل في النتيجة. وهذا وحده سبب بقاء الأيقونة الصغيرة مقروءة.
هل ما زلت بحاجة إلى apple-touch-icon؟
نعم، وهو الملف الوحيد الذي تختلف قواعده عن بقية أيقونات الحزمة. أمران ينبغي معرفتهما، وكلاهما مُعالَج لك أعلاه.
يتخلص iOS من الشفافية
يركّب Safari أيقونة الشاشة الرئيسية فوق الأسود لا فوق الخلفية، فيصل الشعار الذي صدّرته بعناية بخلفية شفافة على هيئة شكل يطفو فوق مربع أسود. لهذا تكتب الأداة ملف apple-touch-icon دائمًا بخلفية غير شفافة، بيضاء افتراضيًا، حتى لو اخترت الشفافية لكل ما عداه. ومنذ iOS 7 لم يعد النظام يضيف لمعانه الخاص، فما تسلّمه هو ما يراه الناس.
أندرويد يقص ولا يضيف هامشًا
يأخذ مشغّل أندرويد الأيقونة maskable ويقصها إلى شكله الخاص، دائرة أو squircle أو مربعًا مستدير الزوايا بحسب الهاتف. والمضمون بقاؤه هو 80% الوسطى فقط، لذلك يفقد الشعار الذي يملأ اللوحة من حافة إلى حافة أطرافه. هنا يحتفظ الملف maskable بهامش 20% مهما ضبطت المؤشر، وتُظهر لك المعاينة الدائرية بالضبط ما سيبقيه المشغّل.
كيف أضيف أيقونة favicon إلى موقعي؟
خطوتان، والأخطاء تتركز في الثانية. انسخ الكتلة التي تولدها الأداة بدل كتابتها من الذاكرة.
ضع الملفات في الجذر
ضع favicon.ico وبقية الملفات بجوار index.html، حتى تستجيب على yoursite.com/favicon.ico. فالمتصفحات تطلب هذا المسار بالذات من تلقاء نفسها ودون أن يخبرها أحد، ولهذا يزن موضع الملف أكثر من وسم link.
الصق كتلة head في كل صفحة
لا في الصفحة الرئيسية وحدها. فمن يصل إلى صفحة داخلية ويحفظها في مفضلته ينبغي أن يحصل على الأيقونة الصحيحة. وإن كان موقعك يعمل بقالب أو إطار عمل، فمكان الكتلة هو التخطيط المشترك.
صرّح عن .ico بلا حجم
استخدم rel="icon" href="/favicon.ico" sizes="any". فالأحجام موجودة أصلًا داخل الحاوية، وتثبيت أحدها في الشيفرة يمنع المتصفح من الوصول إلى البقية. ويأتي سطر SVG أولًا كي تختاره المتصفحات التي تفهم الملفات المتجهية.
ثم أعد التحميل تحميلًا قسريًا مرتين
تُخزَّن أيقونات المواقع مؤقتًا بشراسة وبمعزل عن الصفحة، فقد تصمد أيقونتك القديمة أمام إعادة تحميل عادية أيامًا. افتح الملف مباشرة على yoursite.com/favicon.ico للتأكد من أن الملف الجديد هو ما يُقدَّم فعلًا قبل أن تستنتج أن شيئًا معطل.
تريد معرفة الوجهة الحقيقية لرمز QR أو رابط قصير موجود من قبل؟ فك شفرته بأداة قراءة رموز QR
تحتاج رابطًا قصيرًا يرافق الموقع الجديد؟ أنشئ واحدًا بأداة اختصار الروابط المجانية
الأيقونة هي النصف الصغير من الانطباع الأول.
أيقونة الموقع شيء يراه الناس بعد أن يصلوا إليك. أما العمل الأصعب فيقوم به الرابط الذي جاء بهم، وهو غالبًا الجزء الذي لا يقيسه أحد. إن كان هذا يعنيك، فـLinkScale هو ما نبنيه.
اعرف من أين جاءت الزيارة
النقرات والدول والأجهزة وما حدث بعد ذلك، لكل رابط توزعه، بدل رقم واحد في لوحة تحكم شخص آخر.
غيّر الوجهة لاحقًا
وجّه رابطًا مطبوعًا أو منشورًا إلى مكان آخر بعد نشره، دون أن تطلب من أحد تحديث ما حفظه.
صفحة واحدة لكل شيء
صفحة link in bio تجمع المتجر ونموذج الحجز وحسابات التواصل، حتى يذهب الرابط الوحيد المسموح به أبعد.
أسئلة عن مولد Favicon
مجاني، بلا حساب وبلا علامة مائية وبلا حد لعدد الملفات التي تنشئها. وصورتك لا تُرفع أبدًا: تُقرأ عبر FileReader الخاص بالمتصفح، وتُرسم على canvas، وتُحزَّم في كائنات Blob، وكل ذلك داخل الصفحة. ولا توجد أي نقطة نهاية خلف هذه الأداة، أي أنه لا مكان تُرسَل إليه أصلًا. ويمكنك التأكد بفتح تبويب الشبكة في متصفحك أثناء الاستخدام، أو بقطع الاتصال بالإنترنت بعد تحميل الصفحة.
اذهب أبعد مع LinkScale
انتهت الأيقونة. أما الرابط الذي يجلب الناس فهو النصف الآخر.
LinkScale منصة لإدارة الروابط لمن يريد أن يعرف ما يحدث بعد النقرة، وأن يغيّر الوجهة دون إعادة طباعة أي شيء.
Free 14-day trial on every plan