עקוב אחר דוגמה מעשית זו, ולאחר מכן התאם את אותם פקדים לתמונה שלך. פתח את מחולל פאביקון / ICO.
בחר לוגו ברור או התחל עם ראשי תיבות
פתח את Favicon / ICO Generator ובחר ב-Image. העלה PNG, JPG, JPEG, WebP או GIF, או בחר Try a sample. הדוגמה המעשית משתמשת ב-favicon-orbit.png, סימן מסלול סגול בגודל 512 × 512 פיקסלים עם פינות שקופות. הקלט הוא 202,491 בתים.
עבור מותג ללא לוגו מוכן, בחר Text בדף הכלי. הזן אות אחת או שתיים ובחר Continue. העורך מציע גופני Modern sans, Classic serif ו-Monospace, בתוספת צבעי טקסט ורקע נפרדים. עד שלושה תווים מתקבלים, אך תווים נוספים עלולים להפוך לקשים לזיהוי בגדלים קטנים.
שמור את הגרפיקה המקורית. המחולל יוצר קבצי אייקון חדשים ואינו דורס את המקור. קלט GIF הופך לאייקון סטטי ולא לפאביקון מונפש.
עבור מונוגרמה, תפריט הגופנים מתחיל בשלושה סגנונות כלולים. בחר Use system fonts בדפדפן שולחני נתמך ואפשר גישה כדי להוסיף את הגופנים המותקנים במכשיר שלך. השתמש בחצים הקודמים והבאים כדי להשוות גופנים סמוכים, או בחר משפחה ובדוק את התצוגה המקדימה החיה, במיוחד ב-16 פיקסלים. גופנים נשארים במכשיר שלך; הסגנונות הכלולים עובדים ללא הרשאה.
השתמש בצללית פשוטה. תצלום מפורט יכול להיראות אטרקטיבי ב-512 פיקסלים אך להפוך לנקודה לא ברורה ב-16 פיקסלים.
עדן את המסגור ובדוק תצוגות מקדימות קטנות
העורך מציג כרטיסיות דפדפן בהירות וכהות בתוספת תצוגות מקדימות בגדלי אייקונים נפוצים. בדוק תחילה את הדוגמה של 16 פיקסלים; זהו המבחן המחמיר ביותר לכך שהסימן נשאר ניתן לזיהוי. התצוגה המקדימה של Apple Touch מייצגת ייצוא של 180 פיקסלים ומוצגת קטנה יותר בסביבת העבודה.
בטלפון, פתח את Settings. השאר את Create from מוגדר ל-Uploaded image ואת Image fit מוגדר ל-Show the whole image. עבור דוגמה זו, הגדר את Space around content ל-0 ואפשר Transparent background. המקור כבר מכיל צורה סגולה מעוגלת משלו ושוליים ברורים, כך שהוא אינו זקוק לרקע צבעוני נוסף.
עם מקור אחר, Show the whole image שומר על הקצוות שלו, בעוד ש-Fill the icon עשוי לחתוך אותם. Rounded square, Square ו-Circle מגדירים את הצורה החיצונית. Transparent background שומר על אזורים ברורים אך אינו יכול להסיר רקע אטום שכבר מצויר בתמונה. סקור את התצוגה המקדימה הקטנה ביותר לאחר כל שינוי מסגור.
לוגו עם פינות שקופות יכול לקבל מסגרת שנייה לא רצויה אם תוסיף רקע אטום נפרד. סקור את שתי אפשרויות הרקע.
הדוגמה במדריך זה
נסה דוגמה: favicon-orbit.png, 512 × 512 פיקסלים. תמונה שהועלתה; הצג את כל התמונה; ריבוע מעוגל; מרווח סביב תוכן 0%; רקע שקוף מופעל; חבילת אייקונים לאתר (ZIP); שם אתר My website.
- תמונת מקור
- 512 × 512 PNG · 202,491 בתים
- ICO פריימים
- 16, 24, 32, 48, 64, 128 ו-256 פיקסלים
- חבילה
- 9 קבצים · 304,351 בתים
- תוצאה מוצגת
- פריים ICO אמיתי בגודל 256 × 256
בחר ICO מרובה גדלים או את חבילת האתר
תחת Download, בחר ב-Website icon package (ZIP) עבור דוגמה זו. השאר את Website name כ-My website עבור הדוגמה, או החלף אותו בשם המותג האמיתי עבור הפרויקט שלך. שם זה משמש ב-site.webmanifest; הוא לא מתווסף כטקסט על גבי התמונה.
בחר ב-Start. הדפדפן מייצר favicon.ico בעל שבעה פריימים עם תמונות מרובעות בגדלים 16, 24, 32, 48, 64, 128 ו-256 פיקסלים. הוא גם יוצר אייקוני PNG בגדלים 16, 32, 48, 180, 192 ו-512 פיקסלים, מניפסט והוראות התקנה. התוצאה היא קובץ ZIP אחד במקום כפתור הורדה נפרד לכל אייקון.
אם אתה זקוק רק ל-favicon.ico קלאסי, בחר ב-Multi-size ICO במקום. זה שימושי כאשר פלטפורמת אתר מקבלת העלאת ICO ואינה זקוקה לחבילה נפרדת.
החבילה היא סט של נכסי אייקון לאתר. היא לא הופכת את האתר באופן אוטומטי לאפליקציית אינטרנט פרוגרסיבית (PWA).
הורד, התקן ואמת את קבצי האייקון
הורדה שומרת את website-icons.zip. הדוגמה המעשית מכילה תשעה קבצים וגודלה 304,351 בתים. ההשוואה לעיל מציגה את המקור בגודל 512 פיקסלים לצד הפריים האמיתי בגודל 256 פיקסלים שחולץ מה-ICO המיוצא, ולא צילום מסך מדומה של דפדפן.
חלץ את ה-ZIP, העלה את קבצי האייקון לשורש האתר שלך וקרא את INSTALL.txt. הוא כולל תגיות קישור HTML עבור ה-ICO, אייקון PNG, אייקון Apple Touch ומניפסט אינטרנט. אם אתה מציב את הקבצים בתיקיית משנה, עדכן גם את נתיבי ה-HTML וגם את נתיבי האייקון בתוך site.webmanifest.
בדוק את האתר שלך בלשונית דפדפן חדשה ובמכשירים שחשובים לך. דפדפנים יכולים לשמור פאביקונים במטמון, כך שאייקון ישן לא מוכיח מיד שההתקנה נכשלה. שמור את תמונת המקור והחבילה שהורדת לפני רענון העורך, מכיוון שרענון מחזיר לדף הכלי הראשי.
בחר מיקום קנוני אחד לאייקון ושמור על נתיבי ה-HTML עקביים. המחולל יוצר נכסים; פרסומם נשאר חלק מתהליך העבודה של האתר שלך.
שאלות נפוצות
האם אני יכול ליצור favicon ללא העלאת לוגו?
כן. בחר בטקסט, הזן את ראשי התיבות שלך, ולאחר מכן בחר את הגופן, הצבעים, הצורה והמרווחים בעורך.
אילו גדלים נמצאים בתוך קובץ ה-ICO?
ה-ICO מכיל שבע מסגרות מבוססות PNG: 16, 24, 32, 48, 64, 128 ו-256 פיקסלים רבועים. הדפדפן בוחר את המסגרת המתאימה.
מה כלול ב-ZIP של האתר?
הוא מכיל favicon.ico, שישה אייקוני PNG לשימוש בדפדפן, Apple ו-Android, קובץ site.webmanifest ו-INSTALL.txt עם תגיות הקישור HTML.
האם ל-favicon שלי יכול להיות רקע שקוף?
כן. הפעל רקע שקוף. זה משמר אזורים שקופים סביב המקור; זה לא מסיר רקע אטום מתמונה.
האם התמונה מועלית לצורך המרה?
לא. כלי זה מייצר ואורז את קבצי האייקונים בדפדפן שלך. שמור את הקבצים שהורדו מכיוון שהעורך אינו מהווה אחסון פרויקטים קבוע.
האם אני יכול להשתמש בגופנים המותקנים במחשב שלי?
כן, כאשר הדפדפן שלך תומך בגישה לגופנים מקומיים. בחר טקסט / מונוגרמה, בחר השתמש בגופני מערכת ואשר את הרשאת הדפדפן. משפחות הגופנים הזמינות שלך יופיעו ברשימת הגופנים. הסגנונות הכלולים יישארו שמישים אם ההרשאה נדחתה או שגישה לגופנים מקומיים אינה זמינה.
תן לאתר הבא שלך חתימה קטנה וברורה.
נסה דוגמה או השתמש בקובץ משלך, ועיין בתוצאה לפני השיתוף.
