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

Graphic design ความรู้สำหรับ การออกแบบ ออกแบบเว็บ Phothoshop ตัดต่อวีดีโอ

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
Ittichai_chupol
PHP VIP Members
PHP VIP Members
โพสต์: 5410
ลงทะเบียนเมื่อ: 19/09/2018 10:33 am

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

โพสต์ที่ยังไม่ได้อ่าน โดย Ittichai_chupol »

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


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

โค้ด: เลือกทั้งหมด

<!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

โค้ด: เลือกทั้งหมด

<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 3016 times

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

โค้ด: เลือกทั้งหมด

<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
ไฟล์แนป Selection_021.png ไม่มีอยู่แล้ว

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

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

การสร้าง Extension ใน phpbb
การสร้าง controller สำหรับ phpbb
Event listenner - เขียน Extension บน phpBB 3.1
วิธีการจัดทำการระบบแจ้้งเตือนใน phpbb
แก้ไขล่าสุดโดย Ittichai_chupol เมื่อ 31/03/2020 1:23 pm, แก้ไขไปแล้ว 3 ครั้ง.
ขอให้วันนี้เป็นวันที่ดี
ภาพประจำตัวสมาชิก
numtan5839
PHP VIP Members
PHP VIP Members
โพสต์: 1706
ลงทะเบียนเมื่อ: 04/11/2019 10:18 am

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

โพสต์ที่ยังไม่ได้อ่าน โดย numtan5839 »

favicon ใช้ขนาดเท่าไหร่คะ 16 32 48 :?:
ภาพประจำตัวสมาชิก
Ittichai_chupol
PHP VIP Members
PHP VIP Members
โพสต์: 5410
ลงทะเบียนเมื่อ: 19/09/2018 10:33 am

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

โพสต์ที่ยังไม่ได้อ่าน โดย Ittichai_chupol »

numtan5839 เขียน: 31/03/2020 12:25 pm favicon ใช้ขนาดเท่าไหร่คะ 16 32 48 :?:
ขนาด 48 ดีสุด เพราะสามรถใช้ได้ทุก browser ทุกอุปกรณ์ด้วย
ขอให้วันนี้เป็นวันที่ดี
ภาพประจำตัวสมาชิก
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
โพสต์: 41231
ลงทะเบียนเมื่อ: 22/09/2008 6:18 pm
ติดต่อ:

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

โพสต์ที่ยังไม่ได้อ่าน โดย 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
การใส่

โค้ด: เลือกทั้งหมด

<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
ติดตาม VDO: http://www.youtube.com/c/MindphpVideoman
ติดตาม FB: https://www.facebook.com/pages/MindphpC ... 9517401606
หมวดแชร์ความรู้: https://www.mindphp.com/forums/viewforum.php?f=29
รับอบรม และพัฒนาระบบ: https://www.mindphp.com/forums/viewtopic.php?f=6&t=2042
ภาพประจำตัวสมาชิก
thatsawan
PHP VIP Members
PHP VIP Members
โพสต์: 28508
ลงทะเบียนเมื่อ: 31/03/2014 10:02 am
ติดต่อ:

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

โพสต์ที่ยังไม่ได้อ่าน โดย thatsawan »

<link rel="icon" href="favicon.ico" type="image/ico">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" >
ต่างกันไง
เเล้วต้องใส่ตามขนาดด้วยมั้ย ต้องทุกขนาดมั้ย
LEG
PHP Hero Member
PHP Hero Member
โพสต์: 105
ลงทะเบียนเมื่อ: 12/07/2019 2:54 pm
ติดต่อ:

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

โพสต์ที่ยังไม่ได้อ่าน โดย LEG »

:like:
ศูนย์รวมเครื่องวัดคุณภาพ https://legatool.com/
ผู้เชี่ยวชาญของตลาดเครื่องมือวัด อุปกรณ์ทดสอบ และชุดทดสอบที่ใหญ่ที่สุดในประเทศไทย
ตอบกลับโพส
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: Google [Bot] และบุคลทั่วไป 62