כיצד להוסיף Favicon ל-HTML
הוספת favicon לדף רגיל של HTML היא שינוי בשורה אחת - אבל ההגדרה המודרנית והשלמה היא שש שורות ומכסה iOS, Android, מצב כהה והתקנה של PWA.
Check favicons on any website
Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.
התג היחיד שכל דפדפן מכבד הוא <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> שלו.