المشروع - كل ما يتعلق بتطوير المواقع http://www.almashroo.com/

كلمة Favicon هي اختصار Favourite icon (وتنطق Fav – eye – con)، وهي عبارة عن صورة صغيرة بحجم 16*16 بكسل وفي بعض الأحيان تكون 32*32 بكسل تظهر بجانب رابط الموقع في الأعلى وفي المفضلة Favourite، وقد أنشأت شركة Microsoft هذه الخاصية لمتصفحها Internet Explorer ثم بدأت بقية المتصفحات باعتمادها.

فائدة Favicon

يقوم الزائر في العادة بتخزين العديد من المواقع في مفضلته، وقد يكون موقعك من ضمنهم، وأغلب هذه المواقع يكون بجانب اسمها صورة ورقة أو إشارة e أو ماشابه، وهي علامة موحّدة، فماذا لو كان موقعك لديه صورة خاصة؟ بالتأكيد ستجذب الصورة انتباه الزائر كلما مر على مفضلته وهذا يجعله في متابعة مستمرة لموقعك، ولها فوائد أخرى.

مواقع تستخدم Favicon:

• Google
• Yahoo
• MSN
• Slashdot

وغيرها الكثير.

طرق صنع Favicon

هناك عدة طرق لصنعه، وسأورد هنا بعضاً من هذه الطرق:

• برامج صنع الصور ذات امتداد (.ico): برنامج IconForge متخصص في صنع الإيقونات ذات الامتداد ico.
• رسم Favicon أون لاين من الإنترنت: هناك العديد من المواقع تقدم أدوات لرسم الـFavicon الخاص بك:
  • ارسم الـfavicon الخاص بك.
  • ImageAuthor أداة رائعة جداً وشبيهة ببرامج الجهاز، تستطيع صنع ايقونتك فيها أو فتح صورة من جهازك والتعديل عليها كما تريد بالإضافة إلى العديد من الميزات والخواص الرائعة.
  • اكتب ما تريد في ايقونتك الخاصة من هذا الموقع.
• اختر أحد الصور من هذا الموقع وخزنها لديك لاستخدامها Favicon لموقعك.
• تصميم Favicon بأي برنامج رسم أو تصميم ثم تحويله Favicon.
• استخدام أي صورة لديك وتصغيرها تلقائياً باستخدام الأدوات التي سأذكرها في النقطة التالية.

أغلب هذه الطرق تؤدي لصناعة صورة صغيرة لكن كيف نحوّلها إلى Favicon؟

• اضغط بالزر الأيمن على الصورة في جهازك، واختر rename (إعادة تسمية) ثم قم بتغيير الامتداد من gif أو jpg أو غيرها إلى ico.
• توجد مواقع كثيرة تقوم بأخذ الصورة منك مهما كان نوعها وصغيرة كانت أو كبيرة، وتصغرها تلقائياً لك بحجم 16*16 بكسل وتجعلها بامتداد .ico :
  • الموقع الأول
  • الموقع الثاني
  • الموقع الثالث
  • الموقع الرابع (يمكنك أيضاً وضع رابط صورة من الآنترنت ويحولها لك ويصغّرها).
• يوجد أيضاً برنامج يقوم بتحويل الامتداد من PNG إلى ICO ويمكنك تحميله من هنا.

إنشاء Favicon متحرك

لعلك لاحظت صورة الكرة النطّاطة بجانب رابط الموقع في ديفبيديا، فكيف ننشئ Favicon متحرك؟

هناك عدّة طرق منها:

• بعد تصميم صورة متحركة أو أخذ أي صورة متحركة بامتداد gif ، اضغط عليها بالزر الأيمن ثم اختر rename (إعادة تسمية) وغير gif إلى ico
• استخدم أداة (ImageAuthor) – التي ذكرتها في الأعلى- في فتح الصورة المتحركة ثم تخزينها بصيغة ico

تركيب Favicon في الموقع

بعد انتهائنا من صنع الإيقونة، علينا تركيبها الآن في الموقع، والطريقة سهلة جداً.

ارفع إيقونة favicon في المجلد الرئيسي لموقعك، وفي العادة يكون اسم المجلد هو (Public HTML)، ارفع الصورة عليه فقط وستظهر الصورة في كل صفحات موقعك دون أي جهد منك، لكن تذكر أن ترفعه في المجلد الرئيسي للموقع، والسبب أن المتصفحات مبرمجة على أساس أنها تفحص المجلد الرئيسي فإن كان يحتوي على صورة بإسم (favicon.ico) يقوم باعتمادها للموقع تلقائياً، فلاتنسى أن الإسم يجب أن يكون (favicon.ico) فقط.

لكن ماذا تفعل إن أردت أن تضع الصورة في مجلد آخر؟ أو أردت أن تجعل لإحدى الصفحات أو المجلدات صورة خاصة بها وحدها؟

إذاً، ينبغي عليك وضع هذا الكود بين وسمي head:

<link rel="icon" href="http://example.com/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/x-icon">

غيّر المسار إلى مسار Favicon لديك.

إذا كان موقعك يعتمد لغة XHTML فضع / قبل وسم > ليصبح هكذا:

<link rel="icon" href="http://example.com/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/x-icon" />

وهكذا تكون قد وضعت Favicon الخاص بك في الصفحة المحددة.

سؤال شائع: إذا وضعت Favicon في المجلد الرئيسي ثم وضعت واحداً آخر في أحد المجلدات ووضعت كوده بحيث يظهر الثاني في المجلد المطلوب، فهل سيتم اعتماد Favicon الخاص بالمجلد أم سيظهر Favicon الرئيسي المعتمد للموقع؟

الجواب هو أن Favicon المخصص للملجلد هو الذي سيظهر، أما Favicon الرئيسي سيظهر في بقية أجزاء الموقع التي لم تضع كوداً خاصاً Favicon آخر.

التأكد من صحّة كود Favicon

بعد انتهائك من تركيب Favicon الخاص بك، أظن أنك تريد فحصه بمدقق خاص بالإيقونات حتى تتأكد أن ماقمت به صحيح، ضع رابط موقعك في هذا الموقع، وستظهر لك النتائج.

ملاحظات

1. إذا كان لديك خيارين بين تغيير امتداد الصورة بطريقة rename أو أن تحملها على أحد المواقع المذكورة ويحوله لك، فاختر الثانية لأنها أفضل.
2. إذا صنعت إيقونتك بنفسك، فاجعل ألوانها قليلة، ولتكن معبرة ولو بشيء بسيط عن الموقع.
3. في المقال وضعت شفرتين تضعهم في head، فضع الإثنين مع بعضهما فهذا أفضل من وضع واحد فقط.