حتماً تا به حال تصویر کوچک کنار عنوان صفحات وب را هنگام بازدید سایت های مختلف دیده اید. این تصویر که به آن فیوآیکن (favicon) می گویند، با استفاده از کدهای html، به صفحات سایت اضافه می شود. اگر می خواهید بدانید که چگونه به صفحه ی وب خود، فیوآیکن را اضافه کنید تا در تمامی مرورگرها قابل مشاهده باشد، فیلم آموزشی زیر را ببینید:
[hdplay id=21]
برای دانلود فیلم آموزشی و اسنیپت های آموزش مربوطه از لینک های زیر استفاده کنید :
[free_vip]
[video_download cat=’html’ url=’http://dl.onliner.ir/html-videos/favicon.mp4′]دانلود فیلم آموزش قراردادن فیوآیکن (favicon) در صفحات وب[/video_download]
[/free_vip]
دسترسی سریع :
- آموزش قبلی : فیلم آموزشی آشنایی با ساختار اصلی صفحات وب (تگ های html, body, head)
- آموزش بعدی : فیلم آموزش فارسی نویسی در طراحی صفحات وب html
- لیست فیلم ها : ففیلم های آموزش جامع HTML
متن فیلم آموزشی قراردادن فیوآیکن (favicon) در صفحات وب
Favicon
تصوير كوچكي است كه كنار عنوان صفحه (title) در مرورگر نمايش داده مي شود.
براي قرار دادن favivon از تگ link كه به صورت self close نوشته مي شود استفاده می کنیم. اين تگ در بین تگ head قرار مي گيرد.
[html]
<link />
[/html]
حال بايد با صفت rel=”shortcut icon” نوع چيزي كه داريم را مشخص كنيم و با صفت “http://adress.com/ax.png”=href آدرس تصوير را مشخص نماییم.
نكته : فیو آيكون مي تواند فرمت هاي عكس gif,png , jpg و…. بگيرد.
مثال :
[html]
<html>
<head>
<title>welcome</title>
<link rel="shortcut icon" href="https://onliner.co/favicon-onliner.png"/>
<head>
<body>
</body>
</html>
[/html]
نتيجه :
نکته : اگر میخواهید در ورژن های قدیمی مرورگرها فیوآیکن شما نمایش داده شود، از تصویر با پسوند ico استفاده کنید. بهتر است اندازه فیو آیکن شما 16*16 باشد.
دسترسی سریع :
- آموزش قبلی : فیلم آموزشی آشنایی با ساختار اصلی صفحات وب (تگ های html, body, head)
- آموزش بعدی : فیلم آموزش فارسی نویسی در طراحی صفحات وب html
- لیست فیلم ها : فیلم های آموزش جامع HTML
2 دیدگاه دربارهٔ «فیلم آموزش قراردادن فیوآیکن (favicon) در صفحات وب»
سلام ممنون از اموزش های عالیتون
من از شناسه placeholder استفاده کردم اما جز دستورات پیش فرض نیست تو محیط دریم ویور سی اس 5 کار میکنم خروجی هم عمل نکرد
اما با اون اسکریپت جواب گرفتم ولی تو اینترنت اکسپلورر اسکریپت جواب نداد IE9
سلام
اسکریپت که همه جا ساپورت میشه مگر اینکه به پیام ها و یا تنظیمات مرورگرتون توجه نکرده باشید.
و اما placeholder مربوط به html5 هست که باید چک بشه که مرورگرتون ازش پشتیبانی می کنه یا خیر.