فاو آیکن چیست و چه کاربری دارد؟

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

فاو آیکن در کجا نمایش داده می شود؟

• سمت چپ آدرس بار
• در تب های مرورگر
• در نشانه گذاری موارد دلخواه یا Bookmark و…

تاثیرات مثبت استفاده از فاوآیکن

در حال حاضر بیشتر افرادی که با اینترنت کار می کنند هر روز فاو آیکن های مختلفی را می بینند. مغز ما تصاویر را زودتر از متون تجزیه و تحلیل می کند.زمانی که شما وبسایتی را جست و جو می کنید با دیدن فاو آیکن ها بسیار راحت تر و سریع تر سایت مورد نظر خود را پیدا می کنید. اگر شما تب های زیادی را در مرورگر خود باز کرده باشید چگونه وبسایت مورد نظر خود را پیدا می کنید؟ در این موقعیت favicon به کمک شما می آیند و با دیدن آیکن وبسایتی که مد نظرتان است به راحتی آن را پیدا می کنید.

آموزش استفاده از فاو آیکن

• تصویر یا آیکن خود را در فتوشاپ یا هر ابزار دیگری طراحی و با فرمت png و سایز 16×16 پیکسل خروجی بگیرید.
• با استفاده از وبسایت های آنلاین مانند www.icoconvert.com تصویر خود را به فرمت ico تبدیل کنید.
• در قالب خود فولدری به نام images ایجاد و آیکن را در آن آپلود کنید.
• نام آیکن را favicon قرار دهید.
• در نهایت کد زیر را بین تگ head قالب خود قرار دهید.

 <link rel="icon" type="image/x-icon" href="images/favicon.ico" />

البته کدها و فرمت های دیگری نیز برای فراخوانی favicon وجود دارند که در زیر به آن ها اشاره میکنیم

<!-- Favicon Format -->
  <link rel="icon" type="image/png" href="http://example.com/favicon.png" />
  <link rel="icon" type="image/gif" href="http://example.com/favicon.gif" />	

<!-- Opera Speed Dial Favicon -->
  <link rel="icon" type="image/png" href="/speeddial-160px.png" />
			
<!-- Standard Favicon -->
  <link rel="icon" type="image/x-icon" href="/favicon.ico" />

<!-- For iPhone 4 Retina display: -->
  <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png">

<!-- For iPad: -->
  <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png">

<!-- For iPhone: -->
  <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png">