حتما تا کنون تصاویر کوچک یا آیکون کوچکی که در تب مرورگر ها یا محل نمایش عنوان سایت در مرورگر توجه شما را به خود جلب کرده است، این آیکون چیست و از کجا آمده و چگونه می توان از آن در سایت خود استفاده کرد. این تصاویر کوچک یا آیکون کوچک اصطلاحا favicon فاوآیکون نام دارد.
فاوآیکون چیست؟
فاوآیکون در واقع همان مخفف عبارت favorites icon می باشد.
فاوآیکون – Favicon یک نماد کوچک است که به عنوان نماد وب سایت شما محسوب می
شود و هدف اصلی آن کمک به بازدید کنندگان برای درک بهتر سایت، زمانی که چندین
برگه را همزمان در مرورگر خود باز دارند می باشد. با توجه به اندازه ریز فاوآیکون – Favicon
نباید آن را با لوگو سایت اشتباه گرفت ، اما بعضی اوقات ممکن است شکل آنها یکسان
باشد. مایکروسافت اولین بار در مارس ۱۹۹۹ در مرورگر IE5 از آن پشتیبانی کرد و با عنوان
shortcut icon در بخش head سایت قرار می گرفت اما سرانجام در دسامبر سال ۱۹۹۹
با توصیه کنسرسیوم جهانی وب گسترده (W3C) بصورت استاندارد در html قرار گرفت.
فاوآیکون در چه قسمتهایی نمایش داده می شود؟
فاوآیکون علاوه بر نمایش در زبانه یا تب مرورگر در بخش های دیگری مثل : بوک مارک یا
نشانها، سابقه مرورگر، سابقه جستجو نیز قابل مشاهده می باشد.
تاثیرات مثبت استفاده از فاوآیکن
در حال حاضر بیشتر افرادی که با اینترنت کار می کنند هر روز فاوآیکون های مختلفی را
می بینند. مغز ما تصاویر را زودتر از متون تجزیه و تحلیل می کند.زمانی که شما وبسایتی
را جست و جو می کنید با دیدن فاوآیکون ها بسیار راحت تر و سریع تر سایت مورد نظر
خود را پیدا می کنید. اگر شما تب های زیادی را در مرورگر خود باز کرده باشید چگونه وب
سایت مورد نظر خود را پیدا می کنید؟ در این موقعیت favicon به کمک شما می آیند و با
دیدن آیکن وبسایتی که مد نظرتان است به راحتی آن را پیدا می کنید.
چرا فاوآیکون ها مهم هستند؟
ایجاد یک فاوآیکون کار دشواری نیست اما استفاده از آن در ساخت سایت بسیار مهم و
با اهمیت می باشد. فاوآیکون برند شما را تقویت می کند و باعث حس اعتماد بیشتر در
مشتریان شما نیز می شود. این آیکون کوچک با تاثیر بصری که می گذارد می تواند برای
کاربران شناسایی آسان و سریعتر را امکان پذیر کند و به اندازه اجزای داخلی مرورگر بر
روی کاربران تاثیر گذار باشد.
آیا فاوآیکون در سئو تاثیر دارد؟
آیا استفاده از favicon برای سئو مناسب است؟
با مشاهده فاوآیکون در نتایج جستجوی تلفن همراه مزیت آن در سئو بیشتر از قبل شد.
فاوآیکون ممکن است به طور مستقیم در بهینه سازی سایت برای موتورهای جستجو تاثیر
گذار نباشد و ارتقا رتبه نداشته باشید، اما به طور غیر مستقیم می تواند باعث بهبود رتبه
سایت شما در موتور جستجو شود. وقتی در نتایج جستجو در کنار آدرس اینترنتی شما
لوگو شما نشان داده شود، نرخ کلیک را به صفحه شما افزایش دهد.اما مراقب باشید.
این مورد تنها در صورتی امکان پذیر است که فاوآیکون شما نسبت به نام تجاری یا وب
سایت شما مرتبط باشد. این یعنی باید در سئو به کل خوب کار کنید و favicon نیز یکی
از موارد مهم در سایت شما است.
یکی از عواملی که باعث بهبود سئوی سایت می شود کاربر پسند بودن سایت میباشد.
زمانی که سایت شما دارای فاوآیکون باشد به کاربر کمک می کند که سایت شما را سریع
تر در بوک مارک یا نشانها، سابقه مرورگر، سابقه جستجو، شناسایی و در وقت خود صرفه
جویی کند، که میزان کاربر پسند بودن سایت را افزایش دهد و هر چقدر میزان کاربر پسند
بودن بیشتر شود رتبه سایت در موتور جستجو نیز بیشتر خواهد شد.علاوه بر این اخیرا
گوگل فاوآیکون را در نتیجه جستجوی خود در موبایلها نمایش میدهد که این باعث افزایش
کلیک و در نتیجه افزایش رتبه سایت می شود.
چطور یک فاوآیکون خوب بسازیم؟
هنگام طراحی و ساخت فاوآیکون برای وب سایت خود باید نکات زیادی مورد توجه قرار گیرد.
شاید ساده و کوچک بنظر برسد، اما می تواند (و باید) بتواند تأثیر گذار باشد. باید نهایت
دقت خود را در طراحی favicon بکار ببرید چرا که ارتباط نزدیکی با برند تجاری شما دارد.
در ادامه نکاتی که باید به آنها توجه داشته باشید شرح داده شده است.
اندازه فاوآیکون :
اندازه فاوآیکون باید ۱۶px در ۱۶px باشد. این اندازه توسط تمامی مرورگرها پشتیبانی
می شود. به دلیل سایز کوچکی که دارد ممکن است نتوان در آن تمامی موارد را گنجاند،
اما باید خوانایی و قابل درک باشد.
ارتباط با برند تجاری:
فاوآیکون ارتباط بصری میان برند تجاری شما و کاربر می باشد بنابراین باید در اولین نگاه
کاربر بتواند برند یا نام تجاری شما را در ذهن خود بسپارد. معمولا می تواند نسخه کوچک
شده لوگو ، برند شما باشد اما باید حتما خوانایی باشد.
مخفف برند تجاری :
یافتن تصویری کوچک با خوانایی بالا ساده نیست و یک راه ساده تر استفاده از مخفف
نام برند به عنوان favicon است. به عنوان مثال فاوآیکون سایت فیسبوک
هماهنگی رنگها :
انتخاب رنگها نیز در ساخت آیکون بسیار مهم می باشد زیرا با توجه به اندازه کوچکی که
فاوآیکون دارد استفاده از رنگها می تواند به تشخیص بهتر فاوآیکون کمک کنند.
برای فاوآیکون از چه فرمتهایی می توان استفاده کرد؟
بر خلاف گذشته که فقط از فرمت ico استفاده می شد امروزه از فرمتهای متداول مانند
png , svg , jpeg , gif و apng استفاده کرد. هر کدام از این فرمتها مزایایی دارند و برخی
از آنها نیز ممکن است توسط برخی از مرورگر ها پشتیبانی نشوند. اما بهترین فرمت همان
ico است که در اندازه های کوچک از وضوح خوبی برخوردار می باشد.
چگونه فاوآیکون بسازیم ؟
تصویر یا آیکن خود را در فتوشاپ یا هر ابزار دیگری طراحی و با فرمت png و سایز 16×16
پیکسل خروجی بگیرید.
با استفاده از وبسایت های آنلاین مانند icoconvert.com تصویر خود را به فرمت ico
تبدیل کنید.
در قالب خود فولدری به نام images ایجاد و آیکن را در آن آپلود کنید.
نام آیکن را favicon قرار دهید.
در نهایت کد زیر را بین تگ head قالب خود قرار دهید.
<link rel=”icon” type=”image/x-icon” href=”images/favicon.ico” />
اگر از تگ فوق در سایت خود استفاده می کنید باید حتما به نحوه قرار گیری و مسیر
دهی آیکون توجه داشته باشید. ضمنا اگر از سایت معرفی شده استفاده نمایید تگها
و فرمتهای آن برای مرورگرهای مختلف را در اختیار شما قرار می دهد که می توانید آن
را در بخش head سایت خود قرار دهید.
