たかなblog

のんびりと色んな情報を発信していきます。

Web/サービス

タブに表示されるアイコン(Favicon)を設定する。

2015/09/13

ファビコン(Favicon)とは、ブラウザでサイト名横に表示される、Webページのシンボルマークのこと。

stinger3-3

Stinger3だとテーマ適用後、公式サイトと同じロゴが設定されたりします。

Faviconにつて詳しく知りたい方は、Wikiなどを参照してみてください。
Favicon - Wikipedia

今回は、ずっと設定せずに放置していたこのファビコンを設定していきたいと思います。

 

参考サイト
もう何も恐くない…綺麗なfavicon作成の基本的なコツ・アイデアまとめ

 

ファビコンにする画像を用意する

どのようなファビコンにするか、ですが。
当サイトはシンボルマーク的なものがないので、タイトル画像の一部を加工して使用します。

paso

 

画像は探してみるとクレジット表記不要のサイトがゴロゴロしているので、そこから画像をもらってきて加工して使うのもありかなぁと思います。
もちろん、サイトのロゴを一から作ってみてもいいですし、フリーサイトの中にはFaviconを配布しているサイトもあります。

クレジット表示不要、報告不要のファビコン素材サイト

基本商用利用可能、加工OKですが、素材サイトで自分のサイトの素材としての再配布や、有料素材としての販売、アダルトサイトでの利用、アダルトコンテンツが存在する(18歳以上向け同人とか)サイトでの利用、暴力団関係、その他公序良俗に違反するサイトでの利用は禁止されている場合がほとんどですので、該当するサイトは要注意。

160D 25egg-DOT-
16*16というファビコンに最適なサイズの素材を配布してくれています。

このまち
可愛らしい素材がたくさん。Faviconには大きめのサイズでおいているので、32*32など、マルチアイコンも作りやすいですね。

Twinkle Magic
ずばり、そのままFavicon素材を置いているサイト。量も多く、3つにカテゴリされ見やすくなっています。

 

ファビコン用に画像を加工する

どんなFaviconにするか決まったら、次は画像を加工していきます。

 

サイズ

今回は16*16と32*32のマルチアイコンで作成。16*16だけでも充分かもしれないですが、勉強ということで。
それとiPhon/iPad用に75*75のアイコンも用意。
アニメーションはなし、背景は透過(半透明)、拡張子はpngにしています。

75*75
paso2

32*32サイズ
paso3

16*16サイズ
paso4

画像の編集はフリーの画像編集ソフト、GIMPを使用しています。

 

マルチアイコン化する

作成した透過画像をマルチアイコン化します。

無料で半透過マルチアイコンやファビコン(favicon.ico)作成。ギザギザの無い美しい影を持ったアイコン作成がフリーでできます。

GIMPでの作成方法がわからないので、下記のサイトで作成。作成した32*32、16*16の2つの画像をアップロードして「アイコン作成」をポチッとするだけ。簡単です。

favicon

ファイル名はfavicon.icoになっているので変更の必要なし。もしfavicon(2).icoなどになっていたら、数字部分を削除するなどしてくださいね。

ファビコン作成用のサイトは検索すればたくさん出てきますが、私がいつも使っているサイトを紹介しておきます。

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

Stinger3にファビコンを適用する

作成したfaviconを適用します。
Stinger3では、ヘッダーで以下の読み込みをしているようです。

[php]

<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/rogo.ico" />

<!---css切り替え--->
<?php if(is_mobile()) { ?>
<link rel="apple-touch-icon-precomposed" href="<?php echo get_template_directory_uri(); ?>/images/apple-touch-icon-precomposed.png" />
[/php]

ファビコンはimagesフォルダ内のrogo.icoを使用、iPhone、iPadのアイコンにはimagesフォルダ内のapple-touch-icon-precomposed.pngを使用しているようなので、それぞれのファイルを作成した画像で置き換えます。

 

アップロードしたFaviconの確認

いつもなんですが、GoogleChomeさんはファビコンがなかなか反映されないんですよね。
FireFoxではちゃんと反映されていました。

favicon2

GoogleChomeの設定>履歴>閲覧履歴データの消去で「閲覧履歴」と「キャッシュ」、「Cookieと他のサイトやプラグインのデータを削除する」にチェックを付け、「履歴データを消去する」をクリック。

履歴データが消去できたらページを再読込み、、でも変わらないので、ブラウザ自体を再起動します。

favicon3

Google Chomeにも無事反映されました!

PCの画面部分は色つけたほうがよかったかな。。これは色々試してみよう。。

 

管理画面にもFaviconを付ける

蛇足になるかもしれませんが、Wordpressの管理画面にfaviconを付ける方法が下記のサイトに載っています。

WordPress のよくあるカスタマイズコード functions.php 多め

16*16で色違いのアイコンを作ってあげると、管理画面を見るのが楽しくなるかも。

[php]
function admin_favicon() {
echo '<link rel="shortcut icon" type="image/x-icon" href="'.get_bloginfo('stylesheet_directory').'/images/admin-favicon.ico" />';
}
add_action('admin_head', 'admin_favicon');[/php]

リンク先参考サイトでは、ファビコンの配置先をtemplate_urlのimagesフォルダの中、と指定していますが、私は子テーマを作成していて子テーマフォルダ内のimagesフォルダを使いたいので、代わりにstylesheet_directoryを指定しています。

favicon4

ダッシュボードのファビコンが表示されました!画面の中を透過じゃなく塗りつぶしにしたので、こっちのほうが綺麗に見える。。

 

イラスト系のツールを持っていなくても、ペイントで四角く塗りつぶせば立派なファビコンになります。シンプルでもファビコンがあると一気に綺麗にみえるので、是非挑戦してみてくださいね!!

 

-Web/サービス
-, ,

おすすめ記事

1
母の日のプレゼントに!2017年最新お取り寄せグルメ一覧

こんにちは!毎年この時期になると、「母の日 プレゼント」や「母の日 贈り物 花以 ...

2
2016年 母の日にどうぞ!楽天レビュー数10000以上、評価4以上のお取り寄せグルメ一覧

今回は「日々の贅沢」「贈り物」の参考としていただくため、健康食品や1kgで100 ...