איך יוצרים פאביקון ותמונת שיתוף לאתר עם קלוד קוד

מה הסקיל הזה עושה לאתר שלכם?

בניתם אתר עם קלוד, הוא נראה טוב, ואז אתם פותחים אותו בלשונית ורואים ריבוע אפור במקום לוגו. שולחים את הלינק ללקוח בוואטסאפ, ויוצאת בועה ריקה בלי תמונה. שני הפרטים הקטנים האלה הם מה שגורם לאתר להיראות לא גמור.

בשביל לסגור את זה צריך כמה קבצים: פאביקון (האייקון הקטן בלשונית) בכמה גדלים, אייקון למסך הבית בטלפון, ותמונת שיתוף בגודל שפייסבוק, וואטסאפ ולינקדאין מצפים לו. בדרך כלל זה עבודה למעצב, או חצי שעה מול אתרי המרה.

הסקיל web-asset-generator בגיטהאב עושה את כל זה מתוך קלוד קוד. לפי ה-README שלו, הוא מייצר:

• פאביקון: אייקונים ללשונית בגדלים 16, 32 ו-96 פיקסלים, וגם קובץ favicon.ico.
• אייקונים לאפליקציה: 180, 192 ו-512 פיקסלים, למסך הבית באייפון ובאנדרואיד.
• קובץ manifest.json: ההגדרות שהופכות את האתר לאפליקציה שאפשר להוסיף למסך הבית.
• תמונות שיתוף: 1200 על 630 לפייסבוק, וואטסאפ ולינקדאין, ו-1200 על 675 ל-X.

הוא עובד מלוגו שיש לכם, מטקסט כמו שם העסק או הסלוגן, או מאימוג'י. יש בו יותר מ-60 אימוג'ים שהוא מציע לפי סוג העסק. הסקיל פתוח בקוד, ברישיון MIT, עם 528 כוכבים בגיטהאב נכון לנובמבר 2026.

איך מתקינים את הסקיל בקלוד קוד?

צריך קלוד קוד בגרסה 2.0.13 ומעלה, ופייתון במחשב. הדרך הקלה היא דרך מרקטפלייס הפלאגינים. פותחים קלוד קוד ומדביקים:

העתקה/plugin marketplace add alonw0/web-asset-generator
/plugin install web-asset-generator@web-asset-generator-marketplace

אחרי זה מתקינים את ספריית התמונות שהסקיל משתמש בה. אפשר להריץ את זה בטרמינל, או פשוט לבקש מקלוד קוד "תתקין את מה שהסקיל צריך":

העתקהpip install Pillow
pip install pilmoji 'emoji<2.0.0'

השורה השנייה נחוצה רק אם אתם רוצים אייקון מאימוג'י. בסוף סוגרים ופותחים מחדש את קלוד קוד, כדי שהסקיל ייטען.

מה כותבים לו כדי לקבל את האייקונים?

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

העתקהתעשה פאביקון לאתר של בית הקפה שלי, ותמונת שיתוף עם השם "קפה נחלה" והסלוגן "קפה טוב ליד הבית"

קלוד מזהה שזה תפקיד של הסקיל ומפעיל אותו לבד. משם זה מרגיש כמו שיחה:

1. הוא שואל מה אתם צריכים: רק פאביקון, רק אייקונים לאפליקציה, רק תמונות שיתוף, או הכל. השאלות מופיעות ככפתורים שבוחרים בלחיצה.
2. הוא שואל ממה לעבוד: לוגו שיש לכם, אימוג'י או טקסט. אם בחרתם אימוג'י, הוא מציע כמה שמתאימים לעסק, למשל כוס קפה לבית קפה.
3. הוא מייצר את כל הגדלים ובודק אותם: גודל קובץ, מידות, ואם יש טקסט, ניגודיות צבעים לפי תקן הנגישות WCAG.
4. הוא מזהה איזה סוג אתר יש לכם ומציע להכניס את התגיות לקוד.

כבר יש לכם לוגו? שמים אותו בתיקייה וכותבים "תעשה אייקונים לאפליקציה מהקובץ logo.png". הוא מקטין אותו לכל הגדלים בלי שתצטרכו לחתוך שום דבר.

ממה כדאי לבנות את האייקון: לוגו, טקסט או אימוג'י?

הסקיל עובד משלושה סוגי מקור, ולכל אחד יש מקום משלו. שווה לבחור נכון לפני שמתחילים, כי זה מה שקובע אם האייקון ייקרא בגודל של לשונית.

יש לכם לוגו

זה המקור הכי טוב, כי האייקון יהיה זהה למותג. מה שחשוב: קובץ גדול ונקי, עדיף ריבועי ועם רקע שקוף. אם הלוגו רחב, עם שם העסק לצד סמל, תבקשו מקלוד להשתמש רק בסמל. שם שלם בגודל 16 פיקסלים הופך לפס צבעוני שאי אפשר לקרוא.

אין לוגו, יש שם

הסקיל יכול לבנות אייקון מאות אחת או משתי אותיות על רקע צבעוני, ותמונת שיתוף משם העסק והסלוגן, עם גודל טקסט שמתאים את עצמו. תנו לו את הצבע הראשי של האתר, והכל ייראה כמו חלק מאותו עיצוב.

רוצים משהו מהיר

אימוג'י הוא הדרך הכי מהירה לאתר חדש, לדף נחיתה זמני או לפרויקט צד. כותבים "תציע אימוג'י לעסק של אילוף כלבים", והוא מציע כמה אפשרויות. זה לא מחליף לוגו, אבל זה הרבה יותר טוב מריבוע אפור.

איך האייקונים נכנסים לאתר?

אייקון שיושב בתיקייה לא עוזר לאף אחד. הדפדפן ווואטסאפ צריכים תגיות בקוד של האתר שאומרות להם איפה כל קובץ. הסקיל מזהה את סוג הפרויקט, למשל Next.js, Astro או SvelteKit, ומציע להכניס את התגיות במקום הנכון. אתם מאשרים, והוא כותב.

אם האתר שלכם הוא קובץ HTML פשוט, אותו דבר: התגיות נכנסות לראש הדף. ככה נראות התגיות של תמונת השיתוף, שהן מה שוואטסאפ קורא:

העתקה<meta property="og:image" content="https://your-site.com/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

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

מה חשוב לדעת לפני שמתחילים?

• עלות: הסקיל חינמי. צריך מנוי לקלוד שכולל קלוד קוד, או חשבון API.
• מערכת הפעלה: עובד במק, לינוקס ווינדוס. צריך פייתון 3.6 ומעלה, וקלוד יכול להתקין אותו בשבילכם.
• עדכונים: העדכון האחרון לקוד היה בינואר 2026. הסקיל עובד לפי ה-README, אבל הוא פרויקט של מפתח יחיד ולא של אנתרופיק.
• טקסט בעברית בתמונה: הסקיל מצייר טקסט עם ספריית Pillow, והיא לא תמיד מסדרת עברית מימין לשמאל. תבדקו את תמונת השיתוף לפני שהיא עולה. אם האותיות יצאו הפוכות, תבקשו מקלוד לתקן, או תשתמשו בלוגו בלי טקסט.
• הוא מציע, אתם מאשרים: הוא לא משנה את הקוד של האתר בלי לשאול. אם יש לכם אתר בוורדפרס או בבונה אתרים, תעלו את הקבצים דרך ההגדרות שלו.
• לוגו טוב נכנס, אייקון טוב יוצא: לוגו עם הרבה פרטים קטנים לא ייקרא בגודל 16 פיקסלים. סמל פשוט או אות אחת עובדים הכי טוב.