「サイトの名刺?」ファビコン設置方法 -ファビコンテスト前哨戦-

くつキッチュ!アイコン wordpressカテゴリへ

本日はサイトの名刺『ファビコン』に関しての記事です。

サイトの名刺ファビコンテスト前哨戦-ファビコン設置方法-* アイキャッチ画像 Favicons by Loozrboy, on Flickr
Favicons by Loozrboy, on Flickr

サイトの名刺『ファビコン』

先日こちら⇒「オッス!オラSTINGER!」……のカスタマイズ、検索ボックス編 あとちょろっとbtn素材配布♪の記事で…

STINGERで目立つパーツベスト3は

  1. 検索フォーム
  2. SNSボックス
  3. ファビコン

※くつき調べ。

という、生意気な記事を書かせて頂きました。

これってSTINGERがまだここまで普及してなかった頃ならなんとも思わなかった事なんですけどね。

STINGERが流行り過ぎてしまったがゆえ、なんでもないことが気になるようになってしまったんだと思います。

というわけで、今回は前回の検索窓カスタマイズに続き、『できればやっておきたいファビコンカスタマイズの巻』です。

ファビコンてそんなに大事?

まずは「ファビコンなんてちっこいアイコンでしょ?そんなに大事?」というところから…

ファビコン…ChromeやFirefoxなどのタブブラウザに慣れている方なら結構大事なポイントだと思います。

FeedlyなどRSSリーダーでチェックしているときは、簡単に10~20くらいはタブを開いてしまいますし…。

そんな時に道しるべとなるのはやはりファビコンです。

例えば…

デフォルトのままの場合

サイトの名刺ファビコンテスト前哨戦-ファビコン設置方法-* アイキャッチ画像 favicontest2

例えばこれはSTINGER公式サイトとSTINGERのテーマをデフォルトまま使用しているサイトです。

ファビコンをデフォルトのままにしておくと、最悪、公式サイトとも被ってしまってかなり紛らわしいのがお分かりいただけるかと思います。

これはサンプルですので、わざと隣にしてありますが隣り合わせにならない場合でも、クリックする時に一瞬迷ってちょっと厄介;

ファビコンなしの設定の場合

ではファビコン設定が無いサイトの場合はどうなるかというと…

サイトの名刺ファビコンテスト前哨戦-ファビコン設置方法-* favicontest4

重なるとこんな感じです。

これもわかりやすいよう大げさにしてますが、 オリジナルでファビコンを設置しているサイトに比べてかなり判別しづらいのがわかります。

サイトの名刺ファビコンテスト前哨戦-ファビコン設置方法-* favicontest3

ちなみにWordpressの編集ページもファビコン設定がありませんので、Wp編集中ですとさらに複雑なことになります。

STINGERのファビコンカスタマイズ方法

というわけで、できればやっておきたいSTINGERのファビコンカスタマイズ方法ですが…

こちらもは先日の検索窓のカスタマイズとほぼ同様、方法は2つ。

※必ずバックアップを取ってから作業して下さい。

その1:rogo.icoをimageフォルダに放り込む

STINGERの場合、

/wp-content/themes/stinger3ver20140124/images

というフォルダに『rogo.ico』というファビコン画像ファイルがありますので、お好みのファビコン画像の名前を同名にしてimageフォルダに放り込んで上書きします。

この辺りは、「オッス!オラSTINGER!」…(ry  FTPソフトに放り込んで上書き♪と同じ方法です。

その2:header.phpのファビコンURLを入れ替える。

こちらは同じく検索窓カスタマイズ記事の 4 2. searchform.phpの画像URLを直接書き換え。と、同じです。

メディア⇒アップロード⇒編集⇒[ファイルのURL]をコピー⇒header.phpのファビコン画像のURLを書き換え⇒ファイル更新

header.phpの変更部分 ※stinger3ver20140124の場合は、38行目あたりです。

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

こちらの<link rel=”shortcut icon” href=”<?php echo get_template_directory_uri(); ?>/images/rogo.ico” />部分を…

<link rel="shortcut icon" href="ファビコン画像のURL" />

に書き換え、ファイル更新します。

以上です。

オマケ:お手軽アイコンツール

ファビコン変換サービス 画像⇒アイコン変換ツール
ファビコン変換サービス 画像⇒アイコン変換ツール
ファイルをアップロードして『アイコン作成』をクリックするだけで簡単にアイコンが作成できるオンラインツールです。

なるべくタブを複数開かないのが一番なのですが…

ここまで来てなんですが、あまり開き過ぎるとブラウザが重くなりますし、本当はやたらとタブを開かないのが一番なんですよね。

それは分かってはいてもGunosyやはてぶなどで上がってくる記事を読み込むべきかどうか判断するためにだけちょっとだけタブを開きたい…

なんてことはよくあると思います。

くつきも気になるタイトルをクリックしまくった後、サイトに行って自分が欲している記事かどうか確認して取捨選択したりしてます。

サイトの名刺ファビコンテスト前哨戦-ファビコン設置方法-*  favicontest8

この場合、タブが10個以上開いてしまうなんてザラ。

さらにそこにFlickrからメールで「大英図書館に新着でいいの入ったよ!見る?」なんて言われてしまうと、最終的に結構な数のタブが開きまくってしまいます。

なるべくタブを開き過ぎないのが理想、しかし、現実的なところではなかなか難しい;;

現状は「わかっちゃいるけど、新着が目につくとどうしてもタブを開きまくっちゃうんだよね~」という方も多いのではないかと。

となると、「せめてオリジナルファビコンでわかりやすく」というのがリアルな対応策になるのではないかと思います。

予告:後日(こじんまりと)ファビコンテスト開催♪

くつきの独断ですが、ファビコンで一番目立つのは

  • ファビコンで使用できるスペースを余すところなく使える四角系
  • 濃い色の背景色に白抜きのテキスト

タイプかなと。

例えば、googleやJPGmini、ライフハッカーさんなど。

サイトの名刺ファビコンテスト前哨戦-ファビコン設置方法-* favicontest7

また、何かの形になっているファビコンの場合は…

  • 色数が少ないもの。
  • 塗りが一色(アウトラインがない)
  • コントラストのハッキリしたもの。

が、比較的見やすいのではないかと思います。

サイトの名刺ファビコンテスト前哨戦-ファビコン設置方法-* favicontest5

FlickrやYouTube、twitterなど。

その他、特徴的すぎて素晴らしいなと思うのはこんな感じのファビコン。

サイトの名刺ファビコンテスト前哨戦-ファビコン設置方法-* favicontest6

このメガネの人の良さそうなキャラクターは一瞬でデイリーポータルZと分かりますし、それほど読み込んでいない(スミマセン;)47ニュースもこれを見れば一瞬で判別できます。

そんなわけで、最近ファビコンに目がないくつきです。

もう少ししたら、ファビコンテスト(素敵ファビコンランキング)記事でも書こうかなと。

今回はその前哨戦ということで…

『ファビコンテスト』は、素敵ファビコンがストックでき次第回収いたす予定です♪

でっは~(*´∀`*)ノシ

ブログランキング・にほんブログ村へ
にほんブログ村

ちなみに、こちらはくつきのサイトのファビコンです。

黄色が『日々一素材』、白が『イチパン!』、ピンクが『くつキッチュ!』ですが、アウトラインが残っているのでちょっと見づらいかも;;

サイトの名刺ファビコンテスト前哨戦-ファビコン設置方法-* アイキャッチ画像 favicontest

  • このエントリーをはてなブックマークに追加
  • Share on Tumblr

関連記事

boxo fart by boxo, on Flickr Some rights reserved ネットオウルWPblog利用中方はプラグイン「w3-total-cache」インストールしちゃダメ!ゼッタイ! アイキャッチ画像

ネットオウルWPblog利用中方はプラグイン「w3-total-cache」をインストールしちゃ、ダメ!ゼッタイ!

なあ……ワードプレスなんですぐ死んでしまうん?~~(  ゜  ゜) なあ……なんでなん

記事を読む

Tumblrボタン(フォロー、共有)設置方法 記事下設置やプロフィールへの設置、その他シェア方法など イチパン!サンプル

WordPressでTumblrボタンを実装してみた(記事下、サイドバーへの設置、その他シェア方法など)

  Share on Tumblr こちら、昨日作ったくつキッチュの姉妹サイト『イチ

記事を読む

2013冬の陣 名古屋・松阪・静岡の旅 その1

送水口最強伝説!素敵ブログ観察記1 『送水口倶楽部様』編

素敵ブロク観察記のこと 送水口倶楽部『2013冬の陣 名古屋・松阪・静岡の旅 その1』

記事を読む

Google Mapsが表示されなくなったら困るので、APIの設定をしてみましたよ(*´・▽・`*) アイキャッチ画像 design by くつき 素材 by ClipStudio セルシスさん

Google Mapsが表示されなくなったら困るので、APIの設定をしてみましたよ(*´・▽・`*)

  赤い使徒?design by くつき ⇒  3Dオブジェクト 地球 by セルシス

記事を読む

「忍者サンドボックス」の「忍者文庫」で、縦書き電子書籍を作ってみたよ♪ 忍者ツールズが機能満載過ぎてよくわからないので図にしてみた図

「忍者サンドボックス」の「忍者文庫」で、縦書き電子書籍を作ってみたよ♪

  忍者ツールズイメージ図 くつきちよこ   登場人物:くつきちよこ ※管理

記事を読む

人生でやりたい100のリスト アイキャッチ画像 Miami Beach sightseeing bus tour - Ocean Drive by interbeat, on Flick

記事を書いているだけで人生が楽しくなった!「人生でやりたい100のリスト」がめっちゃオススメ!!

昨日こちらのテーマ(子テーマヘッダー部分CSS)でお世話になっておりますQtaro さん

記事を読む

ブラウザのみでWordPressが使える無料サービスCloud9を使ってみたッチュ!

ブラウザのみでWordPressが使える無料サービスCloud9を使ってみたッチュ!

クラウド最強エディタ「Cloud9」が、WordPressもブラウザのみでインスト・開発・公開が

記事を読む

Hardcover book gutter and pages by Horia Varlan, on Flickr ページををめくるめくwpプラグインFlippingBook Galleryとか合成GIFとかの雑談

ページををめくるめく効果が簡単に作れるwpプラグイン『FlippingBook Gallery』とか合成GIFとか諸々

※サーバーが落ちてるのかここしばらくつながらない状態のようです。様子見のため、URLやサンプルページ

記事を読む

Numbers by SamahR, on Flickr Wpでページめくり効果が簡単に使えるプラグインFlippingBook Galleryの使い方

2-Wpで電子書籍っぽいページめくり効果が使えるプラグインFlippingBook Galleryの使い方『BOOKを記事で表示する』編

  追記:「WordPressの更新後、まれに『FlippingBook

記事を読む

Photo by Flickr CJ'sフォトストリーム

Stingerの『Page Top↑』を可愛くカスタマイズしてみた♪

    Stingerで『Page Top↑』を可愛くカスタマイズしてみた♪ WordPressブ

記事を読む

  • 創作クラスタ応援し隊のくつきちよこ(崛起智世子)です。 このブログは、「ネット著 作権」、「セルフプロモーション」、「ワードプレス運用」、「電子書籍サービス」、 「自己出版(セルフパブリッシング)」、「創作」等に関する情報をお届けしておりま す。 ※Wiki『創作ステージ@まちペディア』(ちょっと押してますが)作成中です♪
  • follow us in feedly
  • くつキッチュ/スクラップス! on Tumblr

  • 「表現の自由を守る党」自作応援バナー くつきちよこ

  • マウスコンピューター/G-Tune