ファビコンとスマホ&タブレット用のアイコンを指定する link タグ(自作サイトには必須)

About HTML

ウェブサイトを自作するならファビコンの設定は必須。更にモバイルにもアイコン表示ができるようにアップルタッチアイコンも設定しなければなりません。

ファビコンとアップルタッチアイコン

こういうやつ。

今回は、これを表示できるようにする link タグと、簡単にファビコンやアップルタッチアイコンが作成できるサービス、そのサイトがちゃんとファビコンが使われているかどうかチェックできるサービスをメモします。

ファビコンは <head> 部に <link> タグで指定します

必要なのはこのふたつ。

アップルタッチアイコンは「180 x 180」サイズの画像を使います。

ふたつとも「href=” ”」の中身を任意の画像に変更してください。

ファビコンやタッチアイコンを簡単に作成できるサービス

favicon generator

ファビコンやタッチアイコンを簡単に作成できるウェブサービス「favicon generator」。

使い方はいたってシンプル。

  1. favicon generator の使い方
    ①「画像ファイルの選択」を押して、PC 内にあるファビコンやタッチアイコンに変換したい画像を選びます(当たり前だけど正方形じゃないとダメだよ)。②「ファビコン一括生成」を押します。
  2. favicon generator の使い方
    「ファビコンダウンロード」を押して画像ファイルをダウンロードします。あとは、.ico ファビコンと 180 x 180 の png タッチアイコンを選別すれば OK 。

そのサイトがファビコンやタッチアイコンを設定できているか

Favicon Generator. For real.

そのウェブサイトがファビコンやタッチアイコンをちゃんと設定できているかチェックすることができるウェブサービス「Favicon Generator. For real.」。

こちらも使い方はいたってシンプル。

  1. Favicon Generator. For real.の使い方
    Check your favicon のフォームへチェックしたいサイトの URL を入れて「Check Favicon」ボタンを押す。
  2. Favicon Generator. For real.の使い方
    ちゃんと設定されていれば、媒体ごとでどんな風に見えているかを教えてくれます。

ファビコンとアップルタッチアイコンは、ウェブサイトには必須なので必ず設定しましょう。

コメントを残す

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