ファビコンを使ってみました

yuru_neko4.png
ウェブリブログの機能に「ファビコン」(favicon)というものがあります。
今まで使ったことがなかったので、今回はこの機能を使ってみました。



1 ファビコンを使ってみた

次の画像が、ファビコンを使った画像です。
ブラウザーの上部に、いくつかのタブの中に「わけいの多肉ブログ」と「オンリーワンより同じ花」のタブがあります。
このタブの左側に表示されている小さな四角い部分が今回作った「ファビコン」です。
fabicon2b.jpg
画像上部のタブの左側の小さなアイコンが「ファビコン」



2 ファビコンを拡大すると

ファビコンは小さいので、拡大してみます。
この画像は、実際にウェブリブログにファビコンを設定する際に使用しました。

favicon_source

6回ぐらい作り直してみました。
最初は文字数も多くて背景も入れたのですが、
小さな画面に自動的になりますので、すると何が何だか判別できない画面になります。
そこで、削りに削りました。
最終的には最もシンプルなものに落ち着きました。



3 ファビコンの役割

Webブラウザでページを開いたときに、「タブの左部分に表示」される小さなアイコンです。
特に多数のタブを開いた時には、ファビコンは何のページかを識別する目印になります。

他にも「お気に入り登録」した際、「アドレスバーでの表示」にも反映されます。
デスクトップのショートカットやサイト用、スマホのクリップアイコンにも使われるらしいのですがまだ確認できていません。
fabikondt.JPG
デスクトップに表示されたファビコン(右上のアイコン)

ファビコンは、サイズは小さいですが、その存在感は大きいのです。
ブログのシンボル(ロゴマーク・目印・CI・キャッチマーク・顔 etc)とでも言えそうです。

私がリンクを貼っている105名の方のブログを訪問してみましたが、そのうちファビコンを設定されている方が11名でした。
私は、先日までファビコンを設定しなかった側でした。
この度私もやっと、ファビコン設定の仲間入り出来ました。

調べた105名の中でファビコンを使われていた方は、以下の11名でした。
koeda.JPG小枝さん sokosoko.JPG偽ストラトさん sarameru.JPGサラ&メルさん
sorazemi.JPG空蝉さん riaruET.JPGリアルETさん eko.JPGekoさん
morisanpo.JPGmori-sanpoさん TAMO.JPGTAMOさん winga.JPGwingaさん
yoko.JPGyokoさん ym.JPGy&mさん
※ブログネームの掲載順は、私のPC上のリンクの「あ行・か行・・・」「英語」順です。
※最初はブログ名も書きましたが、ブログネームだけにしました。
※実際のファビコンがないと分かりにくいと思い、画像を掲載しました。大きさは90×90pxです。実際はこの画像が小さく表示されます。



4 ウェブリブログのファビコンの設定方法

私は最初は、ファビコンは拡張子「.ico」が付く画像ファイルを作らないといけないと思っていました。
そこで、フリーアプリを使って「.ico」ファイルを作りました。

ところが、ウェブリブログでは「.ico」ファイルは不要でした。
必要なファイルは、「.jpg」か「.png」のどちらかです。

ファビコンの作成方法
ウェブリブログのログイン後のトップ画面で、
「設定」 → 「ファビコン設定」 →
「ファイルを選択」(自分のPCから画像ファイルを読み込む) →
「アップロード」→「切り抜き」→「保存」
以上で、全てのページにファビコンが設定され、画面に反映されます。



5 ファビコンの作成ポイント

ファビコンの基になる画像を作る際のポイントです。
通常のイラストや画像のように作成すると、作れますが何のマーク・シンボル・ロゴなどだか全く分かりません。
ファビコン画像はできるだけ線や色が少ない、シンプルであった方が目を引くようです。
また、自分のブログのイメージに関連する画像ががいいと思います。

マイクロソフト(4色の四角)やGoogle(Gのデザイン)、Facebook(fのデザイン)、Twitter(鳩)、アップル(リンゴ)などの有名なホームページのファビコンを見ると参考になると思います。ビッグローブ(円上部に目玉)はお馴染みですね。



6 一般的なファビコンの設定方法

ウェブリブログ以外の通常の場合、ファビコンの設定方法は次の3つあります。
.ico形式を使用
.ico形式以外を使用
Windows用アイコンを使用


Google提唱のファビコン作成ガイドライン

ファビコンサイズは 48 px(ピクセル)の倍数であること(例: 48 x 48、96 x 96、144 x 144pxなど)
(SVG ファイルはサイズ指定なし)
Google 側でサイズを自動的に 16 x 16 pxに変換する
(16 × 16 pxのファビコンは指定しない)

引用元:Search Console ヘルプページ抜粋・要約

ファビコンにはいくつかサイズの規格があり、ブラウザによっても異なるようです。
よく利用されるタスクバーに表示されるサイズの「16×16px」です。
デスクトップのショートカット用は「32×32px」だったり、Windows上のショートカット用やサイト用は「48 × 48px」「64 × 64px」だったりです。
またスマホのクリップアイコンのサイズは114×114pxです。
※なので、最小の16×16pxで作ると、その他の大きなサイズで使えなくなるようですね。

一般的な場合は、Webページのヘッダーに次の構文の タグを追加します。
<link rel="shortcut icon" href="/path/to/favicon.ico">

「rel=""」の「""」には次のいずれかを指定します。
"shortcut icon"
②"icon"
"apple-touch-icon"
④"apple-touch-icon-precomposed"

「href=""」の「""」にはファビコンの URL を指定します。
(Webページのトップページと同じURLです。)

といっても、ウェブリブログでは、上記の指定をしなくてもOKです。
<link rel="shortcut icon" type="image/x-icon" href="https://userdisk.webry.biglobe(以下略)>
<link rel="apple-touch-icon" sizes="152x152" href="https://userdisk.webry.biglobe(以下略)>
が、自動的にヘッダーに書き込まれていました。
①"shortcut icon"と③"apple-touch-icon"が使われていました。
推測ですが、1行目はパソコン用、2行目はスマホ用(iPhone・android)と思います。

そして、ファビコン作成に使用した画像は、通常の画像保管場所とは異なるファビコン専用の場所に保管されているようです。





今回は、私にとって初めてのファビコンデビューの話題でした。
様子を見て、現在のファビコンを基本に、四角の形を変えたり、色を増やしたり・・・挑戦してみたいと思います。

意外と簡単に作れるので、面白かったです。

ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 71

なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー)
驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた
ナイス ナイス ナイス ナイス ナイス ナイス ナイス

この記事へのコメント

  • すずりん♪

    ファビコンの意味も知らなかったので、参考になりました。
    今使うかどうかは別として、どんなのがあるのか気になってきたので、
    しばらくいろんなファビコンを観察してみます。
    2020年02月18日 12:57
  • わけい

    すずりんさんへ
    コメントどうもありがとうございます。
    今まで私も気にしていなかったのですが、作ってみたら実際に画面に反映されて、その面白さに(大げさですが)感動しました。
    すずりんさんが私のブログを表示したときに、すずりんさんのPC環境でもちゃんと表示されるのかが心配です。
    自分のPCではちゃんと表示されるのですが・・・
    2020年02月18日 14:56
  • winga

    こんにちは。
    えっと、私がファビコンを使ってる。。。
    そうなんですか(泣)
    何のことだか。でも使ってるんですね、ワタシ(-_-;)
    2020年02月18日 17:27
  • tor

    タブの感じが違うと思ったら
    こういうことだったのですね。
    私のfc2は馬でウエブリブログは
    顔だと思っていたのですが
    変更できるのですね。
    2020年02月18日 20:33
  • わけい

    wingaさんへ
    コメントどうもありがとうございます。
    wingaさん、ご冗談でしょ!
    「.ico」ファイルを用意する必要があるとか思っていたので、私にとってはファビコンは敷居が高くて「そのうちに」とず~と思っていました。
    やっとのこと、チャレンジしてみようかとフリーアプリで「.ico」ファイルを作ったのですが、ウェブリブログは不要でした。
    wingaさんは、以前から相当な腕だと薄々感じていたのですが、やはり無意識に作ってしまうぐらいの腕前だったんですね。恐れ入りました。
    「フグのようなキャラを何かが取り囲んでいる絵柄の下水道のフタでしものせき」と書いてあるアイコンですが・・・。

    2020年02月18日 20:49
  • わけい

    torさんへ
    コメントどうもありがとうございます。
    fc2も「馬」から自分用の「アイコン」に変更できます。(ネットで「fc2のファビコン設定」で検索すると方法が見つかります)
    また、PCのデスクトップ画面に沢山のアプリのアイコンが並んでいると思いますが、(ファビコン作成の後、同じ画像を使って)そこに「私へのブログにリンクしているアイコンを作りました」。これはブログの種類に全く関係ありません(ブラウザの種類には関係します)ので、torさんもWindowsに標準掲載の「ペイント」から「.ico」ファイルを作れます。アイコンがあると便利なことが結構あるように思いました。
    2020年02月18日 21:07
  • ゴンマック

    こんばんは。
    いつもながら、色んなことをご存じですね。
    いつも感心しています。私は記事をアップ
    するだけでアップアップ(古い昭和のギャグ)して
    いますので、びっくりです。皆様のファビコン
    とても素敵ですね。わけいさんのももちろんです。
    2020年02月19日 00:08
  • 偽ストラト

    おはようございます。
    ファビコン面白いですよね。
    もうちょっとシンプルなものも作りたくなしました!(^^)!
    2020年02月19日 10:21
  • わけい

    ゴンマックさんへ
    コメントどうもありがとうございます。
    私が調べた中では、1割の方がファビコンを使っていましたので、予想に反して結構多いと思いました。
    私は残りの9割の方だったんですが、今回を契機に居場所が変わったようです。
    アップル・マイクロソフト、車、SNSのまーくなど、考えてみるとシンプルで、かつ特徴があって一目で「あそこの・あの・・・」と分かるように工夫されているのだなあ、と思いました。
    2020年02月19日 11:25
  • わけい

    偽ストラトさんへ
    コメントどうもありがとうございます。
    今回の記事でファビコン先駆者の偽ストラトさんのファビコンも紹介させていただきました。
    私はやっと今頃になっての方です。
    各社のマークを見ると一目でわかるように工夫されているのことを痛感しました。
    自分の「ロゴマークの類」があるといいなと感じたところです。
    2020年02月19日 11:32