faviconの設定方法
目次
ファビコン画像の準備
ファビコンにしたい画像を500×500px以上のpngで用意してください。
※背景を透過しておかないと、白い背景のfaviconになってしまいます!
画像のアップロード
https://realfavicongenerator.net/にアクセスし、「Select your Favicon picture」の青いボタンをクリックし、①で用意した画像をアップロードしてください。
各種設定
①Favicon for iOS – Web Clip(mac製品のプレビュー画面)
2つ目の項目に変更
「Add a solid, plain background to fill the transparent regions.」
※それ以外の項目は基本触らなくて大丈夫です。
背景色を変えたい場合のみカラーコードを編集してください。
②Favicon for Android Chrome(Android製品のプレビュー画面)
下から2つ目の欄に「App name」という項目があるので、クリニック名・社名などホームページの名前を記入する。
※背景色を変えたい場合はその下のカラーコードの欄を編集してください。
③Windows Metro(Win製品のプレビュー画面)
特に編集する必要はありませんが、背景色を変えたい場合のみカラーコードの欄を編集してください。
横の色名をクリックして、Win製品に合わせた配色にすることもできます。
④macOS Safari(mac製品内のアイコン)
特に編集する必要はありませんが、色を変更したい場合のみカラーコードの欄を編集してください。
⑤「Generate your Favicons and HTML code」
ボタンをクリックしてページが切り替わるのを待ってください。
ページが切り替わっても、データ生成のために少し時間がかかります。一息ついてお待ちくださいね。
生成したデータの取得と設置
①ファビコンファイルのダウンロード
「1.Download your package「Favicon package」をクリックして、faviconのデータを一式ダウンロードして解凍してください。
②画像ファイルを入れ込む
オリジナル、システムオリジナル(HERO CMS)ともに、「favicon」というディレクトリがありますので、その中に解凍したデータを全て格納してアップしてください。
(HTMLコードはテンプレートに埋め込んでありますので、HTMLを変更する必要はありません)
設置し終わったら、すぐに反映されますので、該当ページのタブを見て反映されているか確認してください。
以上です。