Do you know how to set up favicon for light / dark mode ?
Introduction
favicon 一直都是至關重要的小細節，早期 web page performance tunning 甚至都會拿它出來說嘴，如果頁面資訊拿不到 favicon 的資訊，瀏覽器通常都直接從 root address 下去找，若找不到或者時間過久就會一直佔用著一條連線，所以儘可能地準備好可靠且 access able 的 favicon 是至關重要的細節之一。
favicon 是個非常重要的引導元素，試想那種開著一堆 tab 的瀏覽器中，如果 web page 能有個代表自己的 icon 的話，便能讓 user 可以快速照找到對應的 tab，不會因此感到徬徨且不知所措～
RWD 以及 light / dark mode support 嚴然已是 web design 101 等級的訴求了，今天想跟大家介紹一下兩種讓 favicon 支援 light / dark mode 的方法，讓 favicon 依照當前環境展示出最適宜的樣貌～
Issue
我們先來看看在 web page 設定 favicon 的方式：
如上所示，只要在 <head /> 裡頭新增 link tag 即可，我個人偏好 SVG 向量格式，因為不曉得瀏覽器會在何處用多大的尺寸進行繪製呈現，儘可能的避免因為縮小 / 放大造成的模糊失真發生。
Solution 1
相信大家對於 [media] 都不陌生吧！web developers 可以透過 media attribute 來設置套用條件，一但滿足所設置的條件，瀏覽器便會直接使用其設定。也就是說我們可以先準備 light / dark mode 的 favicon，並且依照 media attribute 設置不同的宣告式，剩下的就交給瀏覽器選擇囉～
- Line 3：設置 media=”(prefers-color-scheme: light)”，當當前環境為 light mode 時，便會 render 此行設置的 favicon。
- Line 4：設置 media=”(prefers-color-scheme: dark)”，當當前環境為 dark mode 時，便會 render 此行設置的 favicon。
Solution 2
基於 SVG 支援 CSS 的特性，所以 web developer 其實也可以直接在 SVG 裡頭下 CSS 宣告，讓不同的區塊可以依照當前環境繪製不同顏色，如此一來便可以讓單一 SVG 檔案支援 light / dark 雙模態的支援。
如上所示，由於 favicon 的組成軍相對單純簡單，所以筆者把它分成幾個不同的 class，每個 class 再下不同的 media query 條件式，所以當 light / dark mode 切換時，便會直接套用不同的顏色。如果一來便能達成雙模態支援。
最後再設置 link，把 href 指向我們方才做好的雙模態 SVG 位址即可。
Conclusion
以上便是兩種讓 favicon 支援 light / dark mode 的設置方法。筆者自己偏好 Solution 2，儘可能的讓 html code 可以更加簡約好維護，web developers 可以依照自身偏好選用～希望今天的分享對大家有所助益！！