รูปภาพถัดจากชื่อเพจในแท็บเบราว์เซอร์ - คุณจะลิงก์รูปภาพที่นี่ได้อย่างไร
รูปภาพถัดจากชื่อเพจในแท็บเบราว์เซอร์ - คุณจะลิงก์รูปภาพที่นี่ได้อย่างไร
คำตอบ:
ภาพนั้นเรียกว่า' favicon 'และเป็น.icoไฟล์รูปสี่เหลี่ยมขนาดเล็กซึ่งเป็นประเภทไฟล์มาตรฐานสำหรับ Favicon คุณสามารถใช้.pngหรือ.gifมากเกินไป แต่คุณควรปฏิบัติตามมาตรฐานเพื่อความเข้ากันได้ที่ดีขึ้น
ในการตั้งค่าหนึ่งสำหรับเว็บไซต์ของคุณคุณควร:
สร้างภาพโลโก้ของคุณเป็นรูปสี่เหลี่ยมจัตุรัส (ควรเป็น 32x32 หรือ 16x16 พิกเซลเท่าที่ฉันทราบว่าไม่มีขนาดสูงสุด *) และแปลงเป็น.icoไฟล์ คุณสามารถทำเช่นนี้ใน Gimp, Photoshop (ด้วยความช่วยเหลือของปลั๊กอิน ) หรือเว็บไซต์เช่นFavicon.ccหรือRealFaviconGenerator
จากนั้นคุณมีสองวิธีในการตั้งค่า:
A) วางไว้ในโฟลเดอร์ราก / ไดเรกทอรีของเว็บไซต์ของคุณ (ถัดไปindex.html) favicon.icoที่มีชื่อ
หรือ
B) เชื่อมโยงระหว่าง<head></head>แท็กของทุก.htmlไฟล์ในไซต์ของคุณดังนี้:
<head>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
หากคุณต้องการดูfaviconจากเว็บไซต์ใด ๆ เพียงแค่เขียนwww.url.com/favicon.icoและคุณ (อาจ) จะเห็น Favicon ของ Stackoverflowคือ 16x16 พิกเซลและWikipediaคือ 32x32
*: แม้กระทั่งปัญหาเบราว์เซอร์ที่ไม่ จำกัด ขนาดไฟล์ คุณอาจทำให้เบราว์เซอร์พังได้อย่างง่ายดายด้วยไอคอน Fav ที่มีขนาดใหญ่มากข้อมูลเพิ่มเติมที่นี่
เรียกว่า ' favicon ' และคุณต้องเพิ่มโค้ดด้านล่างในส่วนส่วนหัวของเว็บไซต์ของคุณ
เพียงเพิ่มสิ่งนี้ลงใน<head>ส่วนนี้
<link rel="icon" href="/your_path_to_image/favicon.jpg">
นี่คือไอคอน Favและมีคำอธิบายในลิงค์
เช่นจาก W3C
<link rel="icon"
type="image/png"
href="http://example.com/myicon.png">
นอกจากนี้ไฟล์ภาพยังอยู่ในตำแหน่งที่เหมาะสม
<link rel="apple-touch-icon" sizes="114x114" href="${resource(dir: 'images', file:
'apple-touch-icon-retina.png')}">
หรือจะใช้อันนี้ก็ได้
<link rel="shortcut icon" sizes="114x114" href="${resource(dir: 'images', file: 'favicon.ico')}"
type="image/x-icon">
เพิ่มไฟล์ไอคอนชื่อ "favicon.ico" ที่รากของเว็บไซต์ของคุณ
16x16 px
**<HEAD>**
< link rel="icon" href="directory/image.png">
จากนั้นวิ่งและสนุกกับมัน