ファビコンとウェブクリップアイコンの作り方

Webサイトに表示するファビコンとウェブクリップアイコンの作成方法をまとめます。

はじめに

Webサイトに表示するファビコンとウェブクリップアイコンを作成し、表示します。

ファビコンとウェブクリップアイコンの代表的なサイズ

代表的なサイズは以下になります。

<ファビコン>
・16×16 もともとのファビコンのサイズ
・32×32 最近のブラウザで使用されているファビコンのサイズ

<ウェブクリップアイコン>※Androidでも表示できます。
・57×57 iPhone用のウェブクリップアイコンのサイズ(Retinaモデルより前)
・72×72 iPad用のウェブクリップアイコンのサイズ(Retinaモデルより前)
・114×114 iPhone用のウェブクリップアイコンのサイズ(Retinaモデル)
・144×144 iPad用のウェブクリップアイコンのサイズ(Retinaモデル)

作成するファビコンとウェブクリップアイコンのサイズ

究極の美しさを求めなければ、大は小を兼ねるので以下のサイズのファビコンとウェブクリップアイコンを作成します。

<ファビコン>
・32×32 最近のブラウザで使用されているファビコンのサイズ

<ウェブクリップアイコン>
・144×144 iPad用のウェブクリップアイコンのサイズ(Retinaモデル)

画像ファイルのico形式への変換

作成した画像(32×32)をPNG形式で作成し、ico形式で”favicon.ico”のファイル名で保存します。

ウェブクリップアイコンの作成

作成した画像(144×144)をPNG形式で作成し、”apple-touch-icon.png”のファイル名で保存します。

画像ファイルのアップロード

作成した画像ファイル(favicon.ico,apple-touch-icon.png)をイメージ用のフォルダ(images等)にアップロードします。

ファビコンとウェブクリップアイコンの指定

HTMLのheaderセクション内で、ファビコンとウェブクリップアイコンの指定を行います。

<ファビコン(例)>

<link rel="shortcut icon" href="http://expr.ictlab101.com/images/favicon.ico" />

<ウェブクリップアイコン(例)>

<link rel="apple-touch-icon" href="http://expr.ictlab101.com/images/apple-touch-icon.png" />

ファビコンとウェブクリップアイコンの表示確認

ファビコンとウェブクリップアイコンの表示確認を行います。表示されない場合は、ブラウザのキャッシュをクリアして再表示させてみます。

関連記事(目次)

  1. インターネットで情報発信!

おわりに

Webサイトで表示するファビコンとウェブクリップアイコンの作成方法についてまとめました。

ムームードメイン ロリポップ!レンタルサーバー

コメントを残す

メールアドレスが公開されることはありません。

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