Page 1 of 1

วิธิการใส่ icon favorite เพื่อแสดงในแต่ละ browser

Posted: 31/03/2020 11:13 am
by Ittichai_chupol
สำหรับผุ้ใช้งานเว็บบราวเซอร์ทุกคนนั้น คงต้องการความสะดวกรวดเร็วได้การเข้าถึงเว็บไซต์ที่ต้องการของแต่ละบุคคลได้จากหน้าเเรกที่เข้ามาช้งานของเว็บบราวเซอร์ซึ่งโดยปกติเเล้วในเเต่ละเว็บเซอร์ก็จะมีฟังชั่นส่วนี้อยู่ด้วยกัน และทั้งนี้สำหรับเว็บไซต์หลายๆเว็บไซต์ก็ยังจะมีการทำให้ส่วนการแสดงดูหน้าใช้งานมากขึ้นโดยการใช้ favorite icon เพื่อใช่เป็นการระบุถึงเว็บไซต์ด้วย โดยเว็บ บราวเซอร์ที่มีผุ็ใช้งานจำนวนมากอย่าง safari chrome Firefox นั้นก็จะมีวิธีการสร้างหน้า favorite แตกต่างกันไป ร่วมทั้ง วิธีการดึงรูป icon ก็ต่างกันไปด้วย แต่ละ browser แต่ทั้งนี้ก็มีวิธีการที่สามารถจะทำได้ดังนี้


โดยการใส่ icon favorite จะนำมาใส่ในส่วนของ head ข้องหน้าเว็บใน html ดังนี้

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
       <head>

            //ส่วนนี้คือส่วนที่ใช่สำหรับเรียก icon favorite    มาใช้งาน
        <link rel="icon" href="favicon.ico"  type="image/ico">
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" >
        
               //icon favorite  มีอยู่ 4 ขนาด ดังนี้
               
        <link rel="icon" href=" link เก็บไฟล์รูปภาพไว้   "  sizes="32x32" >
        <link rel="icon" href=" link เก็บไฟล์รูปภาพไว้   " sizes="48x48" > // ขนาดที่นิยมใช้งาน เพราะสามรถแสดงได้หลายๆอุปกรณ์
        <link rel="icon" href=" link เก็บไฟล์รูปภาพไว้   " sizes="96x96" >
        <link rel="icon" href=" link เก็บไฟล์รูปภาพไว้   " sizes="144x144" >
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <title>HTML4</title>
    </head>



ตัวอย่างหน้าเว็บ html ที่สร้าจะแสดง icon favorite ใน safari ซึ่งจะสามารถใช้งานได้หลายขนาด 48

Code: Select all

<html lang="en">
    <head>
        //ส่วนนี้คือส่วนที่ใช่สำหรับเรียก icon favorite  สำหรับ  มาใช้งาน  
        <link rel="icon" href="favicon.ico"  type="image/ico">
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" >
        <link rel="icon" href="http://127.0.0.1/phpb6/styles/thaitest/theme/images/favicon_48.png" sizes="48x48" >
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <title>HTML4</title>
        <style>  
    <body>
    
    test
    
  </body>
</html>
ตัวอย่างผลลัพธ์


Selection_020 (1).png
Selection_020 (1).png (163.57 KiB) Viewed 1059 times

ตัวอย่างหน้าเว็บ html ที่สร้าจะแสดง icon favorite ในอุปกรณ์ chrome กับ Firefox ซึ่งจะสามารถใช้งานได้หลายขนาด 32 , 48 ,96 และ 144 ในตัวอย่างจะใช่ที่ขนาด 48

Code: Select all

<html lang="en">
    <head>
        //ส่วนนี้คือส่วนที่ใช่สำหรับเรียก icon favorite  สำหรับ  มาใช้งาน  
        <link rel="icon" href="favicon.ico"  type="image/ico">
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" >
        <link rel="icon" href="http://127.0.0.1/phpb6/styles/thaitest/theme/images/favicon_48.png" sizes="48x48" >
       <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <title>HTML4</title>
        <style>  
    <body>
    
    test
    
  </body>
</html>
ตัวอย่างผลลัพธ์

Firefox
The attachment Selection_021.png is no longer available

chrome
Selection_021.png
Selection_021.png (27.51 KiB) Viewed 1059 times

บทความที่เกี่ยวข้อง

การสร้าง Extension ใน phpbb
การสร้าง controller สำหรับ phpbb
Event listenner - เขียน Extension บน phpBB 3.1
วิธีการจัดทำการระบบแจ้้งเตือนใน phpbb

Re: วิธิการใส่ icon faverrite เพื่อแสดงในแต่ละ browser

Posted: 31/03/2020 12:25 pm
by numtan5839
favicon ใช้ขนาดเท่าไหร่คะ 16 32 48 :?:

Re: วิธิการใส่ icon faverrite เพื่อแสดงในแต่ละ browser

Posted: 31/03/2020 12:26 pm
by Ittichai_chupol
numtan5839 wrote: 31/03/2020 12:25 pm favicon ใช้ขนาดเท่าไหร่คะ 16 32 48 :?:
ขนาด 48 ดีสุด เพราะสามรถใช้ได้ทุก browser ทุกอุปกรณ์ด้วย

Re: วิธิการใส่ icon favorite เพื่อแสดงในแต่ละ browser

Posted: 31/03/2020 12:57 pm
by mindphp
ไฟล์ นามสกุล favicon.ico

1. 16 x 16 – Standard size for browsers
2. 32x32: taskbar shortcut icon
3. 96x96: For desktop shortcut icon
4. 180x180 apple touch
5. 192x192 android-chrome
การใส่

Code: Select all

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
favicon.ico เป็น default 16x16 ไม่ต้องระบุขนาดก็ได้ แต่ต้องใช้ชื่อเป็น favicon.ico

Re: วิธิการใส่ icon favorite เพื่อแสดงในแต่ละ browser

Posted: 02/04/2020 4:33 pm
by thatsawan
<link rel="icon" href="favicon.ico" type="image/ico">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" >
ต่างกันไง
เเล้วต้องใส่ตามขนาดด้วยมั้ย ต้องทุกขนาดมั้ย

Re: วิธิการใส่ icon favorite เพื่อแสดงในแต่ละ browser

Posted: 22/05/2020 3:14 pm
by LEG
:like: