【Gush2】お手軽なファビコンの設定方法。【Stinger5 forLadys】も。

 

ファビコンとは、ブラウザのタブやブックマークでタイトルの横に表示される小さい画像のことです。Gush2ファビコン画像(gush2)とか、Stinger5 forLadysファビコン画像(Stinger5 forLadys)とか。

「デフォルトのままじゃ嫌だけど、凝ったことはしなくていいや」って人向けのテキトーなやり方です。

WordPressでは「ファビコンを変えるプラグイン」なんてのもあるらしいですが、ファビコン画像ファイルを入れ替えるだけなんで、プラグイン使うほどのことないんじゃないの?と思います。はい。

ファビコン用画像を用意します

アイコン素材サイトでアイコンをダウンロードするのがいちばん簡単ですね。

ここなんか、私は好きです。アイコンごとにライセンス(著作権の扱い)が違うので、気を付けないといけないですが。
英語サイトなので「ハート」じゃなくて「heart」で検索します。「かわいい」は「cute」かなと思ったら、なんか違う…。

Iconfinder – 575,000+ free and premium icons

Iconfinder provides beautiful icons to millions of designers and developers. Iconfinder now hosts the worlds largest collection of premium icons.

さらさらぶろぐのファビコンはこちらのを使わせてもらってます。ライセンスが気楽でよいです。

商用利用可能なアイコン・イラスト素材ならICON HOIHOI

「商用利用可能なアイコン・イラスト素材ならICON HOIHOI」は、ウェブサイト制作&デザインに少しでも興味を持っている方のお役に立てるようフリー素材(主にアイコン)を提供することを目的としたサイトです。多くの方が気軽に利用できるように、完全無料・商用利用可能で、使用の際の連絡・コピーライトの表記も必要ありません。アイコン・イラスト素材の使用法につきましては「利用規約」を一読くださいませ。

サイズは、32px

最適サイズは32pxです。
素材サイトで32pxのアイコンがあれば、それを選びましょう。

大きい画像を32pxにリサイズして作ってもよいです。画像加工ソフトはいろいろありますが、サイズ変更だけなら、こちらのフリーソフトがおすすめです。
Ralpha – 窓の杜ライブラリ
1000pxの写真を32pxにリサイズするという荒業をやってみたことあるけど、色が少なかったからか案外綺麗なファビコンになりました。

32pxがベストな理由は、こちらの記事をご参照ください。

綺麗なfavicon(ファビコン)作成の基本的なコツ・アイデアまとめ | 株式会社LIG

(編集部注*2013年3月14日に公開された記事を再編集したものです。) デザイナーのサリーです。 ブックマークしたサイトのfaviconを眺めるのが好きです。 小さくて細かいものが並んでいるときゅんとします。 今日はfavicon作成時に気をつけている点や、コツ・アイデアをごちゃまぜにまとめてみました(設置

ファイル形式は、pngやjpgでOK

アイコン素材はたいがいpngで配布されてますね。png、jpgはそのまま使えます。
ほんとはicoという形式に変換すべきらしいですが、古いブラウザのことは無視していいやって思えば、pngやjpgのままで問題ないです。

うちのPCもまあまあ古いけど、ブラウザソフトは更新してて、pngやjpgのファビコンもちゃんと表示されてます。
古いブラウザはセキュリティ問題があるから、ふつう更新してると思うんだよね。だから古いブラウザは無視していいやって思ってるのです。

ファイル名は、WordPressテーマのデフォルトに合わせる

Gush2の場合は、「favicon.ico」にします。
Stinger5 forLadysの場合は、「logo.ico」にします。
ファイル形式がicoじゃないのにicoという拡張子にするのはちょっと抵抗ありますが、簡単テキトーな方法ってことで、テーマのデフォルトの名前にしておきます。

ファイル転送(FTP)の準備をしときます

ファビコン画像ファイル(favicon.icoやlogo.ico)の入れ替え(上書き)はファイル転送で行います。
レンタルサーバーにファイル転送機能があればそれを使えばよいですが、無い場合はFTPソフトを使います。

FTPのおすすめフリーソフトは、FFFTPです。こちらでダウンロードできます。FFFTP – 窓の杜ライブラリ

初期設定は、こちらを参考になさってください。
FFFTPの設定例と接続|Naifix

サーバーにあるファビコン画像ファイルを上書きします

FFFTPを使って、サーバーにある「ファビコン画像ファイル」を上書きして新しい画像にします。

子テーマ下に「ファビコン画像ファイル」を置いても、親テーマ下のファイルが使われちゃうので、親テーマ下のファイルを上書きするのです。

Gush2の場合

Gush2のファビコン画像ファイルは、「favicon.ico」です。下記の場所にあります。

Stinger5 forLadysの場合

Stinger5 forLadysのファビコン画像ファイルは、「logo.ico」です。下記の場所にあります。

その他のWordPressテーマの場合

WordPressテーマのディレクトリ構造はだいたい同じなので、下記の場所を見れば、ファビコン画像が見つかるでしょう。

表示確認のときは、ここに注意

キャッシュをクリアして確認します

ファビコンは、キャッシュされてて、変更が反映されにくいので、キャッシュをクリアして表示確認しましょう。
「新しいファビコンが表示されない~」というときは、たいがいキャッシュが原因です。

キャッシュのクリア方法は、寝ログさんを参考にするとよいと思います。
Chromeのブラウザキャシュを簡単に削除する2つの方法+普通の方法
Firefoxでブラウザキャッシュを削除する方法いろいろと、自動削除設定の仕方
Internet Explorer11のブラウザキャッシュ(インターネット一時ファイル)の削除方法

InternetExplorerでも確認します

I.E.のファビコンは16pxで、32pxで作ってあると縮小表示してくれますが、きれいにはいかないこともあるようです。
I.E.で表示してみて、ChromeやFirefoxと同じように表示されてればOKです。

もし、おかしな表示になっちゃってたら、16pxの画像も作ってマルチアイコンにするのがフツーの解決方法ですけど、ファビコンのデザイン自体を別のにすれば?って私は思います。
マルチアイコンて、ファイルサイズが大きくなるし、なんか面倒なんだもん。

スマホのホーム画面のショートカットはファビコンじゃないんだよ

ユーザのさまざまな環境に合うマルチアイコンとやらを作るべきなのか?と思ったりして、調べたり試したりしたのだけど、けっきょく「32pxでいい」って結論になりました。
パソコンのデスクトップにショートカット登録されるようなブログじゃないもんね。てか、パソコンのデスクトップショートカットって使ってる?私は全然使わないです。

個人でも人気ブログなら、スマホやタブレットのホーム画面にショートカット登録されるかもしれないけど、その場合に使われるのはファビコンじゃないんです。
ファビコンとは別に、144pxのpngファイルを作る必要があります。ウェブクリップアイコンって名前らしいです。

スマホ対策!faviconを設定するなら「ウェブクリップアイコン」も忘れずにね! | 株式会社LIG

こんにちは!サリーです。 昔は、設定していたら「あらオシャレ」くらいの感覚だったfaviconも、近頃はすっかり必須項目となってまいりました。 その一方で、最近ではスマホ用の「ウェブクリップアイコン」というものがあります。 これがちゃんと設定してあると「おっ」て思います。とっても簡単なので設定してみましょう。

だから、ファビコンは32pxでよいのです。

まとめ

ファビコンが設定してあると、ブックマークや履歴を探すときに見つけやすくて、ユーザーフレンドリーになりますよね。
今回いろいろ調べて、透過がいいとか、色数はどうだとか、ドットはどうだとか、凝ればきりがないってことがわかって… でもどうせセンスないから、配布されてるの使っとけばいいやっていうのが、私の結論です。(^^ゞ
32pxのpngを使っとけば、まあだいたい大丈夫です。

Gush2説明書に、ファビコン設定方法が無いようだったので、記事にしてみました。フツーは、ヘッダーや背景を先にカスタマイズするんだよね…。

背景画像の削除と設定方法 – WordPress Theme Gush2

Gush2 では、PC表示(1024px 以上)のときにヘッダー・ボディー・フッターに背景画像を出力しています。 指定箇所と、オリジナル画像に変更する方法を解説します。 この記事の目次1 背景画像出力部分(CSS)2 背 …

  • このエントリーをはてなブックマークに追加
  • Pocket
書いてる人 さらさらり
お里湯さんのひよこ|ぴよたそ

この記事へのコメントはこちら

メールアドレスは公開されませんのでご安心ください。
また、* が付いている欄は必須項目となりますので、必ずご記入をお願いします。

内容に問題なければ、下記の「コメント送信」ボタンを押してください。