Web

ブログにファビコンを作って設置しよう。

「ファビコン」まるでファミコンの様な名前ですが、

サイト作成において非常にサクッと終わる設定でありながら、インパクトとして重要。

 

favorite icon(フェイバリット・アイコン:お気に入りアイコン)

を略して「ファビコン」と呼びます。

 

 

サイトをブックマークで登録すると見れるコレです。

 

わかりやすいアイコン。

これを自分のホームページやブログにも付けちゃおうというのが今回のお話です。

 

ファビコンを作る前に知っておきたいこと

 

なんでも良いという訳ではなく、形式とサイズを知ってから作成しましょう。

後からサイズ変更して画が崩れてやり直すことにはならないと思います。

 

拡張子

ico,png,jpg形式

 

サイズ

PC、スマホ、プラウザによって良いとされるサイズが違う様ですが、

 

16×16   が主流。

32×32 

152×152  (apple-touch-icon)

 

ファビコンを作る便利なサイト

「作るとしても何で作るの?」「難しかったら無理」

サクッと簡単に作れるサイトがあります。

 

16x16,32x32,48x48 のアイコンが画像を呼び出すだけで、サクッと作れます。

ファイルサイズは200KB以下で用意しましょう。

ファビコン favicon.icoを作ろう!

 

16x16,32x32,48x48,64x64,128x128対応

ファイルサイズは最大サイズは500KBで用意しましょう。

Favicon Generator

 

ファビコンの設置方法

WordPressのテーマによって違うと思うのですが、

「カスタマイズ」でファビコンを設置出来る項目があったり、

 

私が使っているテーマ「AFFINGER5 WING」では「AFFINGER5管理」という項目がありますので、そこで設定します。

 

ファビコン設定

 

私が作ったファビコン

 

音楽サイト「るしるし」のファビコンがこちらです。

 

 

ペンタブとお絵かきソフトでオリジナル作成。

 

「る」を「C」で囲って「るし」としました。(なんやそら)

あまりサイズを深く考えてなかったので、ペンタブとお絵かきソフトを使い、

大きめで作っておいて、後から生成サイトで小さく変換したかと思います。

(もう記憶にない)

 

当サイト「スキ二ノート」のファビコンはこちら。

 

suki2favicon

 

サムネイル画像や曲のジャケット作成にも重宝している「Canva」というサイトで作りました。

「Canva」はネットで音楽活動するのにオススメな画像編集ツール - るしるし
「Canva」はネットで音楽活動するのにオススメな画像編集ツール - るしるし

私が音源のジャケットから、サイトのバナーなどネットでの活動で使うデザインツールを紹介します。Photoshopが無くても、オシャレに、しかも無料でサクサク画像が作れますよ!

続きを見る

 

サイズはapple-touch-iconのサイズ

152×152で作成し、サイズの変更はせず「AFFINGER5管理」でアップロードしました。

 

まとめ

小さな画像ですので、色もデザインも細々とやらない方がいいと思います。

Canvaではイラストも豊富なので、デザインが苦手な人も簡単に作れるのでオススメです。

 

ファビコン自体は1回作ってしまえばそのまま放置。

しかしサイトを覚えてもらうためには絶対設置した方がいいです。

 

企業やブロガーさんのファビコンを参考にしてみると、アイデアが湧くかもしれませんよ!

ぜひやってみてくださいね。

 

アディオス!

 

 

-Web
-,

Copyright© スキニノート , 2020 All Rights Reserved Powered by AFFINGER5.