![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEJdnYx6eRJ_YDug7huxdoPOXQkuppeONOF0-mA-KUktuPsHo-cZwhY1RXvn3xIng-3p1ayjaVCNK-v17juQKGfFhCJHSKIDrqaSfGgiGhI_dXZsrtQf0o2XG2jBqynS3NjLr8_Hjsm7k/s1600/Favicons-800x445.png)
เราจะเห็นว่ามันจะอยู่ในตำแหน่งนี้ และมีหน้าตาแบบนี้
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqk3W21dHvdgvu3NkkKusrT2m2I731PJ4DUQc_X1xwZEvWcGOlnaJz5pQquhM5VOLzaSmzBxB65gTXzdbHx2ZNPWpTqhx-FZq7Zo6L3OfLueANhgD0q04WYBFC7amCtk4A5O2suj-34ms/s1600/2015-07-08_142648.png)
ในขณะที่ถ้าบางเว็บไม่มีจะมีหน้าตาแบบนี้
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM4UFyCOj3nG_1q2y4-3SrUrbaG1swgyjGUf47OystC3noX2243U1Kwg7ku2VHcQvdYrAxRN-b33SLKRsnC_4zkLV9o9tfK9zANCCG8a01q5U0ztmKFPdX9jI53yHRRvgMbRyvGRA8wRY/s1600/2015-07-08_143300.png)
ในส่วนของการช่วยให้ผู้ใช้จดจำอัตลักษณ์ของแต่ละเว็บที่ตัวเองชื่นชอบและได้ทำการเก็บไปเป็น Favorite ไว้ใน Bookmark นั้น จะแสดงผลตามภาพด้านล่างนี้ นั่นคือช่วยให้ผู้ใช้งานเรียกดูเว็บที่ตัวเองเก็บไว้ได้อย่างรวดเร็ว ซึ่งหากไม่มี Favorite icon กำกับไว้ก็จะต้องเสียเวลาในการอ่านชื่อเว็บ
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcD0HHSZvMG6rqsAUqnCTec3MQ_U5murmozF5r-8mVFtwWa0w_-xe8SHIRXm8bAgBwTVzqYj2nKD_U6kpPAYaMyF8jG_5uYTgc8i60i0q67S43hO9prPP1zX28NcapZtgeF8vtC9sJ94Y/s1600/2015-07-08_143445.png)
วิธี การสร้าง Favicon ให้กับ Blog ของตัวเอง
ในบทความนี้ของพูดถึงในส่วนของการนำไปใช้งานกับ WordPress เท่านั้นนะครับ แต่ก็มีในส่วนของ Code HTML ด้วยเช่นกัน สำหรับ WordPress Theme ใหม่ๆ รุ่นใหญ่ๆ หรือเป็นตัวที่ซื้อมาส่วนใหญ่แล้ว จะมีคำสั่งปรับแต่งที่ให้เราสามารถ Up Load Favorite icon เข้าไปได้เลยจากหน้า Dashboard ของ WordPress
แต่ถ้าไม่มีล่ะ ก็ต้องทำเองครับด้วยมือ การสร้างก็ไม่ยาก ความยากเพียงอย่างเดียวที่ต้องทำก็คือการออกแบบไว้ก่อน ซึ่งปกติแล้ว Favorite icon จะมีขนาดแสดงผลที่ 16×16 หรือ 24×24 pixel เท่านั้น ดังนั้นแม้ว่าเราจะทำการออกแบบไว้อลังการงานละเอียดสูงเพียงใด มันจะถูกย่อให้เหลือเพียงขนาดดังกล่าวเท่านั้น
ฉะนั้นการออกแบบสำหรับเว็บของเราเองนั้นควรเรียบง่าย หลายคนใช้เพียงการออกแบบตัวอักษรตัวแรกของชื่อเว็บเท่านั้น เช่นตัว W ของ Weera.Net ที่นี่
1. หลังจากที่ได้แบบเรียบร้อย หรือจะไปเลือกที่เขามีให้ใช้อยู่แล้วก็ได้ ให้ไปที่ http://www.favicon-generator.org/ หน้าแรกจะเห็นช่องใส่คำสั่งตามนี้
การตั้งค่าด้านล่างคือ
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz5MiOXWqPXmK6tJhRbcvjExTw7aDw31H4cf4X9ln9_xBMo-RZ32E-cQ9DgYqzeY8S3GHnTy4HUTeqbXX2-rdqlqWc1DYCt9Vfog0TcDiXDuxlzCTEV6Ku7_Pf9XFztOVs5yIZVPHj_LA/s640/2015-07-08_115652.png)
- สร้าง icons สำหรับใช้กับ Web และ Apps
- สร้างเพียงแค่ขนาด 16×16 เท่านั้น
- คงลักษณะภาพต้นฉบับไว้ ( ไม่ทำการเปลี่ยนให้เป็นสี่เหลี่ยมจตุรัส)
- อนุญาติให้นำ Favicon ของคุณไปใส่ไว้ใน Public Gallery
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3NNdq2OdxK2zbYbn8XCvw5hql_9FK_JaHIynMWf-5d6BMdECfTkoJaLGvGp-4U2CC2wcv-E4HjfFRpOzlHylShF_MIU2yT1jYHspdV0Gil_Qwc7XgdTqOePbZxz2K_ME8KAnoy_K3828/s640/2015-07-08_084149.png)
3. จากนั้นก็ Download มาไว้ที่เครื่องของเรา แล้วจัดการ Upload เข้าไปใน Folder ของเว็บเรา
4. ให้ทำการ copy code ในช่องไปใส่ไว้ในส่วนของ Theme Code บริเวณ Head <head> เท่านั้นเอง
เห็นไหมครับ ว่าการสร้างขึ้นมาใช้งานนั้น ไม่ยากเลย แต่สำหรับใครที่ไม่อยากจะต้องออกแบบเอง ทางเว็บเขาก็มี Gallery ของคนที่เคยสร้างเอาไว้ก่อนหน้านี้ และอนุญาติให้นำมาใช้งาน มีลงไว้ให้เราได้เลือกนำไปใช้เป็นจำนวนมาก โดยสามารถเลือกได้จากสี ตัวอักษร หรือป้อนคีเวิร์ดที่เราต้องการลงไป
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiEzf3UeeguP09NntFinHwK8kS9aTPPoTPDcB_cLvU36f9GP7us-vgs3DPO2ylV7VducEBgQBcJsIrsg6i9oPXlGG7wp5YFGxJ3tSABcYB7MXFNAeZGeCwKldk_-BqHBYfcfne9FTIa58/s1600/2015-07-08_115701.png)
หวังว่าจะเป็นประโยชน์นะครับ