مُولّد أيقونات المواقع (Favicon) — إنشاء أيقونات الويب ووسوم الميتا مجاناً
Image Tools
جاري تحميل الأداة...
حول هذه الأداة
مُوَلّد فافيكون مجاني وخاص يعمل داخل المتصفح بدون خادم. أنشئ أيقونات مواقع متعددة المقاسات وتطبيقات PWA من الصور أو النصوص، مع توليد وسوم HTML كاملة.
كيفية الاستخدام
- اختيار نمط التصميم: حدد طريقة العمل المفضلة: من صورة (لرفع شعار علامتك التجارية أو تصميمك الخاص) أو من نص/إيموجي (لتوليد أيقونة فورية بحروف شعارك أو رمز تعبيري مميز).
- رفع الملف أو ضبط الألوان: للصور، اسحب وأفلت أي ملف بتنسيق PNG أو JPEG أو WebP بدقة عالية. وللنصوص، اكتب من 1 إلى 3 أحرف أو إيموجي، واختر لون الخلفية ولون الخط والشكل الخارجي (مربع، زوايا مستديرة، أو دائري).
- المعاينة الفورية بالأحجام الدقيقة: راقب كيف ستبدو الأيقونة مباشرة داخل المتصفح بأحجام 16×16 (ألسنة المتصفح)، و32×32 (شريط الإشارات)، و64×64 (شاشات Retina فائقة الكثافة).
- تنزيل حزم الأيقونات المقاسة: حمّل المقاسات المطلوبة بنقرة زر واحدة من مقاس 16 بكسل الصغير وحتى مقاس 512 بكسل المخصص لتطبيقات الويب التقدمية (PWA).
- نسخ وسوم الميتا البرمجية: انسخ كود وسوم
<link>المولد تلقائياً وألصقه مباشرة داخل وسم<head>في موقعك لدعم كافة المتصفحات والهواتف الذكية.
الأسئلة الشائعة
ما مقاسات الفافيكون التي تولدها الأداة ولماذا نحتاج مقاسات متعددة؟
تولد الأداة حزمة مقاسات كاملة بصيغة PNG تشمل: 16x16 و 32x32 و 48x48 و 64x64 و 128x128 و 180x180 و 192x192 و 512x512 بكسل. وتعد المقاسات المتعددة ضرورية لأن أنظمة التشغيل والمتصفحات تعرض الأيقونة في سياقات مختلفة تماماً: فألسنة المتصفح تحتاج 16 و 32 بكسل، بينما يحتاج شريط مهام ويندوز 48 بكسل، وتتطلب هواتف آيفون 180 بكسل لأيقونة الشاشة الرئيسية، وتعتمد تطبيقات الويب التقدمية (PWA) على أندرويد على مقاسي 192 و 512 بكسل لعرض شاشات البداية والتشغيل.
لماذا يتطلب متصفح Safari على هواتف iPhone أيقونة Apple Touch بخلفية غير شفافة؟
عندما يختار المستخدم 'إضافة إلى الشاشة الرئيسية' على هواتف آيفون أو أجهزة آيباد، يبحث نظام iOS عن أيقونة خاصة عبر الوسم `<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">`. ويقوم النظام تلقائياً بتطبيق زوايا مستديرة على الأيقونة. والأهم من ذلك أن نظام iOS لا يدعم الشفافية في أيقونات الشاشة الرئيسية، بل يحول أي منطقة شفافة إلى لون أسود قاتم ومشوه؛ لذا يُوصى دائماً باستخدام خلفية ملونة معتمة لأيقونة آبل.
هل يمكنني إنشاء فافيكون احترافي من أحرف اسم موقعي أو إيموجي بدون برامج تصميم؟
نعم بكل تأكيد؛ توفر الأداة محركاً مستقلاً لتوليد الأيقونات من النصوص والرموز التعبيرية. يمكنك كتابة من حرف إلى 3 أحرف (مثل الأحرف الأولى من اسم شركتك) أو إيموجي معبر، وتحديد لون الخلفية ولون النص، واختيار شكل الإطار الخارجي (مربع، زوايا مستديرة، أو دائري). يقوم المحرك بمحاذاة الحروف وتوسيطها بدقة في لوحة عمل 512x512 بكسل وتوليد كافة المقاسات تلقائياً.
كيف تتجنب الأداة تشوش وتغبيش الأيقونة عند تصغيرها إلى مقاس 16x16 بكسل؟
إن تصغير صورة ضخمة بدقة 1024 أو 2048 بكسل إلى 16 بكسل بنقلة واحدة يؤدي عادة إلى تلف الحواف وتشوه الخطوط الدقيقة. يعتمد محركنا داخل المتصفح على تقنية التصغير التدريجي متعدد المراحل (Stepped Decimation) بالتكامل مع خوارزميات الاستيفاء ثنائي التكعيب، حيث يتم تقليص أبعاد الصورة بالنصف تدريجياً حتى الوصول إلى المقاس النهائي، مما يحافظ على حدة الحواف والتباين اللوني.
أين يجب وضع ملفات الفافيكون المرفوعة داخل خادم الاستضافة؟
توصي المعايير القياسية لتطوير الويب بوضع كافة ملفات PNG وملف البيان في المجلد الجذري العام للموقع (Root Directory)، مثل: `https://example.com/favicon-32x32.png` و `https://example.com/apple-touch-icon.png`. كما تقوم المتصفحات بطلب مسار `/favicon.ico` تلقائياً عند زيارة الموقع؛ وتوفير الملفات في المجلد الرئيسي يضمن توافقها الكامل مع محركات البحث والمتصفحات القديمة.
لماذا يستمر المتصفح في عرض الأيقونة القديمة وكيف أجبره على التحديث الفوري؟
تقوم متصفحات الويب بتخزين ملفات الفافيكون مؤقتاً (Caching) في القرص الصلب للجهاز بشكل قوي جداً لتفادي طلبها مع كل لسان جديد، متجاهلة أحياناً أوامر التحديث لعدة أسابيع. لإجبار المتصفح على عرض الأيقونة الجديدة فوراً، أضف متغيراً في نهاية رابط الأيقونة داخل كود HTML (مثل: `<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=2">`) أو أعد تحميل الصفحة بالقوة بالضغط على Ctrl+F5.
هل يتم رفع شعارات شركتي وتصاميمي الخاصة إلى خوادم خارجية؟
كلا على الإطلاق. تعمل أداة مُنشئ الفافيكون بهندسة Serverless خالية من الخادم تماماً داخل متصفحك. تتم كافة عمليات قراءة الصور والتحجيم والرسم والتشفير محلياً في الذاكرة المؤقتة لجهازك. لا يتم إرسال أي صورة أو بيانات إلى خوادمنا أو أي طرف ثالث، مما يوفر أماناً وسرية مطلقة لهويات الشركات والعلامات التجارية الجديدة.
ما وسوم HTML الأساسية المطلوبة لدعم كافة المتصفحات الحديثة وتطبيقات PWA؟
تتطلب المعايير الحديثة إضافة وسوم الأيقونات الأساسية: `<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">`. وتوفر أداتنا هذا الكود كاملاً بضغطة زر واحدة لتنسخه مباشرة داخل وسم `<head>` بموقعك.
أدلة ودروس
أدلة شاملة لكل أداة. تعلم كيف تعالج بياناتك بخصوصية تامة، مجاناً، مباشرة في متصفحك.
اقرأ المزيد