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

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

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

User avatar
Ittichai_chupol
PHP VIP Members
PHP VIP Members
Posts: 5410
Joined: 19/09/2018 10:33 am

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

Post 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 988 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 988 times

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

การสร้าง Extension ใน phpbb
การสร้าง controller สำหรับ phpbb
Event listenner - เขียน Extension บน phpBB 3.1
วิธีการจัดทำการระบบแจ้้งเตือนใน phpbb
Last edited by Ittichai_chupol on 31/03/2020 1:23 pm, edited 3 times in total.
ขอให้วันนี้เป็นวันที่ดี
User avatar
numtan5839
PHP VIP Members
PHP VIP Members
Posts: 1706
Joined: 04/11/2019 10:18 am

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

Post by numtan5839 »

favicon ใช้ขนาดเท่าไหร่คะ 16 32 48 :?:
User avatar
Ittichai_chupol
PHP VIP Members
PHP VIP Members
Posts: 5410
Joined: 19/09/2018 10:33 am

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

Post by Ittichai_chupol »

numtan5839 wrote: 31/03/2020 12:25 pm favicon ใช้ขนาดเท่าไหร่คะ 16 32 48 :?:
ขนาด 48 ดีสุด เพราะสามรถใช้ได้ทุก browser ทุกอุปกรณ์ด้วย
ขอให้วันนี้เป็นวันที่ดี
User avatar
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
Posts: 25523
Joined: 22/09/2008 6:18 pm
Contact:

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

Post 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
ติดตาม 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
User avatar
thatsawan
PHP VIP Members
PHP VIP Members
Posts: 26696
Joined: 31/03/2014 10:02 am
Contact:

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

Post by 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
Posts: 105
Joined: 12/07/2019 2:54 pm
Contact:

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

Post by LEG »

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

Return to “Graphic design”

Who is online

Users browsing this forum: No registered users and 8 guests