10
تشکر

فاویکون(Favicon): نقش در حال تغییر

فاویکون(Favicon): نقش در حال تغییر

فاویکون(Favicon): نقش در حال تغییر

بسیاری از توسعه دهندگان وب با استفاده از فاویکون فرصتی را برای سایت خودشان ایجاد میکنند که کاربران سایتشان را به راحتی به خاطر بسپارند.

امروزه از فاویکون به عنوان یکی از مقاصد تجاری استفاده میشود. زیرا میتوان با استفاده از این قابلیت نمایی زیبا از سایت را به کاربر نشان داد.

مفهوم فاویکون اولین بار در IE در سال 1999 بوجود آمد. فایلی با فرمت ico. که در ریشه هاست با نام favicon.ico قرار دارد. از آن زمان تا به حال خیلی چیز تغییر پیدا کرده اند. از این قابلیت امروزه در بسیاری از وسایل استفاده میشود.

نحوه استفاده

در HTML5 برای خصوصیت rel این قابلیت مقدار icon را انتخاب کرده است.

از آنجا که اینترنت اکسپلورر از فایلهای PNG پشتیبانی نمیکند ولی مرورگرهای مدرن پشتیبانی میکنند. ما میتوانیم فرمت ico را فقط برای IE در عبارت شرطی قرار بدهیم و فرمت png را آزاد بگذاریم:

<!-- For IE -->
<!--&#91;if IE&#93;><link href="”images/favicon.ico”" rel="”shortcut" /><!&#91;endif&#93;-->
<!--For Modern Browser with PNG Support -->
<link href="”images/favicon.png”" rel="”icon”" type="”image/png”" /> 

در کدهای بالا مشکلی است. IE10 هم از عبارت شرطی پشتیبانی نمیکند و هم فایلهای png را ساپورت نمیکند. چه کاری باید انجام داد.

در این حالت بهتر است ما اصلا عبارت شرطی را برای اینترنت اکسلپور به کار نبریم و فقط favicon را با فرمت .ico در ریشه پوشه قرار بدهیم. به این صورت مرورگرهای IE خودشان آن را مورد استفاده قرار میدهند.

برای دستگاه های اپل

دستگاه های اپل با IOS 1.1.3 و بالاتر از یک خصوصیت rel مخصوص پشتیبانی میکنند. مقدارهای خصوصیت rel این دستگاه ها باید apple-touch-icon و apple-touch-icon-precomposed باشد. در دستگاه های اپل favicon فقط برای مروگرها نمایش داده نمیشود و در صورتی که کاربر سایت را در قسمت برنامه ها بوک مارک کند به کیفیت بهتری برای favicon نیاز داریم. مانند عکس زیر:

Favicon

Favicon

<!-- For rounded corners and reflective shine in Apple devices -->
<link href="favicon.png" rel="apple-touch-icon" /><!-- Favicon without reflective shine -->
<link href="favicon.png" rel="apple-touch-icon-precomposed" />

گزینه اول برای آیکون های با درخشش انعکاسی است مانند تصویر و مورد دوم بدون آن باید باشد.

سایز مناسب برای این آیکون ها 57*57 با 90 درجه گوشه دار باشد. برای رزولویشن های بالا سایز 114*114 و آپید 2 سایز 72*72 و آیپد 3 سایز 114*114 است.

شما میتوانید برای انتخاب سایز از خصوصیت sizes استفاده کنید. از این خصوصیت میتوانید در همه موارد استفاده کنید:

<link href=" " rel="apple-touch-icon-precomposed" sizes="57x57" />
<link href=" " rel="apple-touch-icon-precomposed" sizes="72x72" />
<link href=" " rel="apple-touch-icon-precomposed" sizes="114x114" />
<link href=" " rel="apple-touch-icon-precomposed" sizes="144x144" />
<link href="”images/favicon.png”" rel="”icon”" type="”image/png”" />
<link href="”images/favicon.png”" rel="”icon”" type="”image/png”" />
<link href="”images/favicon.png”" rel="”icon”" type="”image/png”" />

ویندوز 8

در ویندوز 8 سایت های بوک مارک شده به صورت کاشی نمایش در می آیند.

Favicon

Favicon

<meta name="msapplication-TileColor" content="#D83434">
<meta name="msapplication-TileImage" content="path/to/tileicon.png">

خط اول برای انتخاب رنگ کاشی و خط دوم برای آیکون مورد نظر است که فرمت png را قبول میکند. سایز مناسب 114*114 است.

  • شکوفه می‌گه:

    ممنون از اموزش های خوبتان.می خواستم بدونم برای قرار دادن notification در سایت(فرضا برای تعداد پیام های خوانده نشده) میشه آموزشی قرار بدید؟به خصوص قسمت php


  • نظرات این مطلب بسته است.