URLの横にアイコンを付けたよ!

fabi201501
何のデザイン能力もないワタクシですが、
この図案が急に降って沸いてきたので、
ファビコンを作ってみました。


ファビコンってなんぞやって??

fabi201502
URLの横にあるこのアイコンです。

急に神が下りてきたので(笑)、
思いついてすぐ手元にあった広告の裏に、
マジックで絵を描きました。

そしてEvernoteのカメラでパチリ。
なんでエバーノートかというと、
自動モードをオンにすると紙の部分だけ
写真を撮ってくれるからです。
この機能、大好きです^^。

それをPCに取りこんで、Photoshopで
色を付けました。

16px × 16px、もしくは32px × 32pxに
リサイズして、PINGもしくはGIFで保存します。

ファビコン用の拡張子は.icoがいいらしいので、
変更します。

FavIcon from Pics

というサイトを使いました。
英語のサイトですが、画像を選ぶだけでカンタンです!

出来たファビコンをアップロード!

WordPress(Twentytwelve)の場合、
外観⇒テーマの編集⇒header.phpを選択。
< head >から< /head >(スペース不要)の間に、
< link rel="shortcut icon" href="http://画像のURL"/ >(スペース不要)
を埋め込めばOK!

私は< /head>の前に入れました。
要は< head >から< /head >の間に入れるだけなので、
無料ブログサイトや他のテーマからでも、
出来ますね!

headなどの前後にはスペースは不要ですが、
張り方がわからなかったので、
スペースを付けました。
そのままコピペ出来なくてすみません。

視覚的に自分のブログを印象付けられますよ!

このエントリーをはてなブックマークに追加




URLの横にアイコンを付けたよ!」への2件のフィードバック

  1. barbie

    一筆書きっぽくてむっちゃ可愛いです。
    これからりんごさんのトレードマークになりますねʕ•̫͡•ʔ♬✧

    返信
    1. りんごよいこ 投稿作成者

      barbieさん、ありがとうございます^^。
      気に入ったトレードマークが出来て、
      嬉しく思っています^^。

      返信

コメントを残す

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

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)