favicon คืออะไร มีประโยชน์ยังไง

&NewLine;<h4 class&equals;"wp-block-heading">Favicon คืออะไร มีประโยชน์ยังไง <&sol;h4>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph">Favicon เป็นการนำคำว่า Favorite และ Icon มารวมเข้าด้วยกัน ซึ่งจะนำไป ใช้เป็นโลโก้ของเว็บไซต์ขนาดเล็ก เพื่อสร้างจุดสนใจ ให้คนที่ทำการหาข้อมูลบนหน้าค้นหาของ Google เกิดการสังเกตเห็นได้ง่าย สร้างความแตกต่าง และ ที่สำคัญคือ ยังสามารถช่วยให้ผู้ค้นหาสามารถจดจำเว็บไซต์ของเราได้ เป็นตัวช่วยในการเพิ่มโอกาสการคลิกเข้าถึงคอนเทนต์ของเราได้มากยิ่งขึ้น<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<h4 class&equals;"wp-block-heading">Favicon แสดงตรงไหนบ้าง<&sol;h4>&NewLine;&NewLine;&NewLine;&NewLine;<ul class&equals;"wp-block-list"><li>แสดงตรง address bar ตรงที่อยู่เว็บไซต์<&sol;li><li>แสดงที่ Favorite Tab &lpar; เปิดแท็บของ Browser ใหม่แต่ยังไม่ได้ไปที่หน้าเว็บไซต์ไหน &rpar;<&sol;li><li>แสดงเป็นไอคอนของแอพทั้งใน Android และ iOS กรณีเว็บไซต์พัฒนาเป็น Progressive Web Apps<&sol;li><&sol;ul>&NewLine;&NewLine;&NewLine;&NewLine;<h4 class&equals;"wp-block-heading">วิธีทำ Favicon<&sol;h4>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph">วิธีทำ favicon อย่างง่าย เราสามารถทำ favicon ได้เองง่าย ๆ เพียงแค่สร้างไฟล์ขนาด 16&&num;215&semi;16 pixel และเซฟเป็นไฟล์นามสกุล &period;icon จากนั้นก็เพิ่ม tags ในส่วน head ของเว็บไซต์ คือ<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<pre class&equals;"wp-block-code"><code class&equals;"">&lt&semi;link rel&equals;"icon" href&equals;"favicon&period;png"><&sol;code><&sol;pre>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph"><&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph">แต่การทำแบบข้างต้นจะเป็นเพียงการทำ favicon ให้แสดงบน address bar เพียงส่วนเดียว การจะทำ favicon ให้รองรับการแสดงผลอย่างสมบูรณ์ในทุกตำแหน่งบน Browser และทุกระบบปฏิบัติการ ทุก Platform จะต้องทำรูปในขนาดที่แตกต่างกันจำนวนมาก ในปัจจุบันเราสามารถใช้เครื่องมือเพื่อ Generate Favicon จากรูปภาพขนาดใหญ่เพียงรูปเดียวให้สามารถรองรับทุก Browser ทุกระบบปฏิบัติการ และทุก Platform ได้ ตัวอย่างเว็บไซต์ที่ให้บริการคือ <a href&equals;"https&colon;&sol;&sol;www&period;favicon-generator&period;org" target&equals;"&lowbar;blank" rel&equals;"noreferrer noopener">https&colon;&sol;&sol;www&period;favicon-generator&period;org<&sol;a><&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph">ตัวอย่าง Tags และขนาดรูปทั้งหมดที่จะต้องทำให้รองรับการแสดง Favicon<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<pre class&equals;"wp-block-code"><code class&equals;"">&lt&semi;link rel&equals;"apple-touch-icon" sizes&equals;"57x57" href&equals;"&sol;apple-icon-57x57&period;png">&NewLine;&lt&semi;link rel&equals;"apple-touch-icon" sizes&equals;"60x60" href&equals;"&sol;apple-icon-60x60&period;png">&NewLine;&lt&semi;link rel&equals;"apple-touch-icon" sizes&equals;"72x72" href&equals;"&sol;apple-icon-72x72&period;png">&NewLine;&lt&semi;link rel&equals;"apple-touch-icon" sizes&equals;"76x76" href&equals;"&sol;apple-icon-76x76&period;png">&NewLine;&lt&semi;link rel&equals;"apple-touch-icon" sizes&equals;"114x114" href&equals;"&sol;apple-icon-114x114&period;png">&NewLine;&lt&semi;link rel&equals;"apple-touch-icon" sizes&equals;"120x120" href&equals;"&sol;apple-icon-120x120&period;png">&NewLine;&lt&semi;link rel&equals;"apple-touch-icon" sizes&equals;"144x144" href&equals;"&sol;apple-icon-144x144&period;png">&NewLine;&lt&semi;link rel&equals;"apple-touch-icon" sizes&equals;"152x152" href&equals;"&sol;apple-icon-152x152&period;png">&NewLine;&lt&semi;link rel&equals;"apple-touch-icon" sizes&equals;"180x180" href&equals;"&sol;apple-icon-180x180&period;png">&NewLine;&lt&semi;link rel&equals;"icon" type&equals;"image&sol;png" sizes&equals;"192x192" href&equals;"&sol;android-icon-192x192&period;png">&NewLine;&lt&semi;link rel&equals;"icon" type&equals;"image&sol;png" sizes&equals;"32x32" href&equals;"&sol;favicon-32x32&period;png">&NewLine;&lt&semi;link rel&equals;"icon" type&equals;"image&sol;png" sizes&equals;"96x96" href&equals;"&sol;favicon-96x96&period;png">&NewLine;&lt&semi;link rel&equals;"icon" type&equals;"image&sol;png" sizes&equals;"16x16" href&equals;"&sol;favicon-16x16&period;png"><&sol;code><&sol;pre>&NewLine;