בחינם · ללא הרשמה · פועל בדפדפן

יצירת פאביקון

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

גררו לכאן את הלוגו

PNG, JPG, WebP או SVG. עדיפה תמונה ריבועית של לפחות 512 פיקסלים.

נוצר בדפדפן. התמונה לא מועלת לשרת.

נסו אחת מהדוגמאות שלנו

מהו פאביקון ואיפה הוא מופיע

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

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

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

למה פאביקון אחד הופך לערכת קבצים

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

כרטיסיות, סימניות והיסטוריה משתמשות ב־favicon.ico, קובץ אחד שמכיל גרסאות של 16, 32 ו־48 פיקסלים. זהו הפורמט הוותיק ביותר; כשעמוד לא מציין אייקון, הדפדפן עדיין מחפש favicon.ico בתיקייה הראשית של האתר.

אם מתחילים מ־SVG, מקבלים גם favicon.svg לדפדפנים שתומכים באייקוני SVG. הוא מורכב מצורות ולא מפיקסלים ונשאר חד בכל מסך.

iPhone ו־iPad משתמשים ב־apple-touch-icon.png, ברוחב ובגובה של 180 פיקסלים, כשמוסיפים אתר למסך הבית. iPhone ממלא שקיפות בשחור, לכן האייקון מקבל תמיד רקע אטום: הצבע שלכם, או לבן אם בחרתם בשקיפות.

טלפוני Android ואתרים שמותקנים כאפליקציות מהדפדפן משתמשים ב־icon-192.png וב־icon-512.png. הם מאתרים אותם דרך site.webmanifest, קובץ טקסט קטן שמציין את שם האתר, אם הזנתם אותו, ואת מיקום האייקונים הגדולים.

קובצי ה־PNG הנפרדים בגדלים 16 עד 48 פיקסלים הם חלופות לשירותים שמבקשים PNG. לתוצאות החיפוש, Google קוראת את קישורי האייקונים ב־HTML של דף הבית.

איך מוסיפים את הקבצים לאתר

אם אתם או המפתחים שלכם עורכים את קובצי האתר, יש שני שלבים.

ראשית, חלצו את הקובץ הדחוס והניחו את הקבצים בתיקייה הראשית של האתר, שבה נמצא דף הבית. לבדיקה, הוסיפו /favicon.ico לכתובת האתר; האייקון אמור להיפתח.

שנית, הדביקו את שורות ה־HTML מה־README, שמוצגות גם בכלי, באזור head של העמודים: החלק בראש ה־HTML שמכיל את כותרת העמוד. יש שורה ל־ICO, לאייקון מסך הבית של Apple ולמניפסט, וגם ל־SVG אם קיים.

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

במערכת לבניית אתרים אפשר לדלג על שני השלבים: מעלים icon-512.png בהגדרת אייקון האתר, והמערכת מוסיפה את ה־HTML בשבילכם.

איך מתאימים לוגו ל־16 פיקסלים

בגודל 16 על 16, כל האייקון מורכב מ־256 ריבועי צבע זעירים. רוב הלוגואים לא נוצרו לכך.

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

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

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

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

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

מתי צריך לצייר גרסה קטנה במקום להקטין

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

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

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

שאלות נפוצות

שאלות על פאביקונים

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

תמונה ריבועית עם לפחות 512 פיקסלים בכל צלע. האייקון הגדול בערכה הוא 512 פיקסלים, ולכן PNG, JPG או WebP קטנים יותר נמתחים והאייקונים הגדולים נעשים פחות חדים. הכלי מתריע על כך. ב־SVG אין מגבלה כזאת, כי הוא מורכב מצורות ולא מפיקסלים. לוגו רחב ממלא רק פס דק בריבוע, לכן התחילו מהסמל או מהאות הראשונה.

צריך את כולם, כי דפדפנים וטלפונים מבקשים קבצים שונים, וה־HTML של הכלי מפנה כל אחד לקובץ המתאים. כל דפדפן מבין ICO. קובצי PNG מיועדים לטלפונים ולאפליקציות מותקנות, עם חלופות בגדלים קטנים. SVG נשאר חד בכל מסך בדפדפנים שתומכים בו; מקבלים אותו כשמתחילים מ־SVG.

כנראה הדפדפן מציג עותק שמור. הוא שומר פאביקונים הרבה יותר זמן משאר העמוד, ולכן האייקון הישן יכול להישאר גם אחרי שהקבצים החדשים פורסמו. נסו רענון מלא: Ctrl+Shift+R ב־Windows, או Cmd+Shift+R ב־Mac, וב־Safari ‏Option+Cmd+R. אם זה לא עוזר, פתחו את כתובת האתר עם /favicon.ico בסוף ורעננו, או נסו חלון פרטי. דפדפנים של אחרים יתעדכנו עם הזמן.

בהגדרות המערכת ולא בתיקייה. לרוב המערכות לבניית אתרים וחנויות יש הגדרת אייקון אתר או פאביקון, שאליה מעלים PNG ריבועי. בחרו icon-512.png, הקובץ הגדול בערכה, כדי שיהיה מספיק מידע ליצירת גדלים קטנים. אם נדרש גודל מסוים, השתמשו בקובץ המתאים. המערכת מוסיפה את ה־HTML, ולכן אפשר לדלג על הוראות ה־README.

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