hogehoge〜〜

プログラミングの勉強記録です

faviconの設置と作成に関するメモ

HTML -meta- WEB制作

フェイバリットボタンのイラスト

★PC

IE8以下も含めたIE、Chrome、Firefox、Safari、Opera、Edgeの記述方法

  • 拡張子は.icoのみ使用可能
  • rel属性にshortcutが必要
<link rel="shortcut icon" href="/path/favicon.ico">

IE9以上のIE、Chrome、Firefox、Safari、Opera、Edgeの記述方法

  • 拡張子は.icoのみ使用可能
  • rel属性にshortcutは不要
  • type属性に以下どちらかの記述が必要
<link rel="icon" type="image/x-icon" href="/path/favicon.ico">
<!--もしくは-->
<link rel="icon" type="image/vnd.microsoft.icon" href="/path/favicon.ico">

IE11以上のIE、Chrome、Firefox、Safari、Opera、Edgeの記述方法

  • 拡張子は.icoの他にpngやgifも使用可能
  • rel属性にshortcutは不要
  • pngやgifを使用する場合はtype属性にimage/pngのような記述が必要

icoを使用する場合

<link rel="icon" href="/path/favicon.ico">

pngやgifを使用する場合

<!--png-->
<link rel="icon" type="image/png" href="/path/favicon.png">
<!--gif-->
<link rel="icon" type="image/gif" href="/path/favicon.gif">

サイズごとに指定する場合

<link rel="icon" type="image/png" href="/path/favicon-16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/path/favicon-32.png" sizes="32x32">

★SP(iOS)

apple-touch-icon

・以下のタグ（57～180pxの各サイズ）
<link rel="apple-touch-icon" href="apple-touch-icon57.png" sizes="57x57">
<link rel="apple-touch-icon" href="apple-touch-icon60.png" sizes="60x60">
<link rel="apple-touch-icon" href="apple-touch-icon72.png" sizes="72x72">
<link rel="apple-touch-icon" href="apple-touch-icon76.png" sizes="76x76">
<link rel="apple-touch-icon" href="apple-touch-icon114.png" sizes="114x114">
<link rel="apple-touch-icon" href="apple-touch-icon120.png" sizes="120x120">
<link rel="apple-touch-icon" href="apple-touch-icon144.png" sizes="144x144">
<link rel="apple-touch-icon" href="apple-touch-icon152.png" sizes="152x152">
<link rel="apple-touch-icon" href="apple-touch-icon180.png" sizes="180x180">

・ルート直下にファイル名apple-touch-icon.pngとして直置き（180px）

windows8,10(ピン留め)

Windows8やWindows10のスタート画面にWebサイトをピン留めした時の表示を細かく指定したい場合には、Windows用アイコンの設定を行う。

<meta name="application-name" content="{サイト名}"/>
<meta name="msapplication-square70x70logo" content="small.jpg">
<meta name="msapplication-square150x150logo" content="medium.jpg">
<meta name="msapplication-wide310x150logo" content="wide.jpg">
<meta name="msapplication-square310x310logo" content="large.jpg">
<meta name="msapplication-TileColor" content="#FAA500">

タブの色を変える(android,chrome,Googleアプリ)

<meta name="theme-color" content="#378586">

推奨される指定方法とされているもの（2017年時点）

参考サイト

  • favicon.pngはfavicon.icoに含まれる。
  • タグで複数サイズ指定は不要。
  • 64pxのfavicon.ico、180pxのapple-touch-icon.png、192pxのfavicon.pngは対応している表示位置でいずれも表示可。
  • タグで指定すればルート直置きは不要。
  • favicon.icoとapple-touch-icon.pngが重複した場合ブラウザによって優先度が異なる。

以上から、推奨される指定方法は下記の通りとなる。

  • 64×64pxのfavicon.icoと180×180pxのapple-touch-icon.pngを用意する。（favicon.icoはスマホにも表示され得るので16・32pxより64pxを推奨、apple-touch-iconは120・152pxなどでも構わない）
  • 以下のタグをheadタグ内に設置。 　- 直置きは不要なので、ファイル名を変えたり、フォルダ内に設置しても構わない。その際はhrefを変更する。
<link rel="icon" href="./favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="./apple-touch-icon.png" sizes="180x180">

2020年11月時点で一番よさそうな設定

★faviconデータの作り方と設置

<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" href="/android-chrome-256x256.png">