در حال بارگذاری...

فاویکون در HTML

جلسهٔ Head یک جعبهٔ فرادادهٔ شروع با charset، viewport، title و پیوند stylesheet ساخت. فاویکون یک link عملی دیگر در head است: آیکون کوچکی که در زبانهٔ مرورگر کنار عنوان صفحه ظاهر می‌شود. کمک می‌کند سایت را بین زبانه‌های شلوغ، نشانک‌ها و بعضی فهرست‌های تاریخچه بشناسند. با متن CSS رسم نمی‌شود — مرورگر را به یک فایل تصویر کوچک اشاره می‌دهید.

فاویکون چیست؟

فاویکون منبع آیکون سایت است. مرورگرها آن را می‌گیرند چون HTML شما (یا حدس پیش‌فرضی مثل /favicon.ico) می‌گوید کجا نگاه کنند. صفحات مدرن معمولاً صریح با عنصر link اعلامش می‌کنند تا مسیر و نوع فایل روشن باشد. آیکون باید ساده و به‌اندازهٔ کافی مربعی بماند تا در اندازهٔ خیلی کوچک خوانا باشد.

پاسخ مستقیم

در head سند، یک link با rel="icon" و hrefای که به فایل آیکون اشاره کند اضافه کنید. انتخاب‌های رایج: favicon.ico، یک PNG مثل images/favicon.png، یا آیکون SVG. مسیر باید مثل بقیهٔ URLهای نسبی درست resolve شود (جلسهٔ File Paths). بعد از عوض کردن فایل، کش مرورگر را انتظار داشته باشید — تازه‌سازی سخت یا پنجرهٔ خصوصی اغلب آیکون جدید را زودتر از reload عادی نشان می‌دهد.

پیوند کلاسیک .ico

خیلی آموزش‌ها هنوز با favicon.ico در همان پوشهٔ فایل HTML شروع می‌کنند. ویژگی اختیاری type می‌تواند به فهم منبع کمک کند.

پیوند فاویکون کلاسیک

html

HTML Code

<head>
<title>My Site</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>

خواندن نمونهٔ کلاسیک

link در head کنار title و فرادادهٔ دیگر است
rel="icon" منبع را به‌عنوان فاویکون علامت می‌زند
href="favicon.ico" فرض می‌کند فایل کنار همین صفحهٔ HTML است
type="image/x-icon" اشارهٔ MIME رایج برای فایل‌های .ico است
بدون مسیر درست، زبانه ممکن است آیکون پیش‌فرض یا خالی نگه دارد

گونه‌های PNG و SVG

فاویکون PNG از ابزارهای طراحی راحت export می‌شود. فاویکون SVG وقتی مرورگر پشتیبانی کند در مقیاس‌های مختلف تیز می‌ماند. می‌توانید آیکون را در پوشهٔ images بگذارید و href را همان‌جا بگیرید.

فاویکون PNG یا SVG

html

HTML Code

<head>
<title>My Site</title>
<link rel="icon" href="images/favicon.png" type="image/png">
<!-- or: href="images/icon.svg" type="image/svg+xml" -->
</head>

انتخاب فرمت شروع

.ico — سنتی، برای ابزارهای قدیمی‌تر آشنا
.png — ساده برای مبتدیانی که از قبل PNG می‌سازند
.svg — گزینهٔ وکتور شفاف وقتی مخاطب پشتیبانی می‌کند
روز اول به همهٔ فرمت‌ها نیاز ندارید. یک آیکون واضح با پیوند درست بفرستید؛ بعداً اگر پروژه بخواهد بسته‌های چنداندازه یا apple-touch را گسترش دهید.

مسیر به‌اندازهٔ نشانه‌گذاری مهم است

اگر href به فایل گم اشاره کند، درخواست فاویکون 404 می‌دهد و آیکون زبانه بی‌صدا شکست می‌خورد. نام پوشه، املا، و این‌که HTML جابه‌جا شده بدون آیکون را چک کنید. مسیر نسبی نسبت به URL سند HTML است، نه نسبت به حسی که «باید کجا باشد».

کش می‌تواند به‌روزرسانی را پنهان کند

مرورگرها اغلب فاویکون را شدید کش می‌کنند. favicon.png را عوض می‌کنید، reload می‌کنید، هنوز علامت دیروز را می‌بینید. همیشه یعنی HTML غلط نیست. تازه‌سازی سخت، پنجرهٔ خصوصی/incognito، یا موقتاً تغییر نام فایل و به‌روز کردن href را امتحان کنید تا مرورگر URL تازه بگیرد. این عادت را زود یاد بدهید تا یادگیرنده از ترس نشانه‌گذاری درست را پاک نکند.

آیکون را کوچک و واضح نگه دارید

عکس بزرگ فشرده‌شده در زبانه به تاری ناخوانا تبدیل می‌شود. علامت ساده، کنتراست بالا، و بوم مربعی را ترجیح دهید. فاویکون کمک شناسایی است، نه قهرمان دوم صفحه. برندینگ جزئی را برای بدنه نگه دارید.

پیوند کجا باید باشد؟

عنصرهای link فاویکون را در head بگذارید. گذاشتنشان در body جای غلط برای آیکون سطح سند است. می‌دانید head برای فراداده و پیوند منابع است؛ فاویکون همان قاعده را دنبال می‌کند.

تمرین در ویرایشگر

یک آیکون مربعی کوچک کنار فایل HTML یا داخل پوشهٔ images بگذارید.
داخل head، <link rel="icon" href="..."> با مسیر هم‌خوان اضافه کنید.
صفحه را باز کنید و زبانه را کنار متن عنوان ببینید.
عمداً مسیر را خراب کنید، reload کنید، و ببینید آیکون محو یا برمی‌گردد — بعد درستش کنید.
فایل آیکون را عوض کنید و اگر قبلی ماند، پنجرهٔ خصوصی یا تازه‌سازی سخت را برای تأیید هنر جدید باز کنید.

اشتباهات رایج

گذاشتن link فاویکون در body به‌جای head
href غلط تا آیکون 404 شود در حالی که HTML صفحه هنوز خوب به نظر می‌رسد
انتظار به‌روزرسانی فوری در حالی که فاویکون قدیمی کش شده
استفاده از عکس بزرگ به‌جای علامت مربعی کوچک و ساده
فراموش آپلود فایل آیکون وقتی فقط HTML را دیپلوی می‌کنید
قاطی کردن rel="stylesheet" با rel="icon" و تعجب از رفتار CSS یا آیکون زبانه

خلاصه

فاویکون با rel="icon" در head پیوند می‌شود
href را به فایل واقعی .ico، .png یا .svg بزنید
مسیر درست و بررسی آرام کش بیشتر گزارش‌های «آیکون نیست» را حل می‌کند
آیکون را در اندازهٔ زبانه کوچک و قابل‌تشخیص نگه دارید
یک پیوند کارآمد بهتر از انبوه فرمت استفاده‌نشده است

🧠 دانش خود را بیازمایید

آماده شروع

دانش خود را بیازمایید

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓

سوالات

🎯

70%

برای قبولی

♾️

∞

زمان

🔄

∞

تلاش‌ها

📝 دستورالعمل‌ها

هر سوال را با دقت بخوانید
بهترین پاسخ را برای هر سوال انتخاب کنید
می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
پیشرفت شما در بالا نمایش داده می‌شود

زبان