ブラウザで表示される、サイトの左横の小さなロゴを変更してみた結果

    

medium_3568409530

ブラウザのタブとかでサイトの左側に表示されるロゴマークがありますよね。

今回はあれを変更します。

photo credit: Franco Bouly via photopin cc

スポンサーリンク



345342
Before

目立ちませんよね。”kakujin”というサイト名がどこにあるかパッと見ではまったくわかりません。

これを何とかしようという試みです。

流れ(予定)

ロゴ画像を用意する。JPEGでもPNG形式でも。

アイコンファイルへ画像変換。拡張子は”.ico”というアイコンファイルになる。

いろいろな変換サービスを検索で探せます。

google検索キーワード:”アイコン ファイル変換”、”ファビコン 作成”

たとえばこことか。
http://ao-system.net/favicon/

こことか。
http://www.favikon.com/

どこでもいいんじゃない?

どこかひとつと言われれば「favikon」がおすすめ。

画像を選択して任意の範囲をファビコンファイルかPNGファイルに変換できるサービスで、直感的な操作ができます。

サイトもシンプルでユーザーフレンドリーな作り。

ワードプレスのプラグインを使うという方はこちら。
“Favicon Rotator”を使ってロゴを変更しましょう。

https://wordpress.org/plugins/favicon-rotator/

簡単なのでおすすめです。

ワードプレスの管理画面からプラグイン新規追加を選んでプラグインの検索窓に”Favicon Rotator”と入力しましょう。

インストール後に有効化を忘れないように。

以下のサイトが参考になります。

ファビコン作成・設定用wordpressプラグイン 『Favicon Rotator』の使い方
http://super462.com/wordpress/favicon-rotator/

ワードプレスのプラグインを使わないという方はこちら。
テーマを直接変更してロゴを変更しましょう。

1,Favicon に使う画像のファイル名を favicon.ico に変更します。
2,Favicon 画像をテーマのメインディレクトリに設置(/wp-content/themes/xxxx)。
3,header.php の </head>タグの上あたりに以下のタグを記入。
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" />

こちらが参考になります。

WordPressでfavicon(ファビコン)を設置してみた件
http://twi-papa.com/archives/1402



実際の流れ

では、以上を踏まえて、実際にKakujinのとった行動が以下のようになります。

素材ファイルをPNGで用意してプラグイン”Favicon Rotator”を使用してロゴ設置。
終わり。

たぶんこれが一番簡単。

ファビコンをアニメーションにしたいですか?現状アクセスもないのにそんなことしたところで、自己満足の品質追求で終わりそう。今は必要ないと思いました。

マルチアイコン?サイズごとに使用用途があるようなんですが、いまはそんなことに時間をかけたくないですよね。ウェブデザイナーではありませんから。
必要なのはQDC(クオリティ、デリバリー、コスト)言い換えると質と達成できる期間とそれにかかるコストのバランスです。

アイコンを透過させたい?むむむ、させたいかも。

Favicon画像は「.png」や「.gif」でも表示出来ますが、古いブラウザは対応していないものもあるので、マルチアイコンにも出来る「.ico」が一番好ましいです。

もう何も恐くない…綺麗なfavicon作成の基本的なコツ・アイデアまとめ
http://liginc.co.jp/web/design/material/16853

よし、古いブラウザの対応はあきらめよう。

結果、こうなった。

23532
After

シンプルですが以前と比べて、タブで大量にページを開いても目立つようになりました。

素材は”pondの手描き素材集”を使いました。↓のリンクを参考にしてください。

へたうま!?とっても役にたつブログ素材集。自分でも書けそうだと思って書いたら、自分のは完全にへたなだけだった。
http://www.kakujinblog.com/post-48/

JPEGファイルとPNGファイルが用意されているのでPNGファイルを選び、画像変換ソフトで正方形に切り取り”Favicon Rotator”でロゴを割り当ててください。
PNGファイルは勝手に透過されるようになります。

サイズは適当でも大丈夫でした。


スポンサーリンク



関連記事

このページの先頭へ