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

くつキッチュ!アイコン 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

関連記事

Wpマルチサイト化サブディレクトリ型はめちゃ簡単!の初心者のハマリポイントは2箇所だけ! bento box by josey4628, on Flickr

Wpマルチサイト化(サブディレクトリ型)はめちゃ簡単!初心者のハマリポイントは2箇所だけ!

bento box by josey4628, on Flickr Wpマルチサイト化(

記事を読む

WordPress4.5に更新したら、[ビジュアル][テキスト]タブの切り替えができなくなった!原因は「HeadSpace2」でした(・▽・)/ 編集ツールからやたら遠いイメージ図をクリスタのポーズくんで描いてみた。

WordPress4.5に更新したら、[ビジュアル][テキスト]タブの切り替えができなくなった!原因は「HeadSpace2」でした(・▽・)/

不具合ページサンプル(出演:クリスタのポーズさん) 登場人物:くつきちよこ ※管理人   佐藤

記事を読む

写真公開時のセキュリティに関して Online safety for kids by IntelFreePress, on Flickr

意外と知られていないExif情報のこと/写真公開時のセキュリティに関して

  Online safety for kids by IntelFreePress, on

記事を読む

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

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

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

記事を読む

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

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

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

記事を読む

インターネットサーバーエラーである日突然サイトが落ちたので閉鎖しようとしたけど、ダメ元である事をしたら偶然直った話。※マネは慎重に! 素材サイトの構成

インターネットサーバーエラーである日突然サイトが落ちたので閉鎖しようとしたけど、ダメ元である事をしたら偶然直った話。※マネは慎重に!

図:くつきちよこ   登場人物:くつきちよこ ※管理人   佐藤 ※ゲ

記事を読む

業務連絡のお詫びとWP怪奇現象の話 Chrome怪現象?「sample.com ページは機能していません ichipan.phpapps.jp でリダイレクトが繰り返し行われました。 次をお試しください: ページを再読み込みする Cookie を消去する ERR_TOO_MANY_REDIRECTS」 

【業務連絡】素材サイト告知に関するお詫びと、WP怪奇現象の話

    『イチパン!』 ログイン画面 登場人物:くつきちよこ ※管理人

記事を読む

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

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

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

記事を読む

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

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

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

記事を読む

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

記事を読む

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

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

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