inch-blog
Favicon となる元画像作成
Favicon Generator で調整
easy-notion-blog を編集
画像ファイルを public にコピー
document-head.tsx の編集
Favicon となる元画像作成
canva などで作成します．
画像は 260 x 260 px 以上が最適です．
また canva では画像の透過の処理は有料のため透過処理をしたい場合は
上記のような外部サービスを利用してください．
Favicon Generator で調整
作成した Favicon の元画像を Favicon に適した画像に変換します．
https://realfavicongenerator.net/
上記のサイトで変換していきます．
- Select your Favicon image をクリックし画像をアップロード
- サイトに表示されたときや iPhone に表示された場合の見た目の調整など修正します．
- 調整が終わったら画面の一番下にある Generate your Favicons and HTML code をクリックします．
- Install your favicon のページが表示されます
- Download your package をクリックして zip ファイルをダウンロードしてください．
- そして次で使用するので画面にある以下のようなコードをメモしておいてください．
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#00aba9">
<meta name="theme-color" content="#ffffff">※私の上のコードの場合一部カラーを編集しているので使用できないと思われます．
easy-notion-blog を編集
続いて easy-notion-blog を編集します．
画像ファイルを public にコピー
先ほどダウンロードして zip ファイルを解凍すると中に画像ファイル等が入っています．
それを easy-notion-blog の
easy-notion-blog-main/publicにそのままコピーしてください．
ディレクトリ構成は
public
├── android-chrome-192x192.png
├── android-chrome-512x512.png
├── apple-touch-icon.png
├── browserconfig.xml
├── default.png
├── favicon-16x16.png
├── favicon-32x32.png
├── favicon.ico
├── logo-bk_white.jpg
├── logo.png
├── mstile-150x150.png
├── safari-pinned-tab.svg
└── site.webmanifestのようになります．
document-head.tsx の編集
次に
easy-notion-blog-main/components/document-head.tsxを編集します．
先ほどコピーしたコードを貼り付けてください．
ただしコードの末尾を
<....>から
<.../>に変更して貼り付けしてください．
つまり
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#00aba9">
<meta name="theme-color" content="#ffffff">
↓
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="manifest" href="/site.webmanifest" />
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
<meta name="msapplication-TileColor" content="#00aba9" />
<meta name="theme-color" content="#ffffff" />全体像は以下のようになります．
import {
NEXT_PUBLIC_SITE_DESCRIPTION, NEXT_PUBLIC_SITE_TITLE, NEXT_PUBLIC_URL
} from '../app/server-constants'
const DocumentHead = ({ title = '', description = '', path = '', urlOgImage = '' }) => {
const elements = path.split('/')
const isSlugPath = elements[0] === '' && elements[1] === 'blog' && elements.length === 3
const isRootPath = path === '' || path === '/'
return (
<>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="robots" content="max-image-preview:large" />
<meta charSet="utf-8" />
<title>{title ? `${title} - ${NEXT_PUBLIC_SITE_TITLE}` : NEXT_PUBLIC_SITE_TITLE}</title>
...( 中略 )...
<meta name="twitter:title" content={title ? `${title} - ${NEXT_PUBLIC_SITE_TITLE}` : NEXT_PUBLIC_SITE_TITLE} />
<meta
name="twitter:description"
content={description ? description : NEXT_PUBLIC_SITE_DESCRIPTION}
/>
...( ここから添付 )...
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="manifest" href="/site.webmanifest" />
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
<meta name="msapplication-TileColor" content="#00aba9" />
<meta name="theme-color" content="#ffffff" />
...( ここまで添付 )...
</>
)
}
export default DocumentHead以上参考になれば嬉しいです．