الـ Favicon وكل مايتعلق به { مقال مفصّل }

السلام عليكم ورحمة الله وبركاته

السلام عليكم ورحمة الله وبركاته..

في هذه المقال، سأتحدث عن الـFavicon وكل مايتعلق به بشكل مفصّل

+ مقدمة في الـFavicon :
كلمة (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 الخاص بك:
1- ارسم الـfavicon الخاص بك .
2- (ImageAuthor ) أداة رائعة جداً وشبيهة ببرامج الجهاز، تستطيع صنع ايقونتك فيها أو فتح صورة من جهازك والتعديل عليها كما تريد بالإضافة إلى العديد من الميزات والخواص الرائعة.
3- اكتب ما تريد في ايقونتك الخاصة من هذا الموقع .

- اختر أحد الصور من هذا الموقع وخزنها لديك لاستخدامها كـFavicon لموقعك.

- تصميم الـFavicon بأي برنامج رسم أو تصميم ثم تحويله لـFavicon.

- استخدام أي صورة لديك وتصغيرها تلقائياً باستخدام الأدوات التي سأذكرها في النقطة التالية.


+ السؤال الآن: أغلب هذه الطرق تؤدي لصناعة صورة صغيرة لكن كيف نحوّلها إلى Favicon ؟
هنا العديد من الطرق:
- اضغط بالزر الأيمن على الصورة في جهازك، واختر rename (إعادة تسمية) ثم قم بتغيير الامتداد من gif أو jpg أو غيرها إلى ico
- توجد مواقع كثيرة تقوم بأخذ الصورة منك مهما كان نوعها وصغيرة كانت أو كبيرة، وتصغرها تلقائياً لك بحجم 16*16 بكسل وتجعلها بامتداد .ico :
1- الموقع الأول .
2- الموقع الثاني .
3- الموقع الثالث .
4- الموقع الرابع (يمكنك أيضاً وضع رابط صورة من الانترنت ويحولها لك ويصغّرها).

- يوجد أيضاً برنامج يقوم بتحويل الامتداد من PNG إلى ICO ويمكنك تحميله من هنـــــا .


+ إنشاء Favicon متحرك:
- لعلك لاحظت صورة الكرة النطّاطة بجانب رابط الموقع في ديفبيديا، فكيف ننشئ Favicon متحرك؟
هناك عدّة طرق منها:
1- بعد تصميم صورة متحركة أو أخذ أي صورة متحركة بامتداد gif ، اضغط عليها بالزر الأيمن ثم اختر rename (إعادة تسمية) وغير gif إلى ico
2- استخدم أداة (ImageAuthor) - التي ذكرتها في الأعلى- في فتح الصورة المتحركة ثم تخزينها بصيغة ico


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

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

كود PHP:

---

<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 فضع / قبل وسم > ليصبح هكذا:

كود PHP:

---

<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 الخاص بك، أظن أنك تريد فحصه بمدقق خاص بالإيقونات حتى تتأكد أن ماقمت به صحيح، ضع رابط موقعك في هذا الموقع وسيظهر لك النتائج: اضغط هنا ، وإن شاء الله يكون كل شيء بخير معك


+ أخذ Favicon من أحد المواقع:
- لعلك رأيت بعض المواقع لها Favicon جميل، وتريد أن تضع واحداً مثله لموقعك، فكيف ستأخذه الآن؟
هنا عدّة طرق لهذا وسأورد أسهل طريقة فيهم، وهي طريقة الـSource Code :
- لنأخذ مثالاً موقع Google، افتح الموقع، ثم اضغط بالزر الأيمن واختر view source (عرض المصدر) أو أي اسم قريب منه حسب اختلاف المتصفحات.
بعد دخولك للسورس كود، ابحث عن كلمة favicon ..
لم تجدها؟ ، ما معنى هذا؟
يعني أن Google وضعت الـFavicon الخاص بها في المجلد الرئيسي للموقع حتى يتم تطبيقه على كل الصفحات، ولذلك لم يحتاجو لوضع الكود، إذاً يمكننا استخراج الصورة بكتابة favicon.ico إلى جانب رابط Google، هكذا:
http://www.google.com/favicon.ico
ظهرت الصورة الآن.. أتمنى أن الفكرة اتضحت الآن.

- لنأخذ مثالاً آخر: أنت الآن في DevPedia تريد أخذ الكرة التي تنط وتتحرك، فلنفتح السورس كود ونبحث... النتيجة:

كود PHP:

---

<link rel="shortcut icon" href="http://www.devpedia.org/articles/favicon.ico" /> 


---

إذا أخذنا الرابط منه، وفتحناه لوحده، سنرى الصورة:
http://www.devpedia.org/articles/favicon.ico

أصبح كل شيء بات واضحاً الآن.


أظن أنني أوضحت أغلب أو كل ما يتعلق بالـFavicon في هذا المقال، وإلى هنا انتهينا..

+ وفيما يلي ملاحظات هامة:
- إذا كان لديك خيارين بين تغيير امتداد الصورة بطريقة (rename) أو أن تحملها على أحد المواقع المذكورة ويحوله لك، فاختر الثانية لأنها أفضل.
- إذا صنعت إيقونتك بنفسك، فاجعل ألوانها قليلة، وتكون معبرة ولو بشيء بسيط للموقع.
- في المقال وضعت كودين تضعهم في الـhead، فضع الإثنين مع بعضهما فهذا أفضل من وضع واحد فقط.


+ مقالات مشابهة:
http://en.wikipedia.org/wiki/Favicon


:: كتبه المبدع العربي

========================= =======

المصدر:
http://www.devpedia.org/articles/index.php?p=23

منقول من سوالف سوفت للفائدة ... تحياتي .

جزاك الله خير ابو راشد طالما تسألت عن طريقة عمل هذه الأيقونة وها أنت تزيل الغموض.

معلومات طيبه
مشكور

بارك الله بك , شكراً أخي الكريم .. تحياتي

شكرا لك ... بارك الله فيك ...

شكرا لك ... بارك الله فيك ...

باركـ اللهآ فيكـ أخوي أبو راشد

كفيت ووفيت يالغلا

الله لا يحرمنا من إبداعاتك

.

بسم الله الرحمن الرحيم

وعليكم السلام ورحمة الله وبركاته

شكرا لك ... بارك الله فيك ...

الف شكر على الشرح الاكثر من رائع

الف شكر ابو راشد تم التجربة بنجاح

الله يبارك فيك

Notes:
This page has a valid favicon.ico but it does not use a favicon link tag (<link rel="shortcut icon" ...> or <link rel="icon" ...>). Although this is not a problem, the favicon link tag is likely to be more compatible with upcoming browser versions.

كل شي تمام ولا ظهر الايكون
جربته بالموقع اللي ارفقته انت للتأكد من صحة العمل
اكد لي انه كل شي تما بس هذي الملاحظه اللي طلعة
اتمنى منك التوجيه
وما قصرت يالغالي

[align=center]اخوي الغالي الف شكر على طرحك الرائع
واتمنى من الله ثم منك ان تتجاوب مع تساؤلي
واللي ارفقته لك بالرد السابق

وللتأكيد هو بكل حال تم انجاز الصوره
وتأسيسها من المواقع المقدمه للخدمه
بعدها تم رفع الصوره الى public html
وتفاجئت انه لم يتم تغيير الصوره
عزيزي اتمنى منك التوجيه الى الحل المناسب لتركيب الصوره
اعتذر على الاطاله
ولك كل الحب[/align]

السبب من الإتصال ... احيانا يستغرق التحديث ايام في بعض الدول وخاصة في السعودية مع بعض شركات الإنترنت ... تحياتي .

مبدع بارك الله فيك تقبل إحترامي

طلع عندي مثل الشباب اللي فوق

يعني ابي اتركها لي يوم واشوف وش النتيجة

بارك الله جهودكم

بارك الله فيك مشكور على الشرح

شكرا ابو راشد


بارك الله فيك

السلام عليكم

شكرا على الموضوع

عملت كل الخطوات ولكن اكثر من 3 اسابيع وماتغير شي

بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته

الاخ ابو راشد جزاك الله كل خير فعلاً استفدت منك موضوع تعبني وانا ابحث عنه


فلو لا الله ثم جهودك ما وجدت ضالتي

مع فائق الاحترام والتقدير

والسلام عليكم ورحمة الله وبركاته

https://mwadah.com/images/imgcache/2007/06/668.imgcache


https://mwadah.com/images/imgcache/2007/06/669.imgcache

https://mwadah.com/images/imgcache/2007/06/670.imgcache

مشكور يا عسل الله يخليك لنا ابو راشد ويخلي لك راشد ان شاء الله

شرح وافي ومفصل

تسلم والله يعطيك العافية

شـكــ وبارك الله فيك ـــرا ...

شـكــ وبارك الله فيك ـــرا ...

بارك الله فيك على الشرح الوافي ...

لاكن كل ماركبها لاتظهر في موقعي لماذا...

اذا اتبعت الشرح بطريقة صحيحة تطلع ولكن بعد فتره من التركيب لأن تحديث الكاش في بعض الأجهزة ومزودي النت يحتاج وقت يختلف من دولة لأخرى ومزود وآخر ومكان تواجد السيرفر وغيرها الكثير ... تحياتي .

جزاك الله خيرا وبارك فيك اخي ابو راشد

شـكــ وبارك الله فيك ـــرا ...

طيب يا ابوراشد بالنسبه للمنتدى المجانى
كيف اضع لى رمز
وجزاك الله خير

الله يعطيك العافيه يابو راشد


تم التركيب بس انتظر تطلع


والله لايهينك ولايحرمك من اجر المساعده

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

شكرا جزيل الشكراخي الكريم انا طبقت جميعالخطوات ولم اكمل ان شاءالله
اكملها على خير تقبل تحيتي وتقديري وبارك الله فيك
وزادك الله علما

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .

قمت بعمل جميع الخطوات صحيحه

ولكن لم يظهر :mwalat31:

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .