מחולל נכסי Favicon

צור חבילת favicon מלאה — ICO, קובצי PNG, אייקון Apple touch, אייקוני PWA, web manifest וקטע HTML — באופן מקומי בדפדפן שלך.

תמונת מקור
גרור או בחר קובץ PNG, JPEG, WebP או SVG. כל פלטפורמה משתמשת בתמונה זו אלא אם תעקוף אותה למטה.
פרטי האתר
בשימוש על ידי ה-manifest, ה-apple-touch-icon וקטע ה-HTML.

מוצג כאשר שם האפליקציה ארוך מדי עבור המשטח.

אופציונלי. מושמט מה-manifest כאשר ריק.

היכן ה-PWA המותקן נפתח.

קידומת המוחלת על כל href בקטע ה-HTML ועל כל src במערך האייקונים של ה-manifest.

מניע את theme_color של ה-manifest ואת תגית ה-HTML <meta name="theme-color">.

background_color של ה-manifest. בשימוש על ידי דפדפנים לציור מסכי פתיחה ב-PWA.

Favicon לדפדפן שולחני
שולט ב-favicon.ico, favicon-16x16.png, favicon-32x32.png, ו-(כאשר המקור הוא SVG) favicon.svg.

מרווח ויזואלי סביב המקור בתוך האייקון.

כרטיסיית דפדפן שולחני
כרטיסיית דפדפן שולחני (dark)
תוצאת מנוע חיפוש
Web clip ל-iOS
שולט ב-apple-touch-icon.png בגודל 180×180 המשמש במסכי הבית של iOS.

אייקוני Apple חייבים להיות אטומים, לכן מילוי זה תמיד מוחל.

מרווח ויזואלי סביב המקור בתוך האייקון.

מסך הבית של iOS
אייקוני PWA
שולט ב-pwa-192x192.png, pwa-512x512.png, ובגרסאות ה-maskable.

מרווח ויזואלי סביב המקור בתוך האייקון.

האזור הבטוח המומלץ על ידי W3C הוא 40%. תוכן המקור נשאר גלוי בתוך כל מסכת פלטפורמה.

שורת המשימות של Windows
משגר Android
חבילה שנוצרה
לחץ על צור כדי לעבד כל נכס, לבנות את ה-zip ולהעתיק את קטע ה-HTML.
אין חבילה עדיין
בחר תמונה ולחץ על צור כדי להרכיב את חבילת ה-favicon.

מה הכלי מייצר

מחולל זה הופך תמונה בודדת לחבילת favicon שלמה ומודרנית — קובץ .ico רב-גדלים עבור דפדפנים ישנים, גרסאות PNG בגדלים 16 / 32 / 180 / 192 / 512, קובץ .svg מקורי אופציונלי, קובץ site.webmanifest עבור PWA, וקטע ה-HTML שאותו תדביק ב-<head>. כל בייט מיוצר בדפדפן שלך; ללא העלאה, ללא שרת, ללא אנליטיקס.

מה כלול בחבילה

  • favicon.ico — קובץ רב-תמונות (16 / 32 / 48) עבור לשוניות דפדפן, סימניות וקיצורי דרך ישנים של Windows.
  • favicon-16x16.png ו-favicon-32x32.png — גרסאות PNG מודרניות בשימוש על ידי דפדפנים עכשוויים.
  • favicon.svg — נכלל רק כאשר תמונת המקור שלך היא SVG וכאשר המתג “השתמש ב-SVG המקורי” מופעל.
  • apple-touch-icon.png — 180×180, אטום, בשימוש עבור מסכי הבית של iOS.
  • pwa-192x192.png ו-pwa-512x512.png — סמלי ה-PWA הסטנדרטיים.
  • pwa-maskable-192x192.png ו-pwa-maskable-512x512.png — גרסאות ניתנות למיסוך עם אזור בטוח מומלץ על ידי W3C.
  • site.webmanifest — מניפסט ה-PWA המחובר לסמלים שלמעלה.

כיצד פועלים מרווחים, רקע ואזורים בטוחים ניתנים למיסוך

לכל פלטפורמה יש מרווח משלה (“Margin”) כך שתוכל להשאיר מרחב נשימה בתוך קנבס הסמל. המתג “הוסף רקע” צובע ריבוע אטום מאחורי המקור — שימושי כאשר המקור שקוף והיעד דורש אטימות (מסך הבית של Apple) או פשוט עבור ניגודיות חזותית בלשונית הדפדפן. סמלי PWA ניתנים למיסוך משתמשים באזור בטוח נוסף מעבר למרווח הפלטפורמה: כל מה שמחוץ למרכז ה-~80% עלול להיחתך על ידי Android, Windows או ChromeOS כאשר הם מחילים מסכה עגולה, מעוגלת או דמוית squircle.

חיבור החבילה לאתר שלך

  1. חלץ את הארכיון שהורדת אל שורש האינטרנט שלך (כך שהקבצים יימצאו ב-/favicon.ico, /site.webmanifest וכו’).
  2. הדבק את קטע ה-HTML ב-<head> של האתר שלך.
  3. אם אתה מגיש נכסים מתת-נתיב (לדוגמה /static/icons/), הגדר את “נתיב הנכסים” לפני הייצור כך שהקטע והמניפסט ישתמשו בכתובות URL הנכונות.
  4. אם התאמת אישית את המניפסט מעבר למה שהכלי הזה חושף (לדוגמה כדי להוסיף categories או screenshots), פתח את site.webmanifest בעורך טקסט וערוך אותו ישירות — זהו JSON רגיל.