[網頁設計] Figma 工具快速製作多尺寸 Favicon
by Richard Tsang 2022/04/26
Complete Favicon Generator
創作者：Ernest Ojeh
https://www.figma.com/community/file/914233657397286062
簡單介紹
此工具用於快速製作多尺寸 Favicon，使用者可以即時預覽效果，方便修改不同尺寸的圖案設計。
![[網頁設計] Figma 工具快速製作多尺寸 Favicon 1](https://i0.wp.com/blog.3bro.info/wp-content/uploads/2022/04/figma-favicon-generator-01.png?resize=720%2C332&ssl=1)
用法
- 使用此工具前需要先登入 Figma
![[網頁設計] Figma 工具快速製作多尺寸 Favicon 2](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)
- 按下 “Duplicate”
- 新視窗會彈出
- 可以先把設計好的圖案拉進來
- 或者是依下面步驟從電腦加入圖案
- 然後把圖案拉到大框框內
- 完成了
![[網頁設計] Figma 工具快速製作多尺寸 Favicon 2](https://i0.wp.com/blog.3bro.info/wp-content/uploads/2022/04/figma-favicon-generator-05.png?resize=419%2C581&ssl=1)
![[網頁設計] Figma 工具快速製作多尺寸 Favicon 3](https://i0.wp.com/blog.3bro.info/wp-content/uploads/2022/04/figma-favicon-generator-02.png?resize=720%2C67&ssl=1)
![[網頁設計] Figma 工具快速製作多尺寸 Favicon 4](https://i0.wp.com/blog.3bro.info/wp-content/uploads/2022/04/figma-favicon-generator-03.png?resize=720%2C589&ssl=1)
![[網頁設計] Figma 工具快速製作多尺寸 Favicon 5](https://i0.wp.com/blog.3bro.info/wp-content/uploads/2022/04/figma-favicon-generator-04.png?resize=515%2C532&ssl=1)
![[網頁設計] Figma 工具快速製作多尺寸 Favicon 6](https://i0.wp.com/blog.3bro.info/wp-content/uploads/2022/04/figma-favicon-generator-06.gif?resize=450%2C244&ssl=1)
![[網頁設計] Figma 工具快速製作多尺寸 Favicon 10](https://i0.wp.com/blog.3bro.info/wp-content/uploads/2022/04/figma-favicon-generator.png?resize=160%2C160&ssl=1)
![[遊戲] 多啦A夢大富翁 11](https://i0.wp.com/blog.3bro.info/wp-content/uploads/2013/06/mono1.png?resize=160%2C160&ssl=1)
![[教學]如何在iPad使用WhatsApp網頁版？（免JailBreak） 12](https://i0.wp.com/blog.3bro.info/wp-content/uploads/2015/08/iPad-whatsapp-web-9.png?resize=160%2C160&ssl=1)
