How to make a favicon طريقة صنع favicon

Posted on April 10, 2008 at 5:10 am على موقع 10 نيسان / ابريل 2008 في الساعة 5:10

Looking for a way to create a FavIcon ? هل تبحث عن وسيلة لايجاد favicon؟ If you browse the web regularly, you’ve probably noticed that a lot of sites have a small icon that appears in front of the website address in your browser or bookmarks. اذا كنت تصفح شبكة الانترنت بانتظام ، وربما كنت قد لاحظت ان الكثير من المواقع ايقونه صغيرة على ما يبدو في الجبهة من عنوان موقع ويب في المتصفح او الاشارات المرجعيه. Many websites use favicons (aka Favorite Icon) as a way to brand their website, so that when you see that icon, you automatically know which company or product it represents. الانترنت وفي العديد من المواقع favicons (يعرف ايضا باسم على ايقونه المفضلة) كوسيله لالعلامه التجارية على الموقع الالكتروني ، حتى عندما ترى ان ايقونه ، انت تعرف تلقائيا الشركة أو المنتج الذي تمثله.

For example, take a look at your address bar right now and you’ll notice that to the left of URL is a small icon that looks like a grid: فعلى سبيل المثال ، الق نظرة على شريط العنوان الخاص بك الآن وأنت سوف تلاحظ ان الى يسار العنوان هو رمز صغير أن يشبه الشبكه :

Also, if I look at my Firefox Bookmarks or IE Favorites, I also see the same favicons next to any websites that are using them: ايضا ، اذا كان لي ان ننظر في بلدي او اي اشارات مرجعيه من فايرفوكس المفضلة ، وأود ايضا ان نرى نفس favicons بجانب اي المواقع التي تستخدم فيها :

Using a FavIcon for your site is a good practice as it helps visitors to quickly identify your site among large numbers of bookmarks, etc. So how do you go about creating a FavIcon for your site? باستخدام favicon موقعك لممارسة جيدة لأنها تساعد الزوار على وجه السرعه لتحديد موقعك بين اعداد كبيرة من الاشارات المرجعيه ، وما الى ذلك كيف أذهب حول انشاء لfavicon موقعك؟

How to make a FavIcon طريقة صنع favicon

The first step in creating a FavIcon is to actually find a picture or create a graphic that you want to use as your icon. الخطوة الأولى في انشاء favicon فعلا هو ايجاد او خلق صورة بيانية التي تريد استخدامها على النحو رمزك. A FavIcon always has a 16×16 pixel dimension, so you should be very careful when choosing or creating your own picture. أ favicon دائما لديها 16 × 16 بكسل والبعد ، لذلك يجب ان تكون شديدة الحذر عند اختيار او خلق صورة خاصة بك.

Try to find an icon or graphic that has very little going on with it in terms of design. في محاولة لايجاد اي رمز او الرسوم البيانيه قليلة جدا ان يجرى معها من حيث التصميم. The simpler graphic you can find, the better your FavIcon will turn out. الأبسط والرسوم البيانيه يمكنك ان تجد ، كلما كان ذلك افضل favicon الخاص بك تعود. Also, make sure that the graphic is a square, so basically where the length and width are equal. ايضا ، للتأكد من ان الرسوم البيانيه هي مربع ، وذلك اساسا حيث الطول والعرض متساويه. If you have a portrait or landscape picture, it will be resized to 16×16 and therefore become either stretched or squished. اذا كان لديك صورة او صورة والمناظر الطبيعيه ، سيكون بحجم ثانية الى 16 × 16 ، وبالتالي تصبح إما لضغوط او مسحوق.

You can also create your own image using Microsoft Paint or similar photo editing software. يمكنك ايضا انشاء صورتك تستعمل مايكروسوفت الطلاء او ما شابهها من برامج تحرير الصور. When you are done, make sure you save the file into GIF, JPG, PNG, or BMP format. عند الانتهاء منها ، تأكد من حفظ الملف في جي. آي. اف ، jpg ، PNG ، BMP او شكل.

Now that you have your image, go to بعد ان قمت بتعديل الصورة ، اذهب الى DynamicDrive Dynamicdrive and let’s use their FavIcon generator to create our FavIcon from the picture. ودعنا استخدام مولد favicon لانشاء لدينا favicon من الصورة.

Go ahead and browse to the location of your image file and then choose Create Icon . واستعرض المضي قدما الى مكان ملف الصورة وتهيئة ثم اختر الايقونه.

And really that’s it! وهذا هو حقا! You’ll now get a preview of how your FavIcon would look in an actual browser and you can either proceed to download the FavIcon or you can simply choose another image. يمكنك الان الحصول على معاينه favicon كيف سينظر في متصفح الفعليه ويمكنك اما المضي قدما لتحميل favicon او يمكنك ببساطة اختيار صورة اخرى.

What I like about this site is that it also gives you instructions on how to install a FavIcon to your website, which is a little bit harder than actually creating the FavIcon itself. ما احب عن هذا الموقع هو انه يتيح لك ايضا على تعليمات حول كيفية تركيب favicon إلى موقع الويب الخاص بك ، وهي قليلا في الواقع اصعب من تهيئة favicon نفسها. Here’s what you need to do: اليك ما عليك القيام به :

First, download the file and then upload the FavIcon, which by the way should be named “ FavIcon.ico ” to the ROOT directory of your site. اولا ، وتحميل الملف ثم تحميل favicon ، من خلال الطريقة التي ينبغي ان يكون اسمه "favicon.ico" الدليل الرئيسي لموقعك. It’s very important that the file be named favicon.ico and that it be located in the root directory on your web server. من المهم جدا ان الملف المسمى ب favicon.ico وانه يقع في الدليل الرئيسي على خدمة الويب الخاص بك. You can verify that you uploaded it correctly by typing يمكنك التحقق من ذلك قمت بتحميله بشكل صحيح من قبل الطباعه

http://mysite.com/favicon.ico http://mysite.com/favicon.ico

in the browser’s location, where “mysite.com” is your web site’s Internet address. في الموقع في المتصفح ، حيث "mysite.com" هو موقع الويب الخاص بك على شبكة الانترنت العنوان. Now you need to insert one line of code into the <HEAD> section of your web sites pages. الآن انت بحاجة الى من سطر واحد تضاف الى قانون <head>قسم صفحات مواقع الويب الخاصة بك. Note that this code has to be on every page that you want the FavIcon to appear for. علما بأن هذا القانون ان يكون في كل صفحة تريد ان تظهر للfavicon. This is easy if you have a site that uses templates and pulls in header, footer, and other files individually. وهذا هو السهل اذا كان لديك موقع ان يستخدم في قوالب وتأثيرات على رأس الصفحه وذيلها ، وغيرها من الملفات على حدة.

If all of your pages are static and you do not use templates or includes, you’ll have to manually edit the HTML in each page. اذا كانت جميع صفحات موقعك ساكنة وكنت لا يشمل استخدام النماذج أو ، سيكون لديك يدويا لتحرير لغة تأشير النص الفائق في كل صفحة. The line of code you’re going to want to add is as follows: خط المدونه الذهاب إلى كنت ترغب في إضافة ما يلي :

<link rel=”shortcut icon” href=”/favicon.ico”> <linkrel="shortcut icon" href="/favicon.ico">

The icon may not show up immediately, so be patient. الايقونه قد لا تظهر على الفور ، حتى ان نتحلى بالصبر. Also, sometimes it doesn’t appear at all, especially with IE as there is a browser bug. ايضا ، في بعض الاحيان لا يبدو على الاطلاق ، لا سيما مع وجود اي متصفح علة.

Hopefully with this short tutorial you have been able to create a FavIcon and get it up and working on your site. ونأمل مع هذا البرنامج التعليمي قصيرة تمكنتم ايجاد favicon والحصول عليها والعمل على موقعك. If you have any questions, feel free to post a comment! اذا كان لديك اي اسءله ، لا تتردد في ارسال تعليق! Enjoy! يتمتع!