اول. چگونه favicon را بسازیم؟
برای ساخت فوآیکون چهار راه را می توانید انتخاب کنید:

1- اگر فقط یکی دوتا آیکون لازم دارید این بهترین راه است: طرح مورد نظر را در یک فایل 16x16 پیکسل یا 32x32 پیکسل آماده کرده و فایل را با فرمت jpg یا gif ذخیره کنید. حال برای تبدیل پسوند به این سایت ویا این سایت بروید، فایل jpg یا gif را به سایت می دهید و خیلی سریع و ساده فایل ico را پس می گیرید.

2- اگر از این آدمهای فتوشاپ باز هستید ویا هر روز میخواهید دویست سیصدتا از این faviconها بسازید بروید از اینجا پلاگین Ico Format را دانلود و روی فتوشاپ نصب کنید. حالا تا قیام قیامت آیکون طراحی کنید و مستقیم از فتوشاپ با فرمت ico ذخیره کنید.

3- اگر از پلاگین وحشت دارید یا اصلا نمیدانید پلاگین چیست: یک برنامه ای هم هست به اسم png2ico که اگر از اینجا  دانلود و نصب کنید. می توانید فایلهای ذخیره شده با فرمت png را روی کامپیوتر خودتان تبدیل به فرمت ico کنید و حالش را ببرید.

4- و اگر خیلی از سه روش بالا سر در نیاوردید ویا حوصله نداشتید یا فتوشاپ خیلی راه دستتون نیست. این سایت را امتحان کنید. همانجا آیکون خود را بکشید و با یک کلیک دانلود کنید. انگار که باقلوا خورده باشید.

دوم. چطور در صفحه وب قرار دهیم؟
خب، حالا شما باید یک فایل به اسم favicon با پسوند ico داشته باشید. به این شکل: favicon.ico این فایل را در پوشه اصلی روی سرور خودتان آپلود کنید. و بعد دو خط کد ساده است که باید بین تگ <head>و <head\>صفحه وب تان قرار دهید. و تمام.

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

توضیح بیشتر: اگر در سایتتان صفحه ای دارید که می خواهید آیکون متفاوتی داشته باشد. آیکون مورد نظرتون رو در پوشه همان صفحه آپلود کنید.

توضیح بیشتر برای وبلاگ نویسها: اگر از سرویسهای مجانی وبلاگ استفاده می کنید هم می توانید برای وبلاگ خود favicon داشته باشید. اول یک سرور رایگان (مثل Sharemation) پیدا کنید تا بتوانید faviconخود را آپلود کنید، پس به قسمت "ویرایش قالب " رفته و همان کد بالا را بین تک <head> و <head\> قرار دهید.  با این تفاوت که بجای favicon.ico آدرس کامل آیکون آپلود شده را باید جایگزین کنید. در این حالت شکل کد شما چیزی شبیه به این خواهد شد:

<link rel="shortcut icon" href="http://www.FreeHost.com/example/favicon.ico">
<link rel="icon" href="http://www.FreeHostService.com/example/favicon.ico">

اگر مشکلی داشتید، بپرسید!

ارسال به بالاترین
جدیدترین‌ها
آخرین نوشته‌ها