[Oracle Cloud] Oracle Content Management で作成・公開されたWebサイトのfaviconを変更する

# はじめに

Oracle Content Management(以降OCM) で作成・公開されたWebサイトのfaviconは、デフォルトで弊社ロゴの赤い「<font color="#ff0000">O</font>」のアイコンです。ここでは、このfavionを変更する方法を紹介します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/2c897f5f-6c2e-e30a-c362-f85db7e7cfdb.png)


# 作業手順

## faviconを作成する

素材となる画像を準備します。今回は以下のOCMアイコン画像を利用します

![ContentManagement.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/406ebb96-e333-e4bc-03cb-be445bba6ff1.png)

素材画像からfaviconを作成します。私は以下のfavion自動作成サイトを利用しました

https://favicon.io/favicon-converter/


## faviconをOCMで作成したサイトに登録する

faviconをOCMで作成したサイトに登録します。なお、サイトの作成方法は以下のチュートリアルを参考に作成しました

https://qiita.com/nakasato310/items/9457a61d9d27db6ce4f0

::: note info
OCM-Starter Editionは **Oracle Cloud Always Free**（無償かつ期間の制限無し）で利用できる**機能限定版**です。機会があれば是非お試しください
:::


- サイト編集画面を編集モードで開き、左サイドメニューの**設定**→**サイト**をクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/88e04dcf-8b2c-3d08-96c4-8311f053644d.png)

- **「お気に入りアイコン」** に作成したfaviconを追加します。**アップロードするファイルの選択**をクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/597664e3-83c2-31f2-c02d-3af50ee44f65.png)

- **アップロード**をクリックし、作成したfavicon.icoをアップロードします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/1e2c06ab-8751-0212-7842-c187636bf1e5.png)

- アップロードされたfavicon.icoを選択し、**OK**をクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/a894880c-440e-3538-0fe0-3784adc81474.png)

- 「お気に入りアイコン」にfavicon.icoが追加されます


## コントローラ・ファイルを編集する

続けて、コントローラ・ファイル(controll.html)を編集します。コントローラ・ファイルとは、ページの残りの部分のレンダリング順序を動的に開始する小さなHTMLページです。詳細は以下ドキュメントをご確認ください

https://docs.oracle.com/en/cloud/paas/content-cloud/creating-experiences/controller-file.html#GUID-0E723517-E19D-4735-A134-97DBD356B32E
 
- 「コントローラ・ファイル」の**デフォルト・コントローラ・ファイルのダウンロード**をクリックします。controller.htmlがダウンロードされます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/caddc86d-30d0-cc20-d1ef-bd65caf40122.png)

- ダウンロードしたコントローラ・ファイルをエディタで開きます。以下2行を```<head>〜</head>```の間に追加します。```<サイト名>```には、OCMで作成したサイト名を指定します
```html:controller.html
<link rel="icon" href="[!--$SCS_SITE_PATH--]/favicon.ico" />
<link rel="icon" href="/site/<サイト名>/favicon.ico" />
```

- 以下は編集例です。ここでの```<サイト名>```は **firstSite** です
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/e7014caa-c1fb-b712-60dd-a215b933e645.png)


- controller.htmlを保存します

- コントローラ・ファイルの **「アップロードするファイルの選択」** をクリックし、前の手順で編集したcontroller.htmlをアップロードし、設定します。アップロードおよび設定の手順は、favicon.icoと同じです
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/6ae9f817-c864-1ee8-0cd6-4cd78ce665e4.png)

- controller.htmlが登録されたことを確認し、**保存**→**コミット**をクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/ed560205-dc9b-e60f-8771-eb6852cbfb63.png)

- サイト編集画面を閉じます

## サイトの公開（再公開）

サイトを公開します。既にオンライン状態（サイト訪問者がサイトを閲覧できる状態）であれば、**再公開**を実行します。ここでは、再公開を実施します

- サイトを選択し、**再公開**をクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/55212086-6cbd-0f86-8cee-109c2d480f67.png)

- 公開対象を選択し、**OK**をクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/f815880e-e129-6493-1184-0441fcb77c3d.png)

- 検証チェックに問題がないことを確認し、**公開**をクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/6e35d8e9-db86-34b7-8fa3-86a61e8e8928.png)

- サイトが再公開されます

# 確認

- 公開サイトにアクセスします。faviconが変更されていることを確認します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/3216b1ea-6349-128b-c7a7-923abcd4a681.png)

- 公開サイトをブックマークすると、変更後のfaviconでブックマーク登録されます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120110/27eeb428-2e77-d2cb-97e0-789a8405d46b.png)



# まとめ

この記事は、OCMで作成・公開されたWebサイトのfaviconは変更する方法を紹介しました。faviconの変更方法は、以下の製品ドキュメントにも記載されていますので、併せてご確認ください

- [Edit Site Settings](https://docs.oracle.com/en/cloud/paas/content-cloud/creating-experiences/edit-site-settings.html)

# （参考）OCMの製品ドキュメント

- [Oracle Content Management 製品ドキュメント(英語)](https://docs.oracle.com/en/cloud/paas/content-cloud/books.html)
- [Oracle Content Management 製品ドキュメント（日本語翻訳版）](https://docs.oracle.com/cd/E83857_01/paas/content-cloud/books.html)
  ```製品ドキュメントの英語原本と日本語翻訳版です。翻訳されるまでに時差がありますので、最新情報の確認は 英語版のドキュメントをご利用ください```