iT邦幫忙

2021 iThome 鐵人賽

DAY 27
0
Modern Web

製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ~系列 第 27

#27 No-code 之旅 — 客製化 Favicon ~

嗨嗨!今天來講一下怎麼設定網站的 favicon!還有用 Next.js 也可以快速設定每個頁面用不一樣的 favicon 喔!還不知道什麼是 favicon 的大家,可以看看瀏覽器的 tab,不是會看到網站的 title 之外,還有一個小小的圖,那就是 favicon ~

Favicon

Favicon

Favicon 的圖最多是用 .ico 檔,不過其實也支援 .png.svg 檔案喔~ 想要用 .ico 的話,通常是提供這三個大小 16x16, 32x32, and 48x48 pixels。如果決定用 .png 檔要注意的是 IE11 之前不支援 (不過現在應該不會遇到這問題了XD)。最後是 .svg,好處就是向量圖,所以檔案會比較小可是圖又可以被放大~ 不過瀏覽器支援度不高 (目前只有 Chrome, Firefox, Opera)!

那現在要怎麼在 Next.js 設定 favicon 呢?其實跟一般 HTML 一樣,放 <link><head> 裡,不過在 Next.js 就改用 <Head> component:

import Head from "next/head";

function MyApp({ Component, pageProps }) {
  return (
    <div>
      <Head>
        <title>No-code by Jade</title>
        <link
          key="icon"
          rel="icon"
          href="https://source.boringavatars.com/beam/32/Home?colors=AFC7B9,FFE1C9,FAC7B4,FCA89D,998B82"
        />
      </Head>
      <Component {...pageProps} />
    </div>
  );
}
export default MyApp;

我選擇放在 pages/_app.js 裡的 <Head> 而不是在每一頁的檔案設定,是因為想要共用一個 favicon 圖就好。可是如果想要每一頁不一樣,那 pages/_app.js 裡的還是可以放著,只是在其他 pages 多加 <link> 還有記得加 key="icon" 在每一個 <link> 就行了!因為 Next.js 會自動只渲染最後的 <link>~ 所以可以像下面這些圖,每一頁用不同的 favicon 圖喔。

首頁的
Home

部落格頁面
Blogs

部落格文章的頁面
Post

小結

系列文快寫完了,可是專案還沒做完,還有很多還沒做的,尤其是設計方面Q 所以文章也開始不知道要怎麼寫了~ 真的應該要好好規劃一下,不能每天晚上下班後才開始想文章內容XD 真的會寫不出來。

大家想要看看之前的網站可以看這裡,或是直接到首頁~ 有任何問題可以問我,或是也可以討論未來要開發的 No-code 專案喔。

祝大家上班上課愉快!

晚安 <3

看更多


上一篇
#26 No-code 之旅 — 實作 Dark Mode 和加入 Google Fonts ft. Chakra UI
下一篇
#28 No-code 之旅 — 客製化 Next.js 的錯誤頁面
系列文
製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ~30

尚未有邦友留言

立即登入留言