כיצד להוסיף Favicon ב-HTML
שלושה תגים מכסים את רוב האתרים; חמישה תגים נותנים לך הגדרה בדרגה PWA. מדריך זה מסביר כל תכונה, מציג קטעי העתק-הדבק עבור ערימות נפוצות, עונה על שאלות נפוצות ומתקן את בעיות השמירה במטמון שגורמות לסמלים להיראות תקועים.
התג המינימלי
ההצהרה התקינה הקטנה ביותר היא שורה בודדת ב-<head>:
<link rel="icon" href="/favicon.ico">
דפדפנים מתייחסים ל-rel="icon" כאל רמז לאחזר כתובת URL זו להצגת כרטיסיות. נתיבים יחסיים לשורש המתחילים ב-/שורדים ללא קשר לנתיב הדף הנוכחי.
אפילו עם תג זה, לקוחות רבים עדיין בודקים את /favicon.ico באופן אוטומטי. שמור את הקובץ בשורש האתר לבקשות מרומזות.
Use our favicon generator, PNG to ICO converter, SVG to ICO converter, and live favicon tester to build and verify your icon set, and read the companion guide for a condensed walkthrough.
הסט המודרני המומלץ
לעיבוד חד בכרטיסיות שולחן העבודה, iOS ומצב כהה, השתמש ב:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
סדר חשוב פחות מהשלמות. דפדפנים בוחרים את הסוג הנתמך הטוב ביותר: SVG היכן שזמין, אחרת מסגרת PNG או ICO תואמת.
הוסף type="image/svg+xml" בשורה SVG כך שהרחת MIME לעולם לא תגרום לקובץ שגוי.
PWA הנחיות התקנה
קשר את המניפסט שלך: <link rel="manifest" href="/site.webmanifest">.
בתוך site.webmanifest, הכריז על אייקונים עם src, גדלים, סוג ומטרה. ערכים שימושיים מינימליים הם 192×192 ו-512×512 קבצי PNG.
ליטוש נושא אופציונלי: <meta name="theme-color" content="#0f172a"> מיישר את שורת המצב של Android עם המותג שלך במהלך זרימות ההתקנה.
העתק-הדבק דוגמאות
אתר רגיל HTML - הדבק בתוך <head>:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
נתב אפליקציה Next.js - הוסף את אותן שורות לאפליקציה/layout.tsx בתוך המטא נתונים או בלוק ידני של <head>. קבצים חיים ב/public.
Create React App - מקם אייקונים ב-/public וערוך public/index.html. CRA משרת/ציבור בשורש התחום בבניית ייצור.
הבנת כל תכונה
rel="icon" מסמן מועמד favicon. rel="apple-touch-icon" הוא סמל מסך הבית הספציפי ל-iOS. rel="manifest" מצביע על JSON עם מטא נתונים של PWA.
sizes אומר לדפדפן איזו רזולוציה PNG מייצג. זה נדרש לסמלים של PNG כאשר אתה מצהיר במפורש על מספר גדלים.
href חייב להיות נגיש בהפקה. הימנע מקישור חם ל-CDN של צד שלישי עבור favicons - אתה רוצה שליטה מלאה במהלך מיתוג מחדש.
שאלות נפוצות
האם אוכל להשתמש בכתובות URL מוחלטות ב-href? כן, אבל /favicon.ico ביחס לשורש הוא פשוט יותר בכל תחומי הבמה והפקה.
האם אני צריך גם rel="סמל קיצור דרך" וגם rel="סמל"? לא. rel="icon" הוא סטנדרטי; קיצור הדרך מיושן.
איפה בדיוק נמצא <head>? בן ישיר של <html>, לפני <body>. מסגרות מסוימות מחדירות אותו באמצעות רכיבי פריסה.
האם favicons צריכים לחיות על CDN? הם יכולים, אך לעדכן את כל כתובות ה-URL של <link> יחד בעת ההעברה. נתיבים יחסית לשורש מונעים את הבעיה הזו.
פתרון בעיות
הסמל עובד בדף הבית אך לא /blog/slug: השתמשת ב-href יחסית כמו favicon.ico ללא קו נטוי מוביל. השתמש ב-/favicon.ico במקום זאת.
Safari מציג סמל ישן: נקה נתוני אתר או שנה את שם הקובץ פעם אחת. Safari מאחסנת favicon יותר מ-HTML.
HTML תקף אך 404 בכרטיסיית רשת: הקובץ לא נפרס לשורש השרת או מקרה שגוי (Favicon.ico לעומת favicon.ico בלינוקס).
התעלמו מ-SVG: חסר type="image/svg+xml" או שהשרת שולח סוג תוכן שגוי. תקן מיפוי MIME ב-nginx או Apache.
מיקום ספציפי למסגרת
Vite / Vue / React SPA: שים אייקונים ב-/public והתייחס ל-/favicon.ico ב-index.html. שרת הפיתוח והייצור משרתים שניהם /ציבורי בשורש הדומיין.
נתב אפליקציות Next.js: הוסף אייקונים ל-/app דרך ממשק ה-API של metadata או הצב קבצים סטטיים ב-/public. הימנע משכפול תגים בשני המקומות.
Nuxt: השתמש ב-/public או הגדר את app.head.link ב-nuxt.config.ts לניהול תגים מרכזי על פני מסלולים.
SvelteKit: נכסים סטטיים בתיקייה סטטית/מפה ל-/. עדכן את app.html <head> פעם אחת עבור האפליקציה כולה.
Astro: ציבורי/ספרייה בתוספת רכיב Head משותף בפריסה שלך מבטיח שכל עמוד יכלול תגיות אייקונים זהות ללא סחיפה של העתק-הדבק.
WordPress ומשתמשי CMS אחרים עשויים שלא להזדקק כלל לתגים ידניים - עיין במדריך WordPress שלנו אם הליבה מייצרת עבורך סימון Site Icon.
אימות הגדרות HTML שלך
הצג את מקור הדף בהפקה, לא במארח המקומי, כדי לוודא שהפרוסות HTML תואמות את המאגר שלך. צינורות CI לפעמים מחדירים פריסות שונות לכל סביבה.
השתמש בסלסול כדי להביא כל כתובת אתר של סמל שהוחזר ב-<link href>. סטטוס 200 עם אורך תוכן נכון פירושו שהנתיב אמיתי, לא רק מוצהר.
אימות סימון W3C הוא אופציונלי עבור favicons, אבל קינון <head> לא חוקי (תגים בתוך <body>) עלול לגרום לדפדפנים להתעלם לחלוטין מהסמלים שלך.
הפעל ביקורת Lighthouse PWA אם התקנות חשובות - הוא מסמן סמלים חסרים גם כאשר הכרטיסיות נראות בסדר.
סמן את הדף בסימניות, סגור את הדפדפן לחלוטין, פתח מחדש ואשר שסרגל הסימניות עדיין מציג את הסימן שלך. זה בודק התנהגות מתמשכת של favicon מטמון.
כותרות אבטחה ונתיבי סמלים
Content-Security-Policy default-src אינו חוסם favicon טעינות מאותו מקור. כתובות אתרים של סמלים צולבים צריכות הרשאות img-src מפורשות או ברירת מחדל-src.
שלמות משאבי משנה מוחלת רק לעתים נדירות על favicons. אירוח עם מקור זהה נותר ברירת המחדל המאובטחת הפשוטה ביותר.
אם אייקונים חיים בתת-דומיין של CDN, השתמש בכתובות URL מוחלטות של https:// ב-href וודא ש-CORS לא רלוונטי - favicon נטענים כתמונות, לא אחזור.
הימנע מנתונים: URI favicons בייצור HTML. הם מנפחים מטמון HTML, עוקפים מטמון CDN ומסבכים את ה-CSP.
הזמנת תגים ושכפולים
שכפל תגי rel=icon עם אותם href בזבוז בתים אך לעתים רחוקות שוברים את העיבוד. כפולים של hrefs מתנגשים מבלבלים איתור באגים - הסר תגים מיושנים.
כמה ערכות נושא של WordPress מדפיסות תגיות Site Icon בעוד תוספים מוסיפים סט נוסף. השתמש ב-View Source כדי לזהות כפילויות לאחר התקנת הפלאגין.
מקם קישורי סמל לפני בלוקים גדולים של סקריפט בראש. גילוי מוקדם עוזר לצייר תחילה למרות שהאייקונים הם הורדות בעדיפות נמוכה.
HTML5 אינו מצריך סגירה של לוכסנים על אלמנטים חסרים. גם <link ...> וגם <link ... /> מאמתים.
מקרי מורשת וקצה
הערות מותנות ב-IE מתות. אל תעטוף תגיות אייקונים עבור דפדפנים מיושנים.
תג בסיס בראש משנה רזולוציית href יחסית. נתיבי סמלים המתחילים ב- / חסינים; הפסקות יחסיות של favicon.ico במסלולים מקוננים כאשר הבסיס מוגדר.
Shadow DOM ורכיבי אינטרנט אינם יורשים את עמוד favicon לשורשי צל - הסמל ברמת המסמך עדיין חל על הכרטיסייה.
הטמעות iframe מציגות את המסמך המוטבע favicon, לא את האב. כל מסגרת צריכה תגים משלה אם אתה שולט בשניהם.
ייתכן שבדיקת file:// מקומית לא תפתור את /favicon.ico. השתמש בשרת פיתוח מקומי להתנהגות אייקונים מציאותית.
סימניות ותוספי דפדפן לא יכולים לשנות את האתר שלך favicon עבור משתמשים אחרים - רק את הכרום המקומי שלך. שלח תגים נכונים בצד השרת.