Affinity Designer

ファビコンを設定してみた

このブログにもついにファビコン(上の写真の小さいアイコン)が設定されました!!
実はファビコンという名前もつい最近知りました(^^;
でも、同じような人が結構いるんですかね?
「ブログ」「小さい」「アイコン」で検索すると沢山の記事が出てきましたので大助かりです。
そもそもなんで急にファビコンを作ろうと思ったかというと暇だから!笑
で、暇潰しにサクッとファビコン作ったのでご紹介。

ファビコンの作り方

まずは設定云々の前にアイコンとなるイラストが必要ですよね。
調べてみると大きさも色々あるようです。
あと、どうやら拡張子は.icoにしておいた方が良さそう。
で、今回はここでpngからicoで変換する事にしました。

https://ao-system.net/favicongenerator/

こちらで画像のサイズは512x512pxが推奨されておりますのでその指示に従って作ります。

Affinity Designerでイラストを作る

Affinity Designerで512x512pxのサイズで新規作成。
豆粒のようなサイズで表示されるところもあるのでシンプルなものがいいでしょう。
という事で使う色は2色(ちょいグラデーションとかは入れてある)にして出来上がったのがこちら。

出来栄えがいいかと言われたら?ですが、ファビコンが設定されていることに意義がある!という事でこれでOK。
PNGで書き出します。

拡張子を変換する

先ほどのサイトでPNGからICOに変換します。
もう一度リンク貼っておきますね。

https://ao-system.net/favicongenerator/

「画像ファイルを選択」から先ほど作ったイラストを選択します。

「ファビコン一括生成」をクリック。

ファビコンダウンロードをクリック。
これで準備は完了です。

Favicon Rotatorのインストール

ここからはWordPress側の設定。
「Favicon Rotator」というプラグインをインストールします。

インストールしたプラグインを有効にすると左のメニューの外観に「Favicon」が追加されるのでそこから設定していきます。

「Add Icon」から先ほど作った拡張子が.icoのデータをアップします。
その下の「Touch Icon」はiPhone、スマホなどで表示されるものになります。
元画像の512x512pxのままでは大きいと思うがいい事調整してくれるかな?と期待を込めてそのままアップしてみました。
最後に「Save Changes」をクリック。
これで設定完了。
パソコンもiPhoneも確認したところ無事ファビコンが表示されました。

-Affinity Designer
-

Copyright© chan14ライフ , 2021 All Rights Reserved Powered by AFFINGER5.