#27 No-code 之旅 — 客制化 Favicon ～

嗨嗨！今天来讲一下怎麽设定网站的 favicon！还有用 Next.js 也可以快速设定每个页面用不一样的 favicon 喔！还不知道什麽是 favicon 的大家，可以看看浏览器的 tab，不是会看到网站的 title 之外，还有一个小小的图，那就是 favicon ～

Favicon

Favicon 的图最多是用 .ico 档，不过其实也支援 .png 和 .svg 档案喔～想要用 .ico 的话，通常是提供这三个大小 16x16, 32x32, and 48x48 pixels。如果决定用 .png 档要注意的是 IE11 之前不支援 (不过现在应该不会遇到这问题了ＸＤ)。最後是 .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

小结

系列文快写完了，可是专案还没做完，还有很多还没做的，尤其是设计方面Ｑ所以文章也开始不知道要怎麽写了～真的应该要好好规划一下，不能每天晚上下班後才开始想文章内容ＸＤ真的会写不出来。

大家想要看看之前的网站可以看这里，或是直接到首页～有任何问题可以问我，或是也可以讨论未来要开发的 No-code 专案喔。

祝大家上班上课愉快！

晚安 <3

看更多

<<: JavaScript DOM | createElement()

>>: Day27 NodeJS实作 I

#27 No-code 之旅 — 客制化 Favicon ～

Favicon

小结

看更多

Python Time套件

Day 24：开始来学资料系结：事件系结（一）

[Day10] 第十章-专案开启前的User Story (软件工程分享)

Angular Stock登入(四)(Day25)

.NET Core第28天_ValidationMessageTagHelper和ValidationSummaryTagHelper的使用

[DAY 15] 三人行石头火锅

Day 03 HTML/CSS 使用 tailwindcss 遇到的小问题

day19 Kotlin coroutine flow with liveData in MVVM

[Day25] CH12：凡事总有例外——例外处理

萤幕录影和笔电录音-- Windows 7/8