お気に入りアイコン（ファビコン）を設定できますか

2018-09-07 12:10

下記手順にてお気に入りアイコンを設定できます。
各デバイス対応版と、パソコンのみ対応版、それぞれをご案内致します。

各デバイス対応版
STEP1. ファビコンを生成する

favicon generator にて、画像を指定します。

サイト左上の「画像ファイルを選択」をクリックして画像を選択し、その下の「ファビコン一括生成」をクリックしてください。
※1辺の長さが700ピクセル以下の画像を指定してください。
画像が一覧表示されますので、確認のうえ「ファビコンダウンロード」をクリックし、「favicons.zip」のzipファイルを保存してください。
zipファイルを展開（解凍）すると、画像が一覧で表示されます。

下記の3つのファイルのみ使用します。
「favicon.ico」「apple-touch-icon-180x180.png」「android-chrome-192x192.png」

STEP2. ファビコンを画像専用管理画面にアップロードする

生成したファビコンをおちゃのこ管理画面の画像専用管理画面にアップロードします。

【デザイン管理】→【画像専用管理画面】→「画像専用管理画面はこちら」ボタンをクリックして画像専用管理画面を開き、「コンテンツフォルダ」→「画像をアップロード」より、生成した画像をアップロードしてください。

STEP3. ヘッダーにタグを貼る

下記のタグを【マーケティング】→【SEO(メタタグ)全体設定】→「ヘッダー」にコピーし貼り付けてください。
アカウントID部分は、ご自身のアカウントIDに変更してください。

<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="https://アカウントID.ocnk.net/data/アカウントID/image/favicon.ico">
<link rel="apple-touch-icon" href="https://アカウントID.ocnk.net/data/アカウントID/image/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="https://アカウントID.ocnk.net/data/アカウントID/image/android-chrome-192x192.png">

パソコンのみ対応版

下記2つの方法があります。前者のツールは日本語、後者のツールは英語です。

日本語ツールを使用する場合
STEP1. アイコン画像を作成する

下記のサイトでアイコン用画像を設定してください。
https://www.websiteplanet.com/ja/webtools/favicon-generator/

1.画像を選択するかドロップして、画像を設定してください。
2. 設定が完了すると次ページに進みますので、「ダウンロード」をクリックして画像をダウンロードし、パソコンに保存してください。
3. ページ上に表示されている「コードをコピー」をクリックしてコードをコピーし、「マーケティング」→「SEO(メタタグ)全体設定」→【ヘッダー】に貼り付けてください。

STEP2. アイコン画像を画像専用管理画面からアップロードする

管理画面の画像専用管理画面→コンテンツフォルダに先ほど作成したfavicon.png画像を
アップロードしてください。

STEP3. タグをアップロードした画像URLに書き換える

画像専用管理画面にアップロードした画像の下の「URL」をクリックして表示される画像URLをコピーし、ヘッダーに貼り付けたタグ内を下記のように書き換えてください。

〈link rel="icon" type="image/png" href="/favicon-16x16.png"〉
↓
〈link rel="icon" type="image/png" href="画像URL"〉
※必ずhttps://共用ドメインURLで画像URLを記載してください。

英語ツールを使用する場合
STEP1. ヘッダー内にタグを貼る

下記のタグを「マーケティング」→「SEO(メタタグ)全体設定」→【ヘッダー】にコピーし
貼り付けてください。
アカウントID部分は、ご利用のアカウントIDに変更してください。
<link rel="shortcut icon" type="image/x-icon" href="https://アカウントID.ocnk.net/data/アカウントID/image/favicon.ico">
※必ずhttps://共用ドメインURLで画像URLを記載してください。

STEP2. アイコン画像を作成する

下記のサイトでアイコン用画像を作成してください。
http://tools.dynamicdrive.com/favicon/
1.「参照」をクリックして画像を選択してください。
2.選択後、「Create Icon」ボタンをクリックしてください。
3.プレビューイメージの下に、「Download Icon」ボタンが表示されますので、
　クリックしてパソコンに保存してください。

favicon.icoという画像になります。
※ファイル名は必ずこのファイル名にしてください。

STEP3. アイコン画像を画像専用管理画面からアップロードする

管理画面の画像専用管理画面→コンテンツフォルダに先ほど作成したfavicon.ico画像をアップロードしてください。