概要
ASP .NET CoreでWebアプリを開発している中で、
favicon作成にサービスを利用したので、その備忘録。
使用したサービス
そのまんまのサービス名ですが
Favicon Generator for ASP.NET Core
というサービスを利用しました。
前提
・faviconにしたい元画像データがあること
・wwwroot直下にfaviconを配置する
使い方
-
サイトを開いたら、「Select your Faicon Image」をクリック
-
ファイル選択ダイアログが表示されるので、元画像データファイルを選ぶ
-
元画像のサイズが小さいと、以下のようなダイアログが表示されますが、「Continue with this picture」をクリック
-
以下のような画面が表示されます。画像にマージンを付けたり、そのマージンを角丸にしたり、色を付けたりできます。任意の設定をしてください。
-
画面を下までスクロールして、「Generate your Favicons and HTML code」をクリック
-
以下のような画面が表示されます。「Favicon package」をクリックして、Zipファイルをダウンロードします。
-
ダウンロードしたZipファイルを展開し、中身をASP .NET CoreのWebアプリプロジェクト内wwwrootフォルダ直下に置きます。
-
_Layout.cshtmlを開き、headタグ内に以下のコードを追加します。
_Layout.cshtml
<link rel="shortcut icon" type="image/x-icon" href="~/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
※ここでは、faviconとiPhone／iPadのホーム画面用アイコン（apple-touch-icon.png）のみ設定しています。
9. デプロイして、faviconが表示されることを確認してください。