自サイト用アイコン「favicon.ico」

アイキャッチ「虎のイラスト」

favicon.icoを置こう

アドレスバーやタブに表示されるアイコンをそのサイト用にカスタマイズ

ちょっとしたワンポイントに・・・
他のサイトと見分けがつくように・・・
favicon.ico」を置くとアドレスバーのブラウザマークがちょっと変わりますよ。
他にもブックマークして、お気に入りのリストを出すと変わっていて目立ちます。
ブックマークのフォルダをエクスポローラで開いてみると一目瞭然★
自分のサイトに是非導入しておきたいですね。

favicon.icoの導入方法

サンプル例は旧サイト(MAJの独学小屋/閉鎖済)に掲載していたものです。

用意するもの

画像を3種類(ファイル形式PNG,GIF,JPG(JPEG))用意しよう!

  1. 16px × 16px
    自サイト用アイコン「favicon.ico」16px
  2. 32px × 32px
    自サイト用アイコン「favicon.ico」32px
  3. 48px × 48px
    自サイト用アイコン「favicon.ico」48px

準備ができたらfaviconを作成

favicon(ファビコン)作成サイトにアクセスして、そこにあるツールでファイルをアップして作成。
作成された「favicon.ico」をダウンロードする。

ファビコン作成サイトのご紹介

htmlに下のタグを挿入してそのファイルとfavicon.icoをアップロード

	<link href="favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
	<link href="favicon.ico" rel="icon" type="image/vnd.microsoft.icon" />

※favicon.icoはURLアドレス、相対アドレスどちらでも指定可。

こんな風になりました

faviconと更新したファイルをUPすると・・・・
自サイト用アイコン「favicon.ico」即時に反映せず、数日かかる場合もあります。

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

関連記事

ピックアップ記事

  1. アイキャッチ「新聞」
  2. アイキャッチ「新聞を読む男性」

アーカイブ

ページ上部へ戻る