نحوه قرار دادن فاوآیکن (favicon) در نوار آدرس وبلاگ و سایت

نحوه قرار دادن فاوآیکن (favicon) در نوار آدرس وبلاگ و سایت

فاوآیکن یا favicon، آیکن کوچکی است که معمولا در گوشه نوار آدرس، کنار نشانی های وب نمایش داده می شود که می تواند معرف لوگوی آن پایگاه یا محتویات صفحه مورد نظر باشد، استفاده از فاوآیکن به نمایش در نوار آدرس مرورگر محدود نمی شود، بلکه می توان از آن به عنوان لوگو و نشان، در فید های آر اس اس یا قسمت مربوط به بوکمارک ها در مرورگر کاربران استفاده کرد، به همین دلیل بیشتر سایت ها و وبلاگ های حرفه ای ترجیح می دهند حتما از یک آیکن مناسب و منحصر به فرد برای این منظور استفاده کنند؛ نگاه به پیشینه استفاده از این تکنیک نشان می دهد که در ابتدا تنها فرمت ico توسط مرورگرها پشتیبانی می شد اما به مرور و با پیشرفت تکنولوژی وب، فرمت های استاندارد gif، jpeg و png نیز توسط مرورگرهایی نظیر فایرفاکس، سافاری و اپرا پشتیبانی شد، با این وجود مرورگر پردردسر اینترنت اکسپلورر همچنان در نمایش این فرمت ها به عنوان آیکن، مشکلاتی دارد.

چگونه یک آیکن برای قرار دادن در نوار آدرس بسازیم؟

برای ساخت یک آیکن با فرمت ico نیاز به برنامه هایی تحت عنوان سازنده آیکن دارید برای مثال axialis iconworkshop انتخاب مناسبی است، سپس در فتوشاپ آیکنی در ابعاد 16×16، 32×32 یا 64×64 پیکسل با طرحی دلخواه و با فرمت png بسازید (در نهایت ما به اندازه 16×16 پیکسل نیاز داریم)، سعی کنید از ترکیب رنگی یک دست و به صورت متمایز استفاده کنید، مثلا از رنگهایی که شباهت زیادی به هم دارند یا از سایه ها کمتر استفاده کنید، چرا که با کوچک شدن آیکن، وضوح تصویر نیز کاهش می یابد و ممکن است فرم مورد نظر را از دست بدهد، آزمون و خطا روش خوبی است تا به انتخاب ایده آل خود نزدیک شویم؛ سپس تصویر مورد نظر را وارد برنامه سازنده آیکن کنید و با اندازه 16×16 پیکسل و ترجیحا با استاندارد رنگی true colors از آن خروجی بگیرید، آنگاه فایل خروجی را در سروری آپلود و آدرس آن را در لینک زیر جایگزین نمائید و کد را در قسمت هدر صفحه یا قالب (بین تگهای head) قرار دهید.

کد قرار دادن آیکن در نوار آدرس، سازگار با تمام مرورگرها

همانطور که گفتیم، فرمت استاندار favicon، فرمت ico است، اما برخی از مرورگرها از فرمتهای دیگر نیز پشتیبانی می کنند، به هرصورت کد زیر به صورت استاندارد برای این کار استفاده می شود. 

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

کد قرار دادن آیکن در نوار آدرس، سازگار با برخی از مرورگرها

مرورگرهایی نظیر فایرفاکس از آیکن های متحرک (با فرمت gif) نیز پشتیبانی می کنند، به عنوان یک ترفند می توانید هر دو روش را با هم استفاده کنید تا در مروگرهایی که از این فرمت پشتیبانی نمی کنند، آیکن ساده نشان داده شود و در سایر مرورگرها، به صورت متحرک.

<link rel="icon" type="image/gif" href="http://yoursite.com/gif-favicon.gif" />

چند توصیه:
- بهتر است از آیکن های متحرک استفاده نکنید، چرا که نظر کاربران به جای اینکه به مطالب سایت یا وبلاگتان جلب شود، بیشتر به آیکن متحرک در نوار آدرس جلب می شود.
- اندازه فایل را در حد امکان کم حجم ایجاد کنید، ارزش این کار مخصوصا زمانی که کاربران با وسایلی نظیر تلفن همراه در حال مرور صفحات یا فید آر اس اس وبلاگ یا سایتتان هستند، مشخص می شود.
- سعی کنید آیکنی ساده و واضح بسازید، به یاد داشته باشیم که فاوآیکن تنها یک نشانه است و قرار نیست تمام محتوای صفحات خود را در آن نشان دهیم.