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

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

関連記事

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

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

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

記事を読む

Initial thoughts on Bilski by opensourceway, on Flickr

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

Initial thoughts on Bilski by opensourceway,

記事を読む

創作支援屋靴キッチュスクラップス!くつきちよこアイコン木の実モザイクVer  Illust by 佐藤利音 ベジェ化 by くつきちよこ

ランボー 怒りの新規ファイルのアップロードが出来ないWordPressトラブル※未解決 と、電子書籍出版お手伝い裏舞台

Panic stations ! by Craig Sunter - Thanx 2 Milli

記事を読む

ああこれSTINGERだなとわかるブログの特徴 検索ボックス編 Magnified Eye_5364c by hoyasmeg, on Flickr

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

本日は、『くつキッチュ/SCRAPス!』でもお世話になっておりますWordPressテーマ『

記事を読む

Title:Peeking Diet Bos on Flickr Some rights reserved

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

  Title:Peeking Diet Bos on Flickr Some right

記事を読む

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

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

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

記事を読む

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

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

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

記事を読む

Image taken from page 113 of 'Lilliput Lyrics ... Edited by R. Brimley Johnson. Illustrated by Chas. Robinson' by The British Library, on Flickr googleWebフォントを使ってみたよ!副題『不機嫌ウィザードは、邪悪な女王とジャックのための毒性醸造を行います。』

2ステップでお手軽簡単な『GoogleWebフォント』を使ってみたよ!「不機嫌ウィザードは、邪悪な女王とジャックのための毒性醸造を行います。」

前から気になっていたWebフォントを使ってみました♪ Image taken from

記事を読む

創作ブログに最適な「LINEトーク吹き出しCSS」で、表示が崩れるときの忘備録 カスタマイズサンプルアイキャッチ画像

創作ブログにピッタリな「LINEトーク風フキダシCSS」の表示が崩れるときの忘備録

あけましておめでとうございます。   会話形式の多いブログにピッタ

記事を読む

photonヤバイ!と思って切ったら、「EWWW Image Optimizer」line1674のエラーでダブルパンチ!……死ぬかと思った! パクリサイトが、パクラレサイトの画像に直リンして画像を盗用するイメージ

サイトをコピーされた? でも、JETPACKのphotonを有効にしてると、「画像の差し替えの反撃」ができないみたい

   直リンで画像を登用される時の説明画像   登場人物:くつきちよこ 

記事を読む

Message

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

Time limit is exhausted. Please reload CAPTCHA.

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

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

  • パソコン工房「CLIP STUDIO PAINT PRO推奨パソコン」エントリーモデル登場