حتماً تا به حال تصویر کوچک کنار عنوان صفحات وب را هنگام بازدید سایت های مختلف دیده اید. این تصویر که به آن فیوآیکن (favicon) می گویند، با استفاده از کدهای html، به صفحات سایت اضافه می شود. اگر می خواهید بدانید که چگونه به صفحه ی وب خود، فیوآیکن را اضافه کنید تا در تمامی مرورگرها قابل مشاهده باشد، فیلم آموزشی زیر را ببینید:
[hdplay id=21]
برای دانلود فیلم آموزشی و اسنیپت های آموزش مربوطه از لینک های زیر استفاده کنید :
[free_vip]
[video_download cat=’html’ url=’http://dl.onliner.co/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
سلام ممنون از اموزش های عالیتون
من از شناسه placeholder استفاده کردم اما جز دستورات پیش فرض نیست تو محیط دریم ویور سی اس 5 کار میکنم خروجی هم عمل نکرد
اما با اون اسکریپت جواب گرفتم ولی تو اینترنت اکسپلورر اسکریپت جواب نداد IE9
سلام
اسکریپت که همه جا ساپورت میشه مگر اینکه به پیام ها و یا تنظیمات مرورگرتون توجه نکرده باشید.
و اما placeholder مربوط به html5 هست که باید چک بشه که مرورگرتون ازش پشتیبانی می کنه یا خیر.