favicon(ファビコン)作成

サイト作成後、2週間が経ちました。まだまだWordPressはわからない点が多いですが
いつもの「何をやるにも格好から」という事で今日はfavicon(ファビコン)を作ってみました。

ファビコンとはウィキペディアでは

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

となっております。

Google Chromeではこんな感じで表示されていますね。

favicon(ファビコン)作成画像1

作成はとても簡単です。
まず、元となる画像を作成します。
サイズは特に指定は無いのですが正方形で作成する必要があります。
今回はIllustratorで32×32ピクセルで作成しています。
(デスクトップにショートカットを保存すると32×32のアイコンなので合わせただけ・・・)
Mという文字でフォントを「DFスターゴシック体 Std W12」に指定しただけです(^^ゞ
これをjpegで保存。(PNG , GIFでもOKです♪)

favicon(ファビコン)作成画像2
Adobe Illustrator CC

そして、ファビコン用にファイル形式を変更します。
色々なサイトがあるのですが、有名どこで「エーオーシステムさんのサイト」で先ほどのファイルを選択します。
すると画面右側に「ダウンロード」ボタンが表示されますのでダウンロードできます。

favicon(ファビコン)作成画像3

すると「favicon.ico」というファイルがダウンロードできますので、FFFTP等のソフトでサーバにアップしてやればOKです。

賢威テンプレートをご利用の場合は既存のfavicon.icoを上書きするだけで完成ですが、通常は
ブログやWEBサイトの <HEAD> ~ </HEAD> 内に、LINKタグを設定します。

<LINK REL=”SHORTCUT ICON” HREF=”favicon.ico”>

HREF=”” に、favicon.icoファイルへのパスを指定します。相対パスでも指定はできますが私は自分でも判りやすい用にhttp:// で始まる絶対パスで指定しています。

環境にもよりますが、反映されるまで少し時間が必要な場合もあるのでご注意を!

実際は小さくて詳細が見え辛いので320pxに拡大したものがこれ!
自己満足の世界ですね(^^ゞ

favicon(ファビコン)作成画像4

----------------------------------------------
いつもご訪問、ありがとうございます。
応援していただけますと頑張れますので
良かったらクリックお願いいたします。
応援→にほんブログ村 オヤジ日記ブログへ
応援→にほんブログ村
----------------------------------------------

コメントを残す

サブコンテンツ

このページの先頭へ