快轉到主要內容

Hugo 網站加 favicon

先產生出 favicon 圖檔,再加到你的網站

產生 favicon #

favicon 不只有一張圖:不同平台場景會用到不同大小的圖片跟格式

我是用 https://realfavicongenerator.net/ 產生 favicon,自己只要準備「一張圖」就好,png 就可以,不一定要向量圖

把 favicon 加到 Hugo 網頁 #

這跟你選的佈景主題 theme 有關!所以查閱你用的 theme 的文件,搜尋看看有沒有提到怎麼加 favicon。通常是加在 static/ 底下,但可能更裡面有不同的目錄架構

例如 Docsy 就是加在 /static/favicons/ , 但 Congo 直接加在 /static/ 下面

如果 theme 文件沒寫呢? #

想辦法找到 theme 的 github repo。然後在上面搜尋(或是 clone 下來以後搜尋)這段文字

  • rel="icon , 或
  • rel="shortcut

HTML favicon 是定義在 <head> 裡面含有這個屬性的標籤 <link rel="icon" href=...> ,這也是為什麼每個佈景主題放的地方不一樣:佈景主題自己可以決定要讀哪個路徑的圖片,然後怎麼寫出 HTML

github search favicon in Docsy theme
看裡面的 href, 開頭是 favicons/ , 所以檔案放在 static/favicons/
github search favicon in Congo theme
看裡面的 href 直接是檔名 , 所以檔案放在 static/ 就好

如果是像下面沒有明寫的,以這個例子是他會去讀 hugo.toml 裡的設定 [Params]favicon 的值,如果你有兩組圖示要測試的話就不用一直換檔案,改設定檔就好

{{ with .Site.Params.favicon }}
    <link rel="shortcut icon" href="{{ . }}" />
{{ end }}

如果 theme 裡面原始碼找不到呢!? #

… 考慮換另一個佈景主題?

認真的說,有可能 theme 把 favicon 的設定包得很靈活,以至於在原始碼不會明寫 <link rel="icon" 這段,而是去讀設定檔之類的

通常你可以先去佈景主題的原始碼裡面找 layouts/_default/baseof.html 看裡面的 head 怎麼寫:通常會模組化去讀另外一個 “partials”,也就是只有一部分的 html,例如讀 layouts/partials/head.html,而裡面又有可能連到其他檔案

佈景主題用 partials 的好處是,你自己可以不用改他的原始碼;你可以寫一段自己的 html 片段 去蓋掉 theme 定義的:同樣放在你的 layouts/ 的同樣目錄結構的同個檔名。因為是覆蓋掉,所以為了避免整個重寫,theme 通常會把一個大大的 HTML 拆成很多細部 partials 讓使用者如你能夠寫少少的去覆蓋

不過讀到這,如果你已經有概念要怎麼客製化的話就有能力自己加 favicon 了。如果還沒概念的話,不是你的錯,就換個 theme 吧,連一個基本的 favicon 都需要你去自己刻,那以後其他功能可能也要自己寫

How Docsy generate HTML snippets for favicon with partials
以 Docsy 為例,是怎麼連結一層又一層產生出 HTML 網頁
若您覺得有趣, 請 追蹤我的Facebook 或  Linkedin, 讓你獲得更多資訊!