1. כיצד ליצור סמל מועדף עבור האתר: עצות שימושיות ושירותים קשה לנחש מה הוא סמל מועדף כאשר אתה שומע את...
2. כיצד ליצור סמל מועדף ב - Photoshop
3. כיצד לשמור favicon
4. כיצד להוסיף אתר favicon
5. כיצד להחליף favicon
6. כיצד ליצור favicons מורכבים יותר

כיצד ליצור סמל מועדף עבור האתר: עצות שימושיות ושירותים

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

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

כיצד ליצור favicon

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

כאתר מועדף, אתרי אינטרנט אלה משתמשים בסמלים שלהם (או תמונות קרוב אליהם).

אין להשתמש בטקסט הנמצא ב - favicon, מכיוון שהטקסט יהיה בלתי קריא בשל גודל התמונה הקטן. החריגים היחידים לכלל זה הם תווי טקסט בעלי שם עולמי המשויכים אוטומטית למותג ספציפי. לדוגמה, המשאב המקוון Wikipedia השאיר על סמל האות "W", ו- Facebook - האות "F".

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

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

כדי למנוע זאת, עליך לשנות את גודל הלוגו באמצעות עורכי מיוחדים כגון Photoshop או GIMP. ראשית אתה צריך להקטין את הגודל של התמונה ל 64x64 פיקסלים (זהו הגדול favicon גודל). לאחר מכן, עליך לערוך כל פיקסל באמצעות הכלי עיפרון עד שהתמונה תהיה ברורה. זה תהליך מייגע, אבל התוצאה שווה את זה. כאשר favicon 64x64 מוכן, אתה צריך לעשות את אותה עבודה עם התמונה של 16 × 16, 24 × 24 ו 32 × 32 פיקסלים. כל כך הרבה גדלים אתה צריך התמונה המוצגת כראוי בכל דפדפנים וגאדג'טים:

• 64x64 - דפדפן סימניות סימניות;
• 32x32 - מציג ברזולוציה גבוהה (רשתית);
• 24x24 - סימניות Internet Explorer ו- MicroSoft Edge;
• 16x16 - Google Chrome ודפדפנים אחרים.

כיצד ליצור סמל מועדף ב - Photoshop

ראשית עליך ליצור כמה בדי ציור עם הממדים הנ"ל.

לאחר מכן עליך להוסיף סמל, מכתב או תמונה אחרת אל הבד.

כיצד לשמור favicon

לאחר יצירת סמלים בגדלים שונים, שמור כל אחד כקובץ PNG שקוף (24 סיביות). ב- Photoshop, באפשרותך להשתמש בתכונה 'שמור לאינטרנט' בתפריט 'קובץ'. אז אתה צריך למזג את כל קבצי PNG לקובץ ICO אחד. ניתן להשתמש בשני קובצי PNG ובקבצי ICO בו-זמנית, אך לעתים קרובות גם Safari ו- Chrome מעדיפים רק את פורמט ICO. לדעתי, קל יותר ליצור קובץ ICO אחד. פורמט ICO אינו נפוץ מאוד, אבל למרבה המזל ישנם מספר כלים שיכולים לעזור לך להמיר את הקבצים בפורמט זה. לשם כך, אני מעדיף להשתמש X-Icon עורך . זהו שירות מקוון חינם כי מיד ממיר תמונות שהורדו לתוך קובץ ICO אחד, ולאחר מכן ניתן להוריד אותו. זה לא מסובך, פשוט בצע את ההוראות באתר. אם אתה מחשיב את עצמך אדם נואש, אתה יכול להתנסות עם עורך פיקסל של שירות זה ולצייר סמל favicon עצמך. (למרות שאני מעדיף לערוך favicons בעורך מקצועי יותר, למשל, ב- Photoshop).

על ידי העלאת תמונות PNG שלך לעורך X-Icon, תקבל קובץ ICO אחד בפלט.

כיצד להוסיף אתר favicon

אז, יש לך כבר קובץ ICO. עכשיו אתה צריך להוסיף אותו לאתר. שנה את שם הקובץ ל- favicon.ico ומקם אותו בתיקיית השורש של האתר שלך (שם הקובץ index.html וקבצים סטנדרטיים אחרים מאוחסנים). לאחר הוספה מוצלחת, אתה יכול להציג אותו באתר שלך. Com / favicon.ico. כמעט כל הדפדפנים מחפשים את הקובץ favicon.ico בתיקיית השורש. לכן, חשוב כי אתה מוריד את סמל העכבר בתיקייה זו. עבור תאימות לדפדפנים שונים, עדיף לא להוסיף רכיבי HTML או קישורים שמציינים את מיקומו. טריק זה עובד עבור כל הדפדפנים, עד IE6. כמו כן, אם יש לך אתר וורדפרס, ואז ערכות נושא רבות אתה יכול להוסיף סמל מועדף בהגדרות ערכת הנושא. שיטה זו יכולה לשמש גם.

כיצד להחליף favicon

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

<link rel = "סמל קיצור" href = "אתר האינטרנט שלך .com / favicon.ico = v = 2" />

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

כיצד ליצור favicons מורכבים יותר

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

יותר גנרטורים מקוונים אתה יכול למצוא כאן .

אם אתה רוצה לשתף את הטיפים שלך על יצירת favicons או לשאול שאלה, אני מחכה לך את ההערות!