ファビコン

このページの記事目次 (タグ: ファビコン の検索結果)

Template 28、FC2無料ブログでもファビコンできちゃった…

Bloggerにて映画ブログを書いていた頃、faviconを知って嬉々として作成したものの、FC2では非対応だとのことでブログの上部にpngファイルをくっつけて満足しておりました。

ホームのメタデータを書き加えていた時(Template 27)に、linkタグの使い方が何となくわかって、faviconにリンクを貼ってみたら、出来ちゃった。笑。

これって、規約違反かな??

外国人ライフでもファビコン

↑の赤枠で囲まれた部分が、当ブログのファビコンです。そして、オレンジ枠で囲まれた部分がかつてBloggerで書いていた時のファビコンです。

同じicoファイルなので、同じ見た目。じ~ん。

HTMLコード

<link rel="shortcut icon" href="http://blog-imgs-92.fc2.com/l/a/g/laggy2015/favicon.ico">

上記の赤色部分がファビコンが保存されているurlで差し替えて、<head></head>間のどこかに書き込むだけなので、理論上どなたでもファビコンを投入できそうですよね~。

ファビコンの作り方

過去記事「Favicon(ファビコン)をつくった」が、あるにはありますが…

デザインの方は、ツールを使わず手掘りですので、あまり役に立たないかもです。icoファイルに変えるのも、これが一番スマートなのかよくわかりませんので、プロの記事を参考にしてくださいね~。

スポンサーサイト

Favicon(ファビコン)をつくった

Bloggerの「外国映画ライフ」の為に作成したものです。FC2では有料版じゃないと非対応とどこぞに書いておりましたので断念。

構造化マークアップのロゴ用にpng形式でヘッダーに埋めてみました。


Favicon (ファビコン)とは


ウィキペディア「Favicon」より引用;

favicon(ファビコン)は、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。favorite icon(フェイバリット・アイコン:お気に入りアイコン)という英語の語句を縮約したものである。

ロゴをカスタマイズしようとの発想がありませんでした。Bloggerには、FC2には存在しない知らない言葉がたくさんちりばめられているのですが、こんな風に発展して、結構おもしろいものもあります。


ファビコン使用例


のろのろファビコン

のろのろの「の」です。
単純すぎる…
こういう細かい部分で丁寧にかっこいいモノを作れるかどうかが、人気ブロガーとの分かれ目でしょうか?
(いや、多分、記事の面白さの違いだけど…)

こだわりの手掘り!

ファビコンは専用ファビコン作成ソフトがいろいろあるみたいです。
フォントや色、影などのデザインを考えるのが面倒だったので、当方の手作りです。

消しゴム版

たまたま家にあった貰いものの消しゴムに、
ラインマーカーで太めに「e」と書いて、
つめきりについているちっちゃいナイフっぽい部分で削りました。
最初はファビコン作成サイトで作っていたのですが、なんだか出来上がりがつまらなくて…

思いついちゃったが最後、すぐ完成しました。ほろ酔いパワー恐るべし!

格子柄の紙に判を打っていますから、拡大するとうっすら線が見えて、デザインみたいでしょ?

黄色~橙色~桃色までの色合いが自然なばらつき♪
小っちゃくなったらぼんやりしていまいちな完成度とも言うかも?

ms-icon-310x310.png

画像をファビコンへ変換

おそらくファビコン作成ソフトで作成されたファビコンには不要なステップです。

物理的に押した印をスキャンで取り込んで、ひどく薄いところをペイントで継ぎ足して、↓のサイトでファビコン用の「ico」ファイルへ変換してもらいました。

http://www.favicon-generator.org/

このサイトで作るとicoファイルの他、20種類ぐらいのサイズ違うサイズのpngファイル、XMLファイルやどう使うのか興味深々のJSONファイルが一式フォルダに入った状態でダウンロードできました。

へ?、こんなに沢山のファイルをどうしたらいいの??
っとなりましたが、こういう一見無駄な物から新しい知識を得られることもあるので、のぞいて、そっと閉じました。←

適当に作ったものなので、中央にそろっていないですし、まぁ、いろいろあれですけれど、本人は満足です。

それが、一番大事!多分。

申し訳ありません。 お探しの記事は現在、この ユーザータグ (Keyword) を設定していない可能性があります。 右の検索BOXで 再度用語を短めに入力していただくと記事が見つかる場合があります。