サイトの見栄えをよくするために、ファビコンを作成してみる

こんばんわ aonamiです。
サイト作成楽しいですね。最初は真っ白(ぬりかべ…)だったxeoryもカスタマイズしていくにつれ、段々とそれらしく見えるようになってきました。

カスタマイズ欲はまだまだ尽きないわけですが、今回はファビコン作成をしてみようと思います。

ファビコンとは何?

画像で見て頂いた方が分かりやすいですね。

この、お気に入りに入れたときに表示されるアイコンみたいなやつが、ファビコンというらしいです。
名前はまあさておき、作った方が見栄えがよくなる事は間違いないなさそうです。

まず、32×32ピクセルのドット絵を書きます

16×16ピクセルであったり、色々なサイズを全て作ってサイトに反映させるのがいいみたいですが、
ひとまず32×32ピクセルのみで作成、反映させることにしました。今回は自分が閲覧するときに表示できれば完了ということで作業をしています。
32×32というのは、IE以外のブラウザ環境用ということらしいです。
これ以上の機能付けは骨が折れそうなので、必要だと感じた時にまた勉強したらいいかなと思っています。

また、このファビコン画像 icoという拡張子で作った方がいいような事を書いてあったのでまずその手順で作成したのですが、
後のプラグインでアップロードした時にエラーが出てしまったのでgif画像で作ることにしました。

ミニドット絵メーカー
お世話になりました。web上でドット絵作成できるサイトがないかなと探して、今回はこちらで画像を作成させて頂きました。
(問題がありましたらリンク削除させて頂きますので、お手数ですがご連絡お願いいたします。)

  

(絵心はお察しくださいね)描いているうちに楽しくなってきて3つも作ってしまいました。

左から、当ブログ、別ブログ(https://aonami-akaushi.net)、いつ使うか分からないのに予備ファビコンまで用意するという有様です。統一感も出せて、それなりに満足しています。

出来上がった画像はデスクトップにでも保存させておきます。

Favicon Rotator を使ってサイトに反映させます

プラグイン Favicon Rotator を追加して、そちらで作成した画像をサイトに反映させていきます。
プラグイン有効化後、[ダッシュボード]→[外観]→[Favicon]

add icon で先程作成したgif画像を選択して、保存します。

問題なく表示できました。

あとがき

いかがでしたでしょうか。

ファビコンを0の知識から作ってサイトに反映させてみました。
作り方が合ってるのかも分かりませんがそれでも、chromeではファビコン表示されるようになりました。
なんとかなるものです。

スポンサーリンク

コメントを残す

*