محتواکده مجموعه بزرگی است که خدمات متنوعی همچون سفارش تولید محتوا ، طراحی سایت و خدمات سئو سایت را انجام می دهد و میتوانید از هر یک از این خدمات از طریق منو سایت بهره مند شوید.
آموزش کار با Favicon در HTML؛ اضافی کردن فاوآیکون به صفحات سایت خود! Favicon یکی از بخش های مهم و کاربردی در زبان برنامه نویسی HTML است که امروزه توسعه دهندگان و طراحان سایت به این بخش توجه زیادی می کنند.
HTML یکی از محبوب ترین زبان های برنامه نویسی است که شما می توانید با استفاده از این زبان سایت های مورد نظر خودتان را طراحی و راه اندازی کنید. این زبان شامل بخش ها و قابلیت های زیادی است که می توانید از این قابلیت ها بهره ببرید. اگر قصد طراحی سایت در ارومیه را دارید، توصیه می کنیم تا با این بخش ها آشنا شوید. به همین دلیل ما می خواهیم در این مطلب، توضیحاتی در مورد Favicon در HTML برای شما ارائه کنیم و نحوه اضافی کردن فاوآیکون به صفحات سایت را به شما یاد دهیم.
Favicon در HTML چیست؟
شاید این سوال برای شما نیز پیش آمده باشد که Favicon در HTML چیست؟ ما می توانیم در پاسخ به این سوال بگوییم که Favicon یکی از قابلیت ها در زبان برنامه نویسی HTML است که می توانید از آن استفاده کرده و آن را به صفحات سایت خودتان اضافی کنید. زمانی که شما یک Favicon برای صفحات سایت خودتان مشخص می کنید، تصویر مربوط به آن در کادر آدرس مرورگر اینترنت کاربر در علاقه مندی ها و در tab های مرورگر نشان داده می شود. اگر می خواهید نحوه کار با این بخش را یاد بگیرید، توصیه می کنیم تا در دوره آموزش HTML شرکت کنید.
جالب است بدانید، Favicon در اصل تصویری است که نماینده یک سایت است و به همین دلیل از آن به عنوان آیکن میانبر، آیکن بوکمارک و... یاد می کنند. اندازه فاوآیکون معمولا 16 در 16 پیکسل است. زمانی که یک سایت دارای فاوآیکون باشد، مرورگرها با توجه به نوع مرورگر این آیکن را در کنار آدرس سایت در سربرگ هر تب در کنار عنوان سایت و... به نمایش در می آورند.
چگونه یک فاوآیکون به صفحات خود اضافی کنیم؟
اگر تصویری که می خواهید به عنوان Favicon سایت خود قرار دهید را از قبل در اختیار دارید، تنها کاری که لازم است انجام دهید این است که اندازه تصویر را به 16 در 16 پیکسل تبدیل کنید و مطمئن شوید که تصویر دارای یکی از فرمت های png، ico یا gif است. اگر ابزار مناسب برای تغییر سایر تصویر مورد نظر را بر روی کامپیوتر خود در اختیار ندارید، می توانید از یک ابزار آنلاین استفاده کنید. در اینجا لازم به ذکر است که پس از آموزش کار با تگ area تنظیم تصویر favicon یکی از موارد مهم است.
با استفاده از یک برنامه می توانید به راحتی فرمت های تصاویر مختلف را به یکدیگر تبدیل کرده و اندازه آنها را به اندازه های مختلف تغییر دهید. ولی اگر تصویر دلخواه خودتان را از قبل در اختیار ندارید و می خواهید خودتان یک تصویر یا لوگوی جدید به عنوان فاوآیکون طراحی کنید، بهترین کار این است که از سایت بسیار کاربری Favicon.cc استفاده کنید.
آموزش قرار دادن Favicon در HTML
نکته قابل توجه این است که کلمه Favicon مخفف عبارت Favorites Icon است. فاوآیکون باید دارای اندازه 16 در 16 پیکسل باشد. هر صفحه ای که می خواهید دارای فاوآیکون باشد، باید کد زیر را در میان تگ های Head آن صفحه بنویسید:
<link href="your_image.png" rel="shortcut icon" />
که در آن your_image.png، نام تصویر مربوط به فاوآکوین است که به عنوان نماد سایت قبلا آن را طراحی کرده ایم. محل قرارگیری این کد را در زیر نشان داده ایم:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="your_image.png" rel="shortcut icon" />
<title>عنوان</title>
</head>
<body>
</body>
</html>
جمع بندی و نتیجه:
ما خواستیم در این مطلب، توضیحاتی در مورد Favicon در HTML برای شما ارائه کنیم و نحوه اضافی کردن فاوآیکون به صفحات سایت را به شما یاد دهیم. همانطور که گفته شد، Favicon یکی از بخش های مهم و کاربردی در زبان برنامه نویسی HTML است که شما می توانید آن را به صفحات سایت خودتان اضافی کنید. اگر می خواهید نحوه تعیین فاوآیکون را یاد بگیرید، توصیه می کنیم تا در دوره آموزش HTML شرکت کنید.
نظرات در مورد درس بیست و یکم: آشنایی و آموزش کار با Favicon در HTML: