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

くつキッチュ!アイコン 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」をインストールしちゃ、ダメ!ゼッタイ!

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

記事を読む

とつぜんですがここでクイズです。「発酵」に関する画像にチェックを入れてください。

面倒な画像認証を楽しいぷちクイズにできるGoogleAPI『reCAPTCHA』設定方法♪

※ダミー認証画像です(笑)くつきちよこ 登場人物:くつきちよこ ※管理人   佐藤 ※ゲス

記事を読む

Initial thoughts on Bilski by opensourceway, on Flickr

amazonJsで「amazonへのレスポンスがパース出来ません」エラーが出たときの対処法

Initial thoughts on Bilski by opensourceway,

記事を読む

ネットオウルでワードプレスをインストしてもログイン画面が表示されない時の対処法 default_page画像

ネットオウルでワードプレスをインストしてもログイン画面が表示されない時の対処法

 もくじ これまで無料サーバーのめちゃくちゃお手軽なインストールに頼りきりだったくつき

記事を読む

ワードプレスの記事内にSoundCloudの音楽を埋め込むには?【WPプラグイン】

  追記:2015-02-23 現在はURLコピペのみで簡単に埋め込み出来ます。

記事を読む

WpBlog(ワードプレス)のトラブルで万策尽きて「しかたない削除するか……」と思っている方、待って!奥の手! 【アプリケーションの初期化】を試す価値あり!※自己責任でお願いします。

WpBlog(ワードプレス)のトラブルで万策尽きて「しかたない削除するか……」と思っている方、待って!

くつきちよこ年末のご挨拶バージョン   登場人物:くつきちよこ ※管理人 

記事を読む

Title:Peeking Diet Bos on Flickr Some rights reserved

今さらだけど、大事な事!「写真をブログにアップする時の注意点」

  Title:Peeking Diet Bos on Flickr Some right

記事を読む

マウスコンピュータのHDが壊れました illust by 3104o ©佐藤利音

ヱ□カテゴリにアドセンスを表示させない『Display Widgets』『Widget Logic』は創作家サイトに必須のWPプラグイン!

26歳社畜之図 佐藤利音 on Twitter  ハイ、広告表示されてないですね?

記事を読む

俺の妹が?モバイルサイトを爆速にしてくれるAMP(アンプ)を、WPプラグインで導入したら、エラーが出たので対処してみた件 「PageSpeed Insights」にて、AMP導入後の爆速さ!!!

俺の妹が?モバイルサイトを爆速にしてくれるAMP(アンプ)を、WPプラグインで導入したら、本当に爆速になった件

AMPページサンプル 登場人物:くつきちよこ ※管理人   佐藤 ※ゲスト 本日は、サイ

記事を読む

Dog fetch toy train, dog crush toy train by Andy, on Flickr Some rights reserved

Fetch as Googleを忘れがちな知人のため、Search Console(旧ウェブマスターツール)で協力者の追加をしたよ!

Dog fetch toy train, dog crush toy train by

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


Time limit is exhausted. Please reload CAPTCHA.

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

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