הוספת אייקון לאתר

[16 בינואר 2008] [30 תגובות]

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

הנה דוגמה מהאתר של ויקיפדיה:

שימו לב לאייקון(האות W) שמוצגת משמאל לכתובת האתר.

ניתן בקלות להוסיף אייקון כזה לכל אתר, לפי המתכון הבא:

  1. יוצרים סמל לאתר: יש ליצור תמונה קטנה בגודל 32x32 בכל אחת מתוכנות הציור האהובות עליכם(MSPaint, Paint Shop Pro, Photoshop).
  2. ניגשים לאתר ליצירת אייקונים, מעלים את התמונה שיצרתם והאתר יוצר קובץ בשם favicon.ico
  3. הורידו את הקובץ, והעלו אותו לסיפרייה הראשית של אתרכם.
  4. בקוד ה-HTML של האתר שלכם, הוסיפו את הפקודה הבאה, בתוך בלוק ה-HEAD:

<head>
        <link rel="shortcut icon" href="favicon.ico" />
</head>

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

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

30 תגובות

  1. מעולה, תודה רבה | 7/29/2008 10:32:03 AM
  2. אנונימוס | 1/16/2009 1:42:08 PM
    ואם האתר שלך על רשת בניית אתרים באינטרנט לאן אני צריך להכניס את התמונה?????
  3. אלי | 1/17/2009 3:24:49 AM
    למר אנונימוס, בכל דף שאתה רוצה שהלוגו יופיע בוא תכניס את הפקודה הזו
      <link rel="shortcut icon" href="favicon.ico" />

    עם האייקון שלך, לתוך התאג head

  4. יובל | 2/23/2009 1:59:31 PM
    תודה רבה, הסבר ממש פשוט וקל, הוספתי אייקון לאתר שלי בזכותכם. תודה!
  5. חמודה מאוד | 7/29/2009 9:16:28 AM
    לא הצלחתי, האייקון לא עולה. מה לעשות?
  6. טל | 7/30/2009 12:49:41 PM
    אם עקבת אחרי ההוראות, זה אמור להצליח. אם תתני את כתובת האתר שבו הכנסת את השינויים, אני אוכל לבדוק מדוע האייקון לא עולה.
  7. אלי | 8/19/2009 3:16:03 AM

    תודה על הטיפ!!

    זה עובד לי בff אך לא בie8 יש לך מושג למה?

  8. טל | 8/19/2009 8:28:51 AM

    זה כנראה באג ב-IE8... ראיתי גם כמה דיונים על כך ברשת. האם אתה רואה אייקונים של אתרים אחרים ב-IE8?

    תנסה לנקות את ה-Temporary Internet Files דרך ה-Options ואז לגלוש לאתר שלך בשנית.

  9. אלי | 8/19/2009 8:33:12 AM

    זה פשוט נפתר מעצמו משום מה...

    אולי אחרי סגירה של הדפדפן ולא רק ריענון שלו..

    תודה רבה בכל אופן!!

  10. דיקלה | 8/28/2009 11:54:31 PM

    עקבתי אחר ההוראות כולל מחיקת קבצים זמניים - והאייקון לא עולה.... גם בבדיקה דרך האתר באמצעותו יצרתי את האייקון החיווי הוא שהכל תקין...

    הצילו....

  11. טל | 8/29/2009 5:12:03 AM

    @דיקלה, אני רואה אות באתר שלך... הציפור הקטנה...

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

  12. איתי | 1/4/2010 10:18:59 AM
    מדריך מעולה תודה רבה!
  13. תזונה | 1/9/2010 3:41:05 AM
    אני עישתי אותו דבר אבל האתר שלי בנוי במערכת מוכנה אך אני יכול לשנות את הhead
  14. טל | 1/9/2010 9:36:46 AM

    על מנת להוסיף את האייקון, חייבת להיות גישה לשינוי קבצי ה-HTML והידע הבסיסי לערוך אותם.

     

  15. אלי | 1/10/2010 12:39:08 PM

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

     

    ניסיתי לעשות כפי ההוראות, וזה לא הולך.

     

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

     זו כתובת האייקון

     http://cid-fcda20909c450c64.skydrive.live.com/self.aspx/.Public/favicon.ico

     וככה משתנה השורה לאחר שמירת השינויים בבלוגר, 

     <link href='http://cid-fcda20909c450c64.skydrive.live.com/self.aspx/.Public/favicon.ico' rel='shortcut icon'/>

     הבלוג - http://shliches.blogspot.com/

     

     בתודה

     

  16. טל | 1/10/2010 1:06:55 PM

    שמתי לב שיש ב-Header עוד שורה שבלוגר כנראה הוסיף:

    link type="image/vnd.microsoft.icon" rel="icon" href="http://www.blogger.com/favicon.ico"/

    תנסה להוריד אותה ולראות אם זה עוזר.

  17. אלי | 1/10/2010 1:50:44 PM

    עכשיו אני רואה את השורה המחורבנת הזו,

     

    אבל זה לא משהו שאני יכול לשלוט עליו מהעריכה בHTML בבלוגר. זה פשוט לא מופיע לי.

    יש דרך לעקוף את זה (כמו השורה להסרת הנביגייטור)? 

  18. טל | 1/10/2010 1:56:55 PM

    @אלי, תבדוק את מה שכותבים כאן:

    http://blogging.nitecruzr.net/2009/01/setting-up-favicon-for-your-blog.html

    הם מסבירים איך לעקוף את זה.

  19. אלי | 1/10/2010 2:53:51 PM

    או!

    סופסוף

     

    העתקתי משם והלך יפה מאוד.

    ניסיתי לחפש באנגלית אבל המילה "Blogger" מביאה יותר מדי תוצאות בלי קשר... 

    תודה רבה!

     

    עדיין קיימים אנשים טובים 

     

  20. אלירם משה | 3/6/2010 10:55:23 AM

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

    האם יש תוכנה או אפילו תוסף בפיירפוקס

    חיפשתי ולא מצאתי

     

  21. טל | 3/6/2010 1:34:11 PM

    ברוב האתרים פשוט צריך להוסיף favicon.ico לשורת הכתובת ולהוריד את האייקון. לדוגמה:

    www.google.co.il/favicon.ico

    www.digg.com/favicon.ico

  22. אוראלושש | 3/27/2010 2:55:07 AM
    עשיתי את כול ההראות והכול הורדתי למחשב אבל מה זה ספרייה הראשית??? יש לי אתר בטיפו אבל מה זה ספרייה ראשית כניראה בגלל זה זה לא עובד כי לא הורדתי לספרייה ראשי ת כי אנילי מושג מה זה!! תוסיף מדריך נורמלי לא הבנתיי הכול!
  23. מוריה | 5/12/2010 11:56:03 PM
    מעולה !!! תודה רבה !!! עקבתי אחרי ההוראות - אחד אחד והכל עלה כמו שצריך.
  24. אנונימוס | 9/17/2010 5:29:43 AM

    בניתי אתר ולא הצלחתי לעשות לא אייקון

    וגם ההסבר הזה לא עבד!!

    עזרה!! 

  25. שני טולדנו | 12/13/2010 12:14:52 AM

    גם לי בהתחלה עשה קצת בעיות, אבל בסוף הכל הסתדר.

    תודה רבה על המדריך הקצר והמעולה!

  26. שני | 3/21/2012 5:23:36 AM
    מעולה! תודה רבה!:)
  27. שחר | 12/3/2012 5:29:43 AM

    איפה הספריית קבצים של האתר שלי בכלל?

    אני ממש חדשה עם הפוטושופ וזה קשה להבין משהו שכל הפוטושופ באנגלית!!

    שחר

  28. שחר | 12/3/2012 5:54:06 AM

    ואיך מורידים בכלל קובץ?

    זה באמת חשוב לי!!!!!!!!!!!

  29. אדם | 4/26/2013 2:41:56 AM

    יש אפשרות להוסיף לאתר שלי גם אייקון?

     

     http://danna-celebs.blogspot.co.il/

  30. 047 | 11/12/2013 5:57:21 AM

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

    נ.ב.

    אפשר ליצור קובץ ICO בלכיחת תמונה רגילה ואחר כך לשנות את הסיומת ל ICO . 

התגובות נעולות