آموزش ساخت Favicon

حتما تا کنون تصاویر کوچک یا همان آیکون را در کنار نوار آدرس سایت در حال نمایش یا محل نمایش عنوان سایت، در برنامه مرورگر خود دیده اید، این تصویر کوچک اصطلاحاً favicon نام دارد.
برای افزودن favicon به صفحه وب خود، ابتدا آیکون لوگوی سایت خود را به آدرسی در دایرکتوی سایتتان (مسیری در هاست خود) اضافه کنید و سپس مانند کدهای زیر آیکون خود را در تگ link ،در درون تگ head در کدهای HTML قرار دهید.

<link rel="SHORTCUT ICON" href="favicon.ico" />

تک های آیکون برای مرورگر safari و گوشی موبایل و آیپد نسخه Ios

<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina.png"> />
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png" />
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#5bbad5" />

تک های آیکون برای گوشی موبایل و تبلت نسخه Android

<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png" />
<link rel="icon" type="image/png" sizes="192x192" href="android-chrome-192x192.png" />
<link rel="icon" type="image/png" sizes="384x384" href="android-chrome-384x384.png" />
<link rel="manifest" href="manifest.json" />

تک های آیکون برای نسخه ویندوز

<meta name="msapplication-config" content="browserconfig.xml" />
<meta name="msapplication-square70x70logo" content="small.jpg" />
<meta name="msapplication-square150x150logo" content="medium.jpg" />
<meta name="msapplication-wide310x150logo" content="wide.jpg" />
<meta name="msapplication-square310x310logo" content="large.jpg" />

یک راه حل ساده برای این کار کافیست با مراجعه به سایت realfavicongenerato این کار را به راحتی انجام دهید.