עברית
ליצור favicon מתמונה, טקסט או אימוג׳י - בכל הגדלים, כולל קוד ה-HTML להדבקה.
עודכן לאחרונה
ב-Coddy לומדים דרך כתיבת קוד אמיתי בדפדפן: שיעורים אינטראקטיביים, משוב מיידי ועזרה מ-AI כשנתקעים.
*Favicon* הוא האייקון הזעיר שמופיע בלשוניות הדפדפן, בסימניות, ברשימות ההיסטוריה ובמסך הבית של iOS / Android כשמישהו שומר את האתר שלכם. זה דבר קטן שמשפיע באופן מפתיע על התחושה של פרויקט: favicon אמיתי הוא ההבדל בין ריבוע זמני למוצר גמור.
דפדפנים מודרניים מבקשים את ה-favicon בכמה גדלים ופורמטים שונים. אייקונים של לשוניות וסימניות צריכים PNG בגודל 16×16 או 32×32. Safari ב-iOS רוצה apple-touch-icon.png בגודל 180×180. ההוספה למסך הבית ב-Android רוצה 192×192 ו-512×512 בתוך web manifest. דפדפנים ישנים וחלק מהאינטגרציות עדיין מצפים ל-favicon.ico רב-רזולוציות. חיתוך ידני של כל אלה, אחד אחרי השני, הוא הרבה עבודה שחורה, ו-favicon generator עושה את זה בלחיצה אחת.
המחולל הזה רץ כולו בדפדפן. התמונה שאתם מעלים מפוענחת ל-<canvas> מקומית, כל גודל פלט מרונדר לידה, והחבילה כולה (קובצי PNG, ICO, web manifest, README וקטע HTML) נארזת ל-.zip בלי להעלות שום דבר.
favicon.ico הוא פורמט מכיל שיכול לארוז כמה גדלים (16, 32, 48), כך שקוראים ותיקים תמיד מוצאים את מה שהם צריכים.apple-touch-icon.png ורשומות בתוך manifest.webmanifest), וצריך את שתיהן.השתמשו ב-**טקסט** למונוגרמה של 1 עד 3 תווים, ב-**אימוג'י** לאייקון של תו אחד, או ב-**תמונה** כדי לגרור PNG, JPEG או SVG. מצב תמונה הוא נקודת הפתיחה הטובה ביותר אם כבר יש לכם לוגו.
בחרו צבע רקע (וצבע טקסט למונוגרמות). בחרו **ריבוע**, **מעוגל** או **עיגול**. ריבועים מעוגלים תואמים לאופן שבו iOS חותך אייקונים במסך הבית, ולכן הם מרגישים טבעיים.
שם האתר הופך לתגית ה-meta application-name ול-short_name ב-manifest.webmanifest של ה-PWA. השתמשו בשם המותג שמשתמשים יראו בסימניה בדפדפן.
גללו את שורת התצוגה המקדימה כדי לוודא שהאייקון עדיין קריא ב-16px וב-32px (הגדלים של הלשוניות). אם העיצוב מאבד קריאות בגודל כזה, פשטו את המקור: פחות תווים או חיתוך הדוק יותר.
לחצו על **הורדת חבילת favicon (.zip)** כדי לקבל את כל קובצי הפלט בבת אחת. שימו את הקבצים בתיקיית השורש של האתר, והדביקו את קטע ה-HTML ב-<head> שלכם. סיימתם.
כל הורדה מכילה את הקבצים שלמטה. קטע ה-HTML מחבר אותם. אם אתם צריכים רק חלק מהם, השאירו את אלה שמתאימים לפלטפורמות שאתם תומכים בהן.
| קובץ | גודל | בשימוש של | הערות |
|---|---|---|---|
favicon.ico | 16, 32, 48 | לשוניות דפדפן (גיבוי לדפדפנים ישנים) | מכיל ICO רב-רזולוציות: כל דפדפן עדיין מבקש את הכתובת הזו. |
favicon-16x16.png | 16×16 | אייקון בלשונית הדפדפן | בשימוש במסכים עם DPI גבוה דרך <link rel="icon" sizes="16x16">. |
favicon-32x32.png | 32×32 | לשונית דפדפן + סימניות | אייקון הלשונית הראשי במסכי רטינה. |
favicon-48x48.png | 48×48 | אריח אתר ב-Windows, שורת המשימות | נארז גם בתוך favicon.ico עבור קוראים ותיקים. |
apple-touch-icon.png | 180×180 | הוספה למסך הבית ב-Safari של iOS | אם הקובץ חסר, iOS משתמשת בצילום מסך כגיבוי. תמיד כללו אותו. |
android-chrome-192x192.png | 192×192 | מסך הבית של Android | מוזכר מתוך manifest.webmanifest. |
android-chrome-512x512.png | 512×512 | הנחיית התקנה ומסך פתיחה של PWA | נדרש ל-PWA שניתן להתקנה. |
site.webmanifest | - | מטא-דאטה להתקנת PWA | מפרט אייקונים, שם וצבע ערכת נושא. מקושר דרך <link rel="manifest">. |
הקלידו 1 עד 3 אותיות (למשל **Co**, **C** או **JS**), בחרו צבע מותג ובחרו **מעוגל** לצללית שמתאימה ל-iOS.
מונוגרמות הן הקריאות ביותר ב-16px כי אין בהן פרטים שיכולים ללכת לאיבוד. השתמשו באות גדולה ומודגשת או בזוג אותיות הדוק, ושמרו על ניגודיות גבוהה בין צבע הטקסט לצבע הרקע.
בחרו אימוג'י שמתאים לאווירה של הפרויקט: 🚀 להשקה, 🧪 לניסוי, 📚 לתיעוד. הגדירו רקע ניטרלי.
favicon מאימוג'י מרגיש ידידותי לאתרים אישיים, להאקתונים ולפרויקטים צדדיים. זכרו שאותו אימוג'י נראה אחרת ב-macOS (Apple) וב-Windows (Segoe). אחרי הייצוא, החבילה מקפיאה את המראה של macOS / Linux / Chrome שאתם רואים בתצוגה המקדימה.
גררו PNG או SVG של הלוגו שלכם, הגדילו את מחוון ה-**ריווח פנימי** כדי שהאיור לא ייגע בקצוות, והפעילו את **מילוי צבע הרקע** אם ללוגו יש קצוות שקופים.
קלט SVG מרונדר חד בכל גודל. גם PNG עובד, אבל הוא מיטשטש מעבר לרזולוציה המקורית שלו, אז התחילו ממקור בגודל 512×512 לפחות.
apple-touch-icon.png. אם לא הוגדר אייקון Apple touch, iOS תשתמש בצילום מסך של הדף, שבדרך כלל נראה נורא.<link rel="icon" href="/images/favicon.ico">. זה עובד, אבל דפדפנים עדיין מחפשים את /favicon.ico בשורש האתר. או ששמים עותק גם בשורש, או שמשלימים עם שגיאות 404 ביומן הגישה.favicon.ico?v=2) או בניקוי המטמון של האתר.favicon.ico רב-רזולוציות (16/32/48), PNG בגודל 32×32, apple-touch-icon.png בגודל 180×180 ל-iOS, ו-PNG בגדלים 192×192 ו-512×512 שמוגדרים ב-site.webmanifest עבור Android ו-PWA שניתן להתקנה. החבילה שהכלי מוריד מכילה את כולם.<link rel="icon" type="image/png">. כולם גם תומכים בכתובת הישנה /favicon.ico. favicon מסוג SVG נתמך בדפדפנים מודרניים ומאפשר לקובץ אחד להתרחב בחדות לכל גודל. הוא מצוין אם הלוגו שלכם כבר וקטורי, אבל Safari ב-iOS עדיין צריך PNG כגיבוי.Cmd/Ctrl + Shift + R), נקו את נתוני האתר ב-DevTools, או הוסיפו מחרוזת שאילתה לכתובת ה-favicon (/favicon.ico?v=2). בדרך כלל צריך גם לנקות את ה-CDN שלפני האתר./apple-touch-icon.png. החבילה כוללת אותו.<canvas>, וכל פלט (קובצי PNG, ICO, ZIP, manifest) נוצר מקומית. שום דבר לא יוצא מהמחשב שלכם.