ファビコン設定でタイトルバーにワンポイント。タブが沢山開いてもコレで大丈夫だね!

ブログ運営

先日、カスタマイズできるのはブログのスキン(外観)だけではないよという話をしました。

他のブログとの差別化。それってテンプレートの変更だけで十分だと思ってる?
元々のテーマがカッコイイや、高性能で勿体なさすぎると思っていたって、やっぱり自分のサイトと余所のサイトは区別できた方が良い。そう思ってカスタマイズをスタートし、「よし!いい感じに作れたぞ!」となったところで満足していたりしませんか?でもでもちょっと待って。もしかしたらまだ設定できるところが隠れているかも……?

この記事で、ファビコンの設定は別記事にまとめますと書いたので、今回はその設定方法をメモしていきます。

※作業は、WordPressでの作業になります。

 

スポンサーリンク

まずはファビコン用に使用する画像を用意しよう。

ファビコンの設定がいくら簡単だとはいえ、アイコンとして使用する画像が無ければ始まりません。

まずはアイコンとして表示させるための画像を作成していきます。

ファビコン

当サイトで設定しているファビコンはこんな感じです。作成はAdobe Illustratorでピクトさんを加工し、PhotoshopでPNGに変換しています。

とはいえ、Adobeのソフトは持って居ないです……という人もいますよね?

その場合、無料でダウンロードできるペイント系のソフトなどで画像を作成で大丈夫です。

と、その前に。ファビコンでよく使用されているサイズとフォーマットは以下の通りです。

 

推奨サイズ

ファビコンの推奨サイズは、使用するブラウザによって異なるようです。

  • 16px × 16px → IEのタブに表示されるサイズ
  • 32px × 32px → Chrome・Firefox・Safariなどのタブに表示されるサイズ
  • 64px × 64px → Windowsデスクトップで使用されるサイズ
  • 180px × 180px → iPhone&iPadで使用されるサイズ
  • 256px × 256px → Androidで使用されるサイズ

オススメとされているのは、16×16+32×32の2つでマルチアイコンに設定するというもの。現在だと、スマフォでサイトを見ると言う方も増えていますので、2019年の最新情報だと、260×260以上あった方が安心というアドバイスもあるようです。

なのですが、これは自力でファビコンを設定する場合いです。WordPressの場合はこうなっています。

推奨サイズ:512px × 512px

これ以下のサイズの場合、画像が粗くなるためオススメではありませんとのこと。なので、用意する画像は512×512の画像が1枚ということになります。

で、サイズなのですが、512×512のサイズで設定すると、32×32、192×192、180×180、270×270の4種類が自動で生成されます。

 

使える保存形式(フォーマット)

ファビコンのフォーマットとして推奨されているフォーマットはこの3つです。

  • .png
  • .gif
  • .ico

ただ、PNGやGIFの場合、古いブラウザが非対応の場合も。なので、ICO形式で保存するのが好ましいということのようです。

作ったアイコンをICO形式に変換するには、iconifier.netさんや半透過マルチアイコンfavicon.icoを作ろう!さんで画像を変換して貰うのが簡単です。

Iconifier
iconifier.net is a free online icon generator for Apple launcher icons and favicon files zipped into one easy download file
ファビコン作成。favicon.ico 無料で半透過マルチアイコンが作れます。
ファビコン(ファブアイコン)faviconを作ろう!。16x16と32x32と48x48ピクセルのマルチアイコンが簡単に作れます。作成したファビコンの画像はプレビューで確認できます。プロ仕様の詳細データ表示付き。

ただ、これも先ほどと同じように、ファビコンを自力設定する場合の話。WordPressの場合は、普通にPNGで保存しておけばOKです。

 

ファビコン用の画像を作るためのソフトやサービスは?

画像を作成するためのソフトは、GIMP2やFireAlpaca、MediBangPaintなどがあります。

GIMP
GIMP - The GNU Image Manipulation Program: The Free and Open Source Image Editor
フリー ペイントツール(Mac/Windows 両対応)FireAlpaca[ファイア アルパカ]
Mac、Windows両対応のフリー ペイントツール FireAlpaca。奇麗な線がひけるペン、アナログ感を出せる水彩ブラシなど機能が満載! シンプルな操作性、さらに無料だから誰でも手軽にイラスト・お絵描きを始めることができます!
メディバンペイント(MediBang Paint)
無料のイラスト・マンガ制作ツールメディバンペイント(MediBang Paint)のオフィシャルサイトです。メディバンペイント(MediBang Paint)の機能や使い方を紹介しています。

もし、どうしてもアイコンが作れない、自信がない。でも、お金を払っても良いという感じでしたら、画像作成や編集が得意なお友達や知り合いにお願いしたり、ココナラなどのサービスを利用して作ってもらうと良いかもしれません。

似顔絵・イラストを今すぐネット依頼できるイラストレーターはどうやって見つける? | ココナラ
イラストレーターの登録数は1万人以上!ハイクオリティなイラストやマンガイラストを描いて欲しいならココナラがオススメです。全国の人気イラストレーターが自分のスキルを販売しており、PCやスマホからオンラインで制作依頼することができます。プレゼントやお祝い、自主作品や同人誌の挿し絵などを目的に購入する方が増えています。ビジネ...

 

画像が用意できたら、ファビコンとして使えるように設定していこう。

アイコン用の画像が用意できたら、早速設定をしていきましょう。

まずは、ダッシュボードの外観からカスタマイズを選びます。

ファビコンの設定-1

 

カスタマイズ編集画面に移動したら、サイト基本情報を選択します。

ファビコンの設定-2

 

サイト基本情報の編集が表示されたら、一番下にあるサイトアイコンの画像を変更をクリックします。すると、メディア一覧画面が表示されるので、そこに作成したファビコン用の画像をアップロード→選択します。

プレビューの確認画面にアイコンが表示されたのを確認した後、公開ボタンを押して下さい。

ちなみに、アイコンが黒一色で透過画像だと、プレビューアイコンはこんな風に悲しいかな真っ黒けで出てきてしまいます。

ファビコンの設定-3

 

変更内容を公開すると、直ぐにファビコンが反映されます。

確認にはブラウザの更新ボタンを押して下さい。

ファビコンの設定-4

このようにファビコンが表示されていれば設定は終わりです。

お疲れ様でした。

ファビコンは、アイコン用の画像を用意する手間はありますが、使用しているツールによってはこの様に簡単に設定することができる場合があります。

 

WordPress以外のブログではファビコンを設定できないの?

ついでなので、WordPress以外のブログサービスでも、簡単にファビコンを設定することができるのかを調べてみました。

はてなブログの場合

はてなブログさんの場合は、ブログアイコンという項目から設定できるようです。ボタン操作で設定できるみたいなので、簡単に変更できそうですね。変更方法はこちらから。

 

FC2ブログの場合

FC2ブログの場合、WordPressやはてなブログさんとは違い、コードの編集作業をしないといけないようです。</head>タグの前に専用のタグを入力してあげないと設定できないとのこと。

ボタン操作で簡単追加ではないので、コードを触るのが始めてという感じの初心者にはちょっと取っつきにくいかもしれません。変更のやりかたはこちらから。

FC2ブログにファビコンを設定してみた
いつもFC2ブログをご利用いただきありがとうございます。FC2ブログスタッフです...

 

ライブドアブログの場合

ライブドアブログさんも、ファビコンの設定は簡単操作のようです。ブログ設定からOGPも設定できるようなので、併せて変更しておくといいかもしれませんね。

favicon画像を設定 : ライブドアブログのヘルプ(PC向け)
faviconとはブログをブラウザのブックマーク/お気に入りに入れた際などに表示されるアイコンです。初期設定ではlivedoor Blogの羽のアイコンですが、これをお好きな画像に変更することができます。設定するには「ブログ設定」の「基本設定」から、「favicon画像」の欄で

 

使用するテーマによっては、自力で設定しないといけない場合もある(WordPress)

余談ではありますがWordPressの場合、使用するテーマによっては、サイトの基本情報にサイトアイコンの項目がないものもあります。

国内産のオススメテーマではこの項目があるものがほとんどだと思いますが、海外産のテーマで更新年数が古いものだと、この設定がされていないことがあるんです。

もしそういうテーマに当たった場合、テーマの元ファイルにファビコンを直接設定するか、カスタマイザーにサイトアイコンの項目を追加するなどの方法でファビコンを設定することが可能(だったはず)です。

ただ、この場合作業難易度が上がりますし、初心者でこういった作業になれていない人だとエラーに対処できないこともあります。

ファビコンを設定する前に、カスタマイザーにサイトアイコンの項目があるのかをチェックしてみた方がいいかもしれません。

タイトルとURLをコピーしました