Favicon, ไอคอน, ไอคอนทางลัด, apple-touch-icon: มีคนอื่นอีกไหม?


24

ฉันรู้ไอคอนเว็บพื้นฐานเริ่มต้น 2 แบบสำหรับเว็บไซต์:

  • Favicon : วาง.icoไฟล์ที่จัดรูปแบบไว้ที่รูทของไซต์ของคุณfavicon.icoและเบราว์เซอร์เดสก์ท็อปส่วนใหญ่จะพบไฟล์นั้นและแสดงในบริบทต่าง ๆ (บุ๊กมาร์กแท็บ) นอกจากนี้ยังสามารถเพิ่มในรหัสซึ่งช่วยให้คุณสามารถระบุชื่ออื่น ๆ และประเภทกราฟิกอื่น ๆ ไปยังไฟล์แม้ว่าจะมีข้อ จำกัด ประเภทและขนาดสำหรับเบราว์เซอร์ :

    <link rel="shortcut icon" href="/webmasters//favicon.ico" />
    <link rel="icon" href="/webmasters//favicon.ico" />
    
  • ไอคอนเว็บคลิป : วางpngไฟล์ที่มีการจัดรูปแบบที่เรียกว่าapple-touch-icon.pngหรือapple-touch-icon-precomposed.pngที่รูทของเว็บไซต์ของคุณและเวอร์ชันของ iPhone OS / iOS ของ Safari จะเลือกไฟล์เหล่านั้นและเก็บไว้เมื่อมีการเพิ่มไซต์ลงในหน้าจอโฮม สามารถเพิ่มด้วยรหัสเช่น:

    <link rel="apple-touch-icon" href="/webmasters//custom_icon.png" />
    

มีกราฟิกไอคอนเริ่มต้นอื่น ๆ สำหรับเว็บไซต์ที่ผู้ดูแลเว็บสามารถรวมได้หรือไม่

คำตอบ:


8

มันปรากฏอยู่บนพื้นฐานนี้และนี้ว่า Android จะใช้relประเภทของapple-touch-icon-precomposedหรือapple-touch-icon, แต่ที่เพื่อให้การทำงานที่คุณจำเป็นต้องใช้ URL ที่มีคุณสมบัติครบถ้วนเช่น:

<link rel="apple-touch-icon-precomposed"
      href="http://www.example.com/custom_icon.png" />

หรือ:

<link rel="apple-touch-icon"
      href="http://www.example.com/custom_icon.png" />

ข้อแม้คือที่นี้น่าจะเป็นสำหรับAndroid 2.1 ปรับปรุง 1 & Webkit 3.1 เอกสารนักพัฒนา Androidไม่พูดถึงวิธีการในการandroid.webkitที่เป็นเหตุการณ์เมื่อapple-touch-iconถูกเรียก


1

ขึ้นอยู่กับแพลตฟอร์มที่คุณกำหนดเป้าหมาย แต่ฉันคิดว่าเบราว์เซอร์มือถือที่รองรับมาตรฐานมากที่สุดเข้าใจแท็ก favicon เริ่มต้น บางทีคุณสามารถค้นหากรณีการใช้งานพิเศษ (เช่นสร้างทางลัดบนเดสก์ท็อปด้วยไอคอนพิเศษ) บนแพลตฟอร์มเช่น Android, iOS, WebOS, ...

ฉันเพิ่งพัฒนาเว็บไซต์บางแห่งที่กำหนดเป้าหมายไปยังผู้ใช้ iPhone และในเว็บไซต์นี้ฉันใช้ Wordpress ด้วยธีม WPTouch รุ่นพิเศษ

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.