כיצד להוסיף Favicon ל-HTML
הוספת favicon לדף רגיל של HTML היא שינוי בשורה אחת - אבל ההגדרה המודרנית והשלמה היא שש שורות ומכסה iOS, Android, מצב כהה והתקנה של PWA.
התג היחיד שכל דפדפן מכבד הוא <link rel="icon" href="/favicon.ico">. זרוק את favicon.ico בשורש האתר שלך וסיימת ב-80%.
ה-20% הנותרים - גרסאות apple-touch-icon, PNG, SVG עם תמיכה במצב אפל, ו-webmanifest - הם המפרידים בין סמל ברירת המחדל לחוויית מותג מלוטשת.
איך זה עובד
- 1
צור את חבילת ה-favicon שלך
השתמש במחולל החבילות FetchFavicon — מייצר כל קובץ שאתה צריך בתוספת סימון מוכן להדבקה.
- 2
זרוק קבצים בשורש האתר
favicon.ico, apple-touch-icon.png, android-chrome-192/512.png, site.webmanifest.
- 3
הדבק את קטע הקוד ב-<head>
שישה תגיות <link> + אחת <meta name="theme-color">.
נסה עכשיו
קבל את קטע הקוד HTML
מחולל פביקוןשאלות נפוצות
לאן הולכים התגיות <link>?+
בתוך <head>, בכל מקום - הסדר לא משנה כל עוד הם מגיעים לפני </head>.
האם אני צריך גם .ico וגם PNG?+
כֵּן. .ico הוא הכשל האוניברסלי; PNG מציג את החדות ביותר במסכי DPI גבוהים.
מה לגבי מצב כהה?+
שלח וריאנט SVG שמטמיע שאילתת מדיה מעדיף-צבעים בתוך בלוק ה-<style> שלו.