تو این جلسه از آموزش HTML میخوایم به توضیح در مورد favicon بپردازیم . فاوآیکون یا همون Favicon در HTML مشخص میکنه که آیکون وب سایت برای تب مرورگر که باز میشه چی باشه. توی نمایش نتایج جستجو هم تاثیر داره که وب سایتتون با آیکون پیش فرض نباشه و کاربر بتونه این Favicon رو ببینه تو نتایج .
معمولا از لوگو وب سایت برای فاوآیکون استفاده می کنن. چرا که تو ذهن خاطب تاثیر میذاره. موقعی هم که وب سایت رو باز میکنه مرورگر اون آیکون کوچولو رو بهشو نشون میده .
برای ایجاد کردن فاوآیکون یا Favicon در وب سایتتون کافی هستش تا یک خط کد رو بذارید و دقیقا مثل لینک دهی به عکس که در تگ img یاد گرفتیم لینک آیکون رو بدیم بهش. هر عکسی رو میتونید بعنوان فاوآیکون بذارین. فقط توصیه ما به شما این هست که عکس بایز سایز کوچیک باشه و کیفیت خوبی در عین حال داشته باشه. اول باید عکستون رو در جایی از وب سایت قرار بدید و بعد هم لینک دهی و تمام.
کد زیر روی برای استفاده این آیکون در وب سایت داخل تگ head وب سایت قرار بدید همه کارها انجام میشه و این آیکون در تب مرورگر قابل نمایش هستش. دقیقا مثل مثال زیر عکس در کنار عنوان تب مرورگر ظاهر میشه :
<!DOCTYPE html>
<html>
<head>
<title>My Page Title</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body data-rsssl=1>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>
در کد بالا اگر دقت کنید داخل تگ head یک تگ link درج شده که چندتا ویژگی داره. rel رو icon گذاشتیم و ویژگی بعدی type هست و ویژگی بعدی هم href که لینک میده به اون آیکون.
بعد از اینکه این کار رو داخل تگ head انجام دادین فقط کافیه فایل رو ذخیره کنید و بعد هم مرورگر رو رفرش کنین و بوم ! آیکون میاد اون بالا فایل مشاهده میشه ! به همین راحتی.
