סט Favicon שעובד בכל מקום ב-2026
שש גדלים, ایک .ico אחד, manifest אחד — הכל מה שאתה באמת צריך כדי לשלוח favicon שנראה נכון בכל דפדפן, מסך הבית של iOS וסרגל המשימות של Windows ב-2026.
Favicons נראים טריוויאליים. שלח אחד ומאה edge cases מופיעים: אייקון מסך הבית של iOS מטושטש, כרטיסייה ב-Android Chrome בצבע שגוי, Windows pins מראים 16×16 טשטוש. המדריך הזה חותך את הרעש ומכסה בדיוק מה שאתה צריך ב-2026 — לא יותר, לא פחות.
הסט המינימום ברמת ביצוע
שש assets מכסים כל משטח שיציג את אייקון האתר שלך:
favicon.ico— מיכל בעל גדלים מרובים עם 16×16, 32×32, 48×48 בתוכו (דפדפנים legacy, Windows Explorer, כרטיסיות מקובעות).favicon-16x16.png,favicon-32x32.png— כרטיסיות דפדפן מודרניות.apple-touch-icon.png(180×180) — מסך בית של iOS, רשימת קריאה של Safari.android-chrome-192x192.png,android-chrome-512x512.png— מסך בית של Android, בקשות התקנה של PWA.site.webmanifest— תצורת PWA המצביעה על אייקוני Android ומגדירה את צבע הערכה.
זה הכל. כל השאר (Safari pinned tab SVG, גרסאות Apple touch ישנות, תמונות Windows tile) הוא legacy. דפדפנים מודרניים נופלים בחזרה בחן לـ 192 או 512 PNG.
למה .ico עדיין משלוח ב-2026
קובץ .ico הוא מיכל בינארי שיכול להכיל מספר תמונות PNG בגדלים שונים. כאשר דפדפן שואל /favicon.ico (שחלקם עדיין עושים זאת כברירת מחדל), הוא מקבל את כל שלוש הגדלים בבקשה אחת. המרחק בוחר את זה שמתאים הכי טוב למשטח הנוכחי — 48×48 עבור Windows Explorer, 16×16 עבור כרטיסייה בדפדפן.
PNG שהשם שלו שונה לـ .ico מכיל רק גודל אחד. זה בעיקר עובד כי דפדפנים סלחנים, אך Windows Explorer וחלק מלקוחות דוא״ל או יעבדו אותו בטשטוש או יסרבו להציג אותו. שלח .ico אמיתי אם אתה רוצה עקביות.
מה עושה site.webmanifest
כאשר משתמש מוסיף את האתר שלך למסך הבית של Android או מתקין אותו כ-PWA, הדפדפן קורא site.webmanifest כדי לדעת כיצד היישום המותקן צריך להיראות. זה מגדיר:
name/short_name— התווית מתחת לאייקון.icons— אילו PNGs להשתמש בגודל איזה.theme_color— צבע של סרגל המצב כאשר האפליקציה פתוחה.background_color— צבע רקע של מסך Splash במהלך ההשקה.display— בדרך כללstandaloneכך שהאפליקציה נפתחת ללא chrome דפדפן.
ללא manifest, Android חוזר לـ apple-touch-icon ומציג את האתר שלך בתוך חלון דפדפן. עם אחד, זה נראה כמו אפליקציה מקומית.
קטע HTML
כל קובץ הולך בשורש האינטרנט שלך. כל אתר צריך בלוק זה ב-<head>:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#YOUR_HEX">עיצוב עבור 16×16
הלוגו הפרטי היפה שלך מת ב-16 פיקסל. הכללים ליצירת favicon שנקרא בבירור בגודל הזה:
- צורה אחת. עיגול, ריבוע או monogram חזק. הימנע מצורות מורכבות.
- ניגודיות גבוהה. ה-foreground וה-background חייבים להיות לפחות בנפרדות WCAG AA. gradients עדינים נעלמים.
- שוליים בטוחים. השאר 10–20% ריפוד. דפדפנים לעתים קרובות מוסיפים גבול 1px משלהם.
- טקסט? אות מודגשת אחת עובדת טוב יותר מאשר מילה מלאה ב-16px.
הaukimi Favicon Generator מייצר את כל שש הקבצים וקטע ה-HTML מתמונה אחת או אות בפחות מ-30 שניות. זה יוצר .ico multi-size אמיתי (לפי Microsoft ICONDIR spec), לא PNG שהשם שלו שונה. העלה, בחר את הגדלים שלך, הורד חבילה ללא zip, הדבק את הקטע — בוצע.
טעויות נפוצות
- הצגת
.icoמ-CDN ללא cache headers. דפדפנים שומרים favicons בקשיחות. השתמש ב-URL גרסה (?v=2) כדי לכפות רענון לאחר עיצוב מחדש. - אייקוני שונים לכל תחום משנה.
favicon.icoבודד ב-apex הוא בדרך כלל מה שמשתמשים מצפים — אל תפצל את הזהות שלך. - שכחת meta
theme-color. Mobile Chrome צובע את chrome הדפדפן כדי להתאים לערך זה. דילוג עליו משאיר אותך עם האפור ברירת המחדל.
favicon טוב הוא משעמם בדרך הטובה ביותר — משתמשים מבחינים כאשר זה חסר או שגוי, לעולם לא כאשר זה נכון. שלח את שש הקבצים והמשך הלאה.
נהנית מהמאמר?
מאמרים קשורים
המחסום הקריאטיבי קרס: שבוע אחד של כלי AI, סוף אפריל 2026
בין 27 באפריל ל-4 במאי 2026, Adobe, Luma, Novi, fal, Figma, Canva, HeyGen ו-Anthropic חצו את אותו סף תוך שמונה ימים. הנה מה שהשתחרר, מה זה אומר, והיכן זה משאיר את חוקי הדפדפן הקריאטיביים שמנסים לגבש את הכל.
מוזיקה ו-SFX בבינה מלאכותית ב-2026: מה באמת עובד באודיו של משחקי Indie
לפני שלוש שנים, אודיו של משחקי Indie הגיע מאחד משני מקומות: ספריות ללא זכויות יוצרים (זול, גנרי, כל משחק נשמע אותו דבר) או שכרת של מלחין (מעולה, יקר). ב-2026, בינה מלאכותית יוצרת ניקוד שישלח לשוק. הנה איזה כלים אמינים — והיכן מלחין אנושי עדיין מנצח.
יצירת Mesh באמצעות AI בשנת 2026: מה באמת משתלם בצינורות Game
Image-to-3D עבר מ"דמו מוזר" ל"משלוח בפרויקטים indie" תוך שמונה עשר חודשים. הנה מה שTripo, Meshy, Rodin, וHyper3D באמת עושים בייצור — ואיפה אומן 3D עדיין משחק כל פעם.