WEBサイトのアイコン(favicon)の作り方(まとめ)

ファビコン(favicon)の作り方

WEBサイトのアイコン(faviconファビコン)の作り方。

WEBサイト用アイコン(favicon)を作る

まずは400 × 400 ピクセルくらいで、アイコン用画像を作る。
最小で16 × 16 ピクセルで表示されるので、小さくなっても分かりやすいシンプルなの。

画像を作ったら、下記のページで一気にアイコンを生成する。

様々なファビコンを一括生成。favicon generator
https://ao-system.net/favicongenerator/

生成したファイルを解凍すると大量のアイコンが入ってるので、WEBサイト用アイコンにfavicon.icoを選択する。

iPhone用アイコン(apple-touch-icon)を作る

上記で生成したファイルから、apple-touch-icon-152×152.pngを選択する。
後で面倒なので、-152×152のサイズ部分は消してリネームしておく。

ページにアイコンを適用させる

ルートディレクトリに、上記で選んだ2ファイルを格納し、アイコンを表示させたい全ページに以下のコードを記述する。

<link rel="icon" href="/favicon.ico" type="image/vnd.microsoft.icon">
<link rel="shortcut icon" href="/favicon.ico" type="image/vnd.microsoft.icon">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon.png">

WordPressの場合

WordPressで作成している場合は、512 × 512 以上の画像を用意して、「外観」→「カスタマイズ」→「サイト基本情報」にある、サイトアイコンという設定項目にて画像を指定すればオッケー。

投稿者: Output48

中学生の時に初めてHTMLに触れてからホームページ制作を独学で始める。 ベンチャー企業の営業、大手企業のSEを経て、独立。 ここ数年はWEB以外の仕事をしていたため、割と本気で勉強中。

コメントを残す

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