Hugo+Mainroadのfavicon.icoを設定する

Web開発
Page content

1.目的

Hugo+Mainroadのfavicon.icoを設定して、ブラウザのタブのところにアイコンがでるようにしたいです。

※)favicon.icoは、ブラウザのタブ左端に表示されるちっちゃい画像のことです

2.環境

  • hugo v0.120.4
  • hugo theme: mainroad

3.手順

a)画像ファイルの用意

画像ファイルを準備します。ファビコン（favicon）は一般的には「16px × 16px」のサイズで使用されることが多いですが、表示される場所によっては「32px × 32px」や「24px × 24px」で使用されることもあります。

私のページでは速度を重視しますので、なるべく軽量な「16px × 16px」の画像を用意します。

すでにネタとなる画像がある場合は、こちらのサービスからリサイズしてfavicon.icoをダウンロードすることができます。

ネタ画像がない場合は、本記事の4. おまけ(Stable Diffusion Onlineでfaviconを作る)を試してみてください。

b)設定

favicon.icoをHugoのstaticディレクトリにアップロードします。

% ls -l static/favicon.ico
-rw-r--r--  1 hoge  hoge  1150 Nov 27 13:50 static/favicon.ico

あとはHugoが上記のfavicon.icoを認識してコンテンツに反映してくれます。特に設定などは必要ありません。

なお、テーマのディレクトリにもデフォルトのfavicon.icoが存在しました。テーマはなるべくいじらずに済ませる方がよいと思うので、こちらはいじらないことにしました。

themes/mainroad/static/favicon.ico

c)確認

ブラウザをスーパーリロード(Ctrl+F5)すると、faviconの反映を確認することができました。

4. おまけ(Stable Diffusion Onlineでfaviconを作る)

今流行りのAIでfaviconの元ネタ画像を作ることもできます。

  1. プロンプトを考える

    プロンプトとは、AIに対してどんな画像を作りたいか？を整理した情報(文章)のことです。ここでは例としてカワイイ猫のピクセルアートを作ってみようと思います。

    1匹の白い猫。その猫は耳が垂れています。その猫は怒った顔をしていて、頭から噴火しています。

  2. プロンプトを英訳する

    考えたプロンプトをDeepLで英訳します。先ほどの日本語プロンプトを英訳したら以下のようになりました。

    One white cat. That cat has droopy ears. That cat has an angry face and erupts from its head.

  3. 英訳したプロンプトを元に画像生成する

    Stable Diffusion Onlineにアクセスします。

    「Prompt」には先ほどの英文を入力し、「Styles」は「sai-pixcel art」を選択し、「Generate」を実行します。

    画像生成時の「processing」の時間はあまり当てにならないので、のんびり待ちましょう。

    しばらく待つと、画像が生成されます。右上にダウンロードボタンがありますので、そこからダウンロードすることができます。

    そもそも猫が複数匹いる。。。など、なかなか意図した画像出力にはなりませんが、文章の構成を分けたり、順番を変えたりすると、よりよい出力になっていくと思います。

    理想した出力を得るための技術をプロンプトエンジニアリングと言うそうなので、興味がある方はそちらを調べてみてはいかがでしょうか。