網站 Favicon 使用 SVG 檔的好處

作者： -

什麼是 favicon？

favicon 是 favorites icon 的縮寫，中文通常稱為頁面圖示（page icon）或網站圖標（website icon）；簡單一點來說，就是瀏覽器最上面各分頁會出現的圖案。

favicon
像我這個網站的favicon是位可愛的吸血鬼


favicon 除了可以用傳統的 ico 檔，也可以用 png 檔，甚至可以用 SVG 檔。

為何要特地用 SVG 檔？

用一般圖檔就好了，何必要再創作一個 SVG 檔呢？因為瀏覽器有 dark mode 的存在，這個模式可能會讓網頁的 favicon 看不清楚，這就是我推薦使用 SVG 檔的原因，因為我們可以很輕易地在 SVG 檔中塞 CSS 語法進去調色，別的檔案格式沒有這種能力。看到一看就知道沒去背的白底 icon 會讓我很焦慮，以下為簡單的例子：


<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
  <style>
    path{fill:#2858aa;}
    @media (prefers-color-scheme: dark) {path{fill: #23A6DE;}}
  </style>
  <path d="example"/>
</svg>

「prefers-color-scheme: dark」就是在 dark mode 下呈現的樣貌，寫法跟 media query 一樣。我們可以在括號範圍內設定一個比較亮的顏色（fill: #23A6DE）才不會讓使用者看不清楚。


favicon HTML 設定

在 HTML 的 head標籤裡照這樣設定就可以了，沒必要花時間在考慮各裝置自己的 favicon 寬高：


<link rel="icon" href="/img/favicon.svg" type="image/svg+xml">
<link rel="icon alternate" href="/img/favicon.png" type="image/png" sizes="192x192">
<link rel="shortcut icon" href="/img/favicon.png" sizes="192x192">
<link rel="apple-touch-icon" href="/img/favicon.png" sizes="192x192">
<link rel="icon" href="/img/favicon.ico" sizes="48x48">

SVG 的寬高適度就好，瀏覽器會自動伸縮，但寬高一定要相同。（有一說是除了SVG之外，favicon的寬高要48的倍數。但根據我的實驗，用32和180都可以顯示，連Google SERP都沒問題）

另外，除了 SVG 之外，還用了 png 和 ico 檔的原因是怕瀏覽器不支援，畢竟我也沒辦法控制使用者要用什麼瀏覽器。

svg 的支援度
各主流瀏覽器 favicon 支援 svg 的情況，png 的話連 IE11 都支援。


*Chrome 100 的 svg favicon 看不懂 prefers-color-scheme。

留言

張貼留言

這個網誌中的熱門文章

用CSS的 min() max() 與vw，設計有極限值的RWD響應式文字

作者： -
圖片
你是否有想過，能不能單靠 CSS 設計出會自動調整大小的 Responsive Font Size？答案是可以的！只要設定字體的最大值和最小值就可以辦到。 文章目錄： vw 基本運用 極限問題 Media Query max()、min() If you just want the best solution, just click "max()、min()" . 為何使用 vw？ 在編寫 CSS 的時候，你可能習慣將網頁上的字體大小(font-size)使用 rem、em、px 等單位設定，但在講究 RWD 的情況下，甚至是 Google SEO 著重在手機介面的現在，總是會遇到桌機看起來很舒適，但畫面一變小，標題類的字就又太佔版面。 而使用 viewport width (vw) 當作字體大小的單位，就可以讓字體隨著視窗寬度的不同自動縮放其大小。 各瀏覽器支援 vw 的情況 vw 基本運用： vw 是視窗寬度的百分比，所以 1vw = 1%的視窗寬度。舉例來說，當視窗寬度為 1000px 且 font-size: 1.5vw 的時候，字體的大小就是 1000*1.5% = 15px。 h1,.h1{ font-size: 1.5vw; } 除了直接運用之外，也能搭配 calc 使用： h1,.h1{ font-size: calc(10px + 1.5vw); } 極限問題（max or min font size） 這是不管設計什麼東西都存在且必需要考慮的事情，vw 也不例外。 設計網頁一定會設一個網頁寬度，以此寬度設定做為最大值；而人的視力有限，以 16px 當作最小值。所以，當視窗被拉到極大或極小的時候，以 vw 為單位的字體勢必會變成你不想要的樣子，這時候我們就必需設定最大值和最小值，讓字體在合理的區間變動，而 media query 和 min()、max()就出現在解決辦法的清單之中： Media Query 下面為使用的例子： h1,.h1{ font-size: 3.5vw; } @media (min-width: 1600px) { h1,.h1{ font-size: 40px; }
READ THIS »

10 steps、「ライブ会場を沸らせる、フロアを沸かす」ミーム動画の作り方 (Viggle AI)

作者： -
圖片
日本近期流行的「ライブ会場を沸る」或是稱為「フロアを沸かす」的迷音AI短片，是怎麼製作生成的？下面我們用英文和影片帶你一步一步做，完全不用動腦。 （続いて英語でステップバイステップで説明します。操作手順動画も用意しているので、頭を使わずに簡単にできます。） 操作步驟 steps: Enter to Viggle AI's Discord server (https://discord.gg/viggle). Select any of these rooms named "animate" and click to enter. Type "/" to bring up a list of commands. Select "animate" from the list of commands. Upload your image. motion_prompt: type "$lil_yachty_stage_entrance". background: select "From template" . finetune: select "On" . Hit Enter or click on the submit button to send the command. Wait for approximately 1 to 5 minutes for the AI animation to be generated. 沒畫面的話可能還是會不太清楚呢，沒關係，我直接把操作步驟拍成教學影片了，只要照著這些步驟做，連從來都沒接觸過AI的人，都能成功產出一個成品： 操作流程影片（操作手順動画） 為什麼會紅到日本？ 這個不斷被二創的meme影片其實來自美國歌手 Lil Yachty 在演唱會的一段影片： Lil Yachty with the HARDEST walk out EVER 。 在「Viggle AI」出現之後，就從歐美紅到日本去了。大多人使用的素材都是動漫人物、Vtuber、親友或自己。 Viggle AI 的官網有提供 許多 motion_p
READ THIS »

運用資料層 dataLayer.push 建立 GTM 自訂事件

作者： -
圖片
GTM（Google Tag Manager；網頁代碼管理工具）最大的好處在於讓頁面較整潔、許多系統已經寫好的事件與變數可以直接拿來用，非常方便。但現實往往沒那麼簡單，通常都會遇到一堆 ajax、history 或 cache 要處理，這時候就要請到自訂事件出馬了。 若只用 GA，沒有使用 GTM 的話，自訂事件要這樣寫： gtag('event', ..., { 'event_category' : ..., 'event_label' : ... }); 那如果用 GTM 的話該如何操作呢？ 將資料 push 進 dataLayer 首先我們要知道什麼是 dataLayer：一個 GTM 內部的全域變數，它能動態存取網頁的使用者行為數據。 更進一步探索它的   JSON   架構，可以在網頁上使用開發者工具(F12)的 console 欄，輸入 dataLayer，其實跟它的名字一樣就是層層分明的資料層 (Data Layer)。 在 F12 中查看 dataLayer 你會發現 GTM 測試欄位左邊有幾個事件，dataLayer 裡面就有幾個 object。 再把 object 點開（這裡以 Window Loaded 為例），會有 event 和 GTM 給的事件 id，而這個事件（gtm_load）其實就是「觸發條件」裡的「視窗已載入」。 因此，我們可以依樣畫葫蘆用 dataLayer.push 自己寫一段觸發條件把資料送進 dataLayer ，就可以在 GTM 裡面操作了： 開始設定自訂事件 先宣告 dataLayer，避免發生 undefined error 再設定你要 push 進去的數據 這裡我們用「 nav a 點擊偵測」和 ajax 事件舉例（jQuery）： var dataLayer = window.dataLayer || []; // example 1: detect nav a tag click $('nav a').click(function(){ var $text = $(this).text(); dataLayer.push({ 'event'
READ THIS »