ブックマークや、インターネット起動時のタブに表示されるアイコン、その名も「ファビコン」。
これこれ～👇✨
スマホのブックマークやタスク画面にも表示されます😊
ファビコンをかわいいものにしたいな～とずっと思っていたのですが、最近時間ができたので作成してみました💕
画像さえ用意できれば、あとは10分ほどの作業でできるので超カンタンです😉
いずれやり方を忘れてしまいそうなので、こちらに備忘録がてら残しておきます～。
大まかな流れ
まず大まかな流れとしては、画像を作成 → .icoファイルで保存 → アップロードや設定となります。
この中でいちばん時間がかかるのは画像を作成する段階でしたが、その後は10分ほどでできました👍
「画像ってどうやって作成するの？」、「面倒なのでファビコン画像作りたくないな～」という方には、画像を生成できるジェネレーターなどもあるみたいです😉さやかは画像を自作していますので、記事は画像を作るところから書いています。
画像を用意しよう
ファビコンの画像を用意するにあたり、画像はサイズ違いのものを用意しておく方が望ましいです。
今回さやかが用意した画像は、大きさの違う3種類の画像です。
- 16×16
- 32×32
- 128×128
この3種類の大きさです。
閲覧する環境に応じてファビコンの最適な大きさは異なります。1つのサイズの画像だと、文字がつぶれたり画像が荒れて見づらくなることもあるみたいですので、大きさの異なる画像を複数用意するのが望ましいようです。
どこにどの大きさの画像が反映するのか、というのはさやかはよく分かっていませんw
ですがさやかが設定した画像のうち、16×16の大きさの画像はパソコンのファビコン、128×128の大きさの画像は48×48に縮小され、スマホのブックマークやタスク画面に適用されています。
※ここで128×128で用意した画像は、さやかの場合は次のステップで48×48に自動で縮小されていると思います。
サイズ違いの画像を用意するのは面倒ですが、かわいいファビコンのために、サイズ違いのファビコン画像の作成を頑張りましょう😆✨
icoファイルにしよう
画像ができたら、icoのファイルを作成します。icoファイルを作成するにはそういったソフトもあるようですが、さやかは面倒だったので、Webでicoファイルを作成できるジェネレーターを利用しています。
こちらのサイトでは16×16、32×32、48×48の画像をicoファイルに変換してくれます。
使い方はカンタンで、出来上がった画像をアップロードし、「favicon.ico」のボタンをクリックするだけでカンタンにicoファイルを作成してくれます。
このジェネレーターでは下の方に使い方やアイコンなどについて詳しく解説がされています。
その中に、「指定する画像サイズが作成する画像サイズと違う場合は、サイズが自動的に拡大縮小されます。」との記述がありますので、さやかが作成した128×128の大きさの画像は、48×48に自動で調整されていると思います。（細かい作業が嫌になってきて、48×48は挫折して128×128にしましたw）
画像のサイズが変わるのがいやだわぁ～という方は、任意の画像サイズを指定可能なバージョンをどうぞ。
こちらのバージョンは任意の画像サイズでicoファイルが作成できるほか、先ほど用意できた画像は3種類でしたが、もう少し多めの画像もアップロードできます。
もちろん他のジェネレーターやソフトなどでicoファイルを作成できるものもありますので、お好みのツールをご利用ください。
ブログにアップロードして設定しよう
icoファイルができたら、あとはこれを各サイトで設定するのみです。
さやかはワードプレスとライブドアブログを利用していますので、そちらの方法を記載します。
ワードプレス
まずicoファイルをアップロードし、icoファイルのURLを控えておきます。
そのあと、外観→テーマの編集より、ヘッダーを編集します。ヘッダーの</head>の直前に下記のコードを挿入します。
<link rel=”shortcut icon” href=”●icoファイルのURL●”>
このアップロードと書き出しだけでファビコンが設定されます。
ライブドアブログ
ライブドアブログでは、公式のヘルプにも設定方法が記載されています。
favicon画像を設定｜ライブドアブログのヘルプ(PC向け)
指定の場所に画像をアップロードするだけで良く、icoファイルにする必要がありません。むしろicoファイルは基本設定からは設定できなさそうな感じでした。
手順はカンタンで、管理メニューにログインしてブログ設定→基本設定にアクセスします。
基本設定の中に「favicon設定」というメニューがありますので、こちらの「変更する」から画像を選択します。
画像を設定したら、最後に一番下にある「設定する」ボタンを押せば完了です。
ライブドアブログのこの設定方法は、画像1種類しかアップロードできないと思いますので利用環境によってはファビコンがきれいに表示されない可能性があります。
ライブドアブログでicoファイルを利用したい場合は、</head>の直前に書くなど、タグをさわる必要がありそうです。
また、ライブドアブログはパソコンのカスタムがしやすいですが、スマホ版のカスタムは制限されています。この設定方法でも、スマホ版ではファビコンは反映しませんでした。もしかするとスマホ版でもできるのかもしれないけど・・・わかる人がいたら教えてください😆
ライブドアブログでのファビコンの設定は、制限がいろいろありますが、一応画像のアップロードだけでカンタンにできます👍
アイコン画像を作るにあたって利用させていただいたサイト様
アイコン画像を作成するにあたり、アイコンのフリー素材を配布してくださっているサイト様を利用させていただきました❤
アイコン素材ダウンロードサイト「icooon-mono」 | 商用利用可能なアイコン素材が無料(フリー)ダウンロードできるサイト
とっても使いやすい素材が取り揃えられています✨
ほかにも使いやすい素材があって、いくつでも作りたくなっちゃいます💕こちらも参考にどうぞ～😍
