اليوم جاي بدرس خفيف هو وضع ايقونه خاصه بموقعك في المتصفح بجانب الرابط مثل الياهو وغيره
وهذي صور توضيحيه للفكره
من المتصفح >>>
من المفضلة >>>

الطريقه بسيطه جدا اولا نحتاج برنامج محرر ايقونات
وانا استخدمت برنامج ArtIcons Pro 4.03
لتحميل البرنامج من هنا
الكراك من اخونا aa_sava جزاه الله الف خير

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

الان : نروح لبرنامج محرر الايقونات
وهذا شرح للبرنامج الي استخدمته

من قائمة File نختار Open

وبعد اختيار الصورة من نفس قائمة File نختار Save as

وفي الاخير نحفظ وهذي النقطه الاهم
يجب ان يكون اسم الصورة favicon والامتداد .ico

بكذا خلصنا من تجهيز الايقونه
نجي لتركيب في الصفحه
اولا حمل الصورة favicon.ico الى مجلد الموقع الرئيسي public_html
ومن الفرونت بيج اضف الكود هذا مع تغيير رابط موقعك

<LINK REL="SHORTCUT ICON" HREF="https://www.------.com/favicon.ico">
الكود يكون بين وسمي و
مثال لوضع الكود

<HEAD>
<LINK REL="SHORTCUT ICON" HREF="https://www.-----.com/favicon.ico">
<TITLE>الحلم الفلسطيني</TITLE>
</HEAD>
إنشاء Favicon متحرك:
- لعلك لاحظت صورة الكرة النطّاطة بجانب رابط الموقع في ديفبيديا، فكيف ننشئ Favicon متحرك؟
هناك عدّة طرق منها:
1- بعد تصميم صورة متحركة أو أخذ أي صورة متحركة بامتداد gif ، اضغط عليها بالزر الأيمن ثم اختر rename (إعادة تسمية) وغير gif إلى ico
2- استخدم أداة (ImageAuthor) - التي ذكرتها في الأعلى- في فتح الصورة المتحركة ثم تخزينها بصيغة ico
+ تركيب الـFavicon في الموقع:
- بعد انتهائنا من صنع الإيقونة، علينا تركيبها الآن في الموقع، والطريقة سهلة جداً:
ارفع إيقونة الـfavicon في المجلد الرئيسي لموقعك، وفي العادة يكون اسم المجلد هو (Public HTML)، ارفع الصورة عليه فقط وستظهر الصورة في كل صفحات موقعك دون أي جهد منك، لكن تذكر أن ترفعه في المجلد الرئيسي للموقع، والسبب أن المتصفحات مبرمجة على أساس أنها تفحص المجلد الرئيسي فإن كان يحتوي على صورة بإسم (favicon.ico) يقوم باعتمادها للموقع تلقائياً، فلاتنسى أن الإسم يجب أن يكون (favicon.ico) فقط.

- لكن ماذا تفعل إن أردت أن تضع الصورة في مجلد آخر، أو أردت أن تجعل لإحدى الصفحات أو المجلدات صورة خاصة بها وحدها؟
إذاً، ينبغي عليك وضع هذا الكود بين وسمي :
[/php]* غيّر المسار إلى مسار الـFavicon لديك
* إذا كان موقعك يعتمد لغة XHTML فضع / قبل وسم > ليصبح هكذا

<link rel="icon" href="https://example.com/favicon.ico" type="image/x-icon" /> 
<link rel="shortcut icon" href="https://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، هكذا:
https://www.google.com/favicon.ico
ظهرت الصورة الآن.. أتمنى أن الفكرة اتضحت الآن.

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

إذا أخذنا الرابط منه، وفتحناه لوحده، سنرى الصورة:

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

وبكذا انتهينا
وهذا موقع الي يحتاج معلومات اكثر
[****]
من هنا
[/****]


سلام

واى استفسار احنا حاضرين ان شاء الله