ホームページのアイコンの事をファビコンといいます。
ファビコンは3種類あります。
| favion.ico | 拡張子が「ico」で古くから利用されている形式 |
| apple-touch-icon.png | iPhoneやiPadなどのiOSで利用されているアイコン |
| favicon.png | favicon.icoのpng版（Android用） |
ホームーページアイコン用フリー画像から作ります。
このサイトから気に入ったアイコン画像をダウンロードします。
画像をホームーページアイコン用に変換してくれるオンラインツールを使用し、アイコンを作成します。
ファイルを選択し、「Create Favicon」をクリックすると
<head></head>に記載するHTMLソースが表示されます。
| <link rel=”apple-touch-icon” sizes=”57×57″ href=”/apple-icon-57×57.png”>
<link rel=”apple-touch-icon” sizes=”60×60″ href=”/apple-icon-60×60.png”> <link rel=”apple-touch-icon” sizes=”72×72″ href=”/apple-icon-72×72.png”> <link rel=”apple-touch-icon” sizes=”76×76″ href=”/apple-icon-76×76.png”> <link rel=”apple-touch-icon” sizes=”114×114″ href=”/apple-icon-114×114.png”> <link rel=”apple-touch-icon” sizes=”120×120″ href=”/apple-icon-120×120.png”> <link rel=”apple-touch-icon” sizes=”144×144″ href=”/apple-icon-144×144.png”> <link rel=”apple-touch-icon” sizes=”152×152″ href=”/apple-icon-152×152.png”> <link rel=”apple-touch-icon” sizes=”180×180″ href=”/apple-icon-180×180.png”> <link rel=”icon” type=”image/png” sizes=”192×192″ href=”/android-icon-192×192.png”> <link rel=”icon” type=”image/png” sizes=”32×32″ href=”/favicon-32×32.png”> <link rel=”icon” type=”image/png” sizes=”96×96″ href=”/favicon-96×96.png”> <link rel=”icon” type=”image/png” sizes=”16×16″ href=”/favicon-16×16.png”> <link rel=”manifest” href=”/manifest.json”> <meta name=”msapplication-TileColor” content=”#ffffff”> <meta name=”msapplication-TileImage” content=”/ms-icon-144×144.png”> <meta name=”theme-color” content=”#ffffff”> |
ファイルをアップロードし、headerに記載し完了です。
参考サイト
