デザイン

【自分用】ファビコンの設置方法

 

もか

こんにちは、もかです。



HTMLが初心者の人はファビコンの設置方法がわからなくて

初心者の人(ひよ)

ファビコンの設置の仕方のサイトを色々と見たけど、良く分からないよー



となったことはありませんか?


私も実際そうでした。


なので今回は、難しいこと一切なし


この通りにしたらOK!ファビコンの設置方法を教えたいと思います。


この記事の通りにすれば、あなたも簡単にファビコンを設置することができます。


具体的には、

  • 初心者の人
  • 色々なサイトを見たけれど良く分からなかったり、うまく出来なかった人
  • 専門的なことより設置方法だけが知りたい人



におすすめな内容です。


逆に、

  • ファビコンの設置方法をしっかり専門的に学びたい、理解したい人
  • ファビコンとは何かわかっていない人



にはあまり向いていない内容となっています。


ファビコンとは何かがわからない人はそれを調べてからこのサイトを見ることをお勧めします。


それでは、さっそく本文に移っていきましょう!

アイコンにする画像を決めよう



まずはアイコンにする画像を決めましょう。


もうすでにアイコンにする画像が決まっているという方は飛ばしてください。


(*ファイルサイズが150KBを超えないようにと、PNP形式にの画像してください
 *)


アイコン画像は自分で作ることも可能ですが、フリーの画像を使うことも可能です。


今回は私がおすすめしている、FLAT ICON DESIGNというフリーアイコンのサイト使って説明していきます。


このサイトをおすすめする理由は、

  • 日本のサイトなので安心
  • 可愛いアイコンばかり
  • 種類が多い


からです。

引用: FLAT ICON DESIGN



まず、FLAT ICON DESIGNのサイトを開くとこのような画面が出てきます。

このサイトは日本のサイトなので、日本語で検索ができるところがうれしいですね。

ここで自分のサイトにあったアイコンを探してみてください。


いいアイコンが見つかったら、ダウンロードしていきます。

引用: FLAT ICON DESIGN



まず決まった画像をクリックすると、このような画面が出てくると思うので丸で囲っているところをクリックします。

引用: FLAT ICON DESIGN


するとこのような画面が出てきたと思うので、まずは上にあるサイズを64×64に指定してください。


次に、ファビコンには背景があってもいいのですが、このサイトでは背景があると肝心のアイコンが小さくなってしまうので、背景は無しを選択します。


それができたら、下にある「表示中の画像をダウンロード」をクリックします。


これでアイコンの画像をダウンロードすることができました!!

「Favicon Generator」を使ってファビコンを設定
しよう

引用:Favicon Generator


それでは次にファビコンを設定していきます。


今回はFavicon Generatorを使っていきます。


Favicon Generator を開いたら下の画像のような画面が出てくるので、まず「ファイルを選択」をクリックして先ほどダウンロードした画像を選択してください。

引用:Favicon Generator


ファイルが選択出来たら、上の画像で囲ってあるところにチェックマークを付けます。



それができたら、上の画像で囲っている「Create Icon」をクリックします。

引用:Favicon Generator


クリックすると、↑の画像のようにプレビューが表示されます。


もし、クリックしてもプレビューが出てこなかったりする場合は150KBを超えているか、画像の形式がOnly JPEG, PNG, GIF, BMP以外の可能性があります。


その場合は画像を圧縮したり、画像をPNP形式にするとうまくいくと思います。


プレビューを見て大丈夫だったら、「Download FavIcom」と書かれた青いボタンをクリックします。


すると、画像がダウンロードされるのでこれで完了です。

HTMLにコードを書きたそう


HTMLにコードを書き足す前に、さっきダウンロードされたファイルをHTMLのファイルが入ってるファイルに移動しておきましょう。


次に、HTMLの中の<head>の中に

<link href=”*” rel=”shortcut icon”>


を書き込みます。


「*」のなかには先ほどダウンロードしたファイル名を入れます。


これでファビコンが設定できたと思います。


確認してみましょう!!

まとめ


今回はファビコンの設定方法を解説しました。


いかがでしたでしょうか。


ファビコンは設定できましたか?


この記事が少しでも役に立ったら嬉しいです。

もか

最後まで御覧いただき、ありがとうございました!

もか
13歳、中学2年生ブロガー。 webプログラミングの事やブログについてなど、その他にもいろいろなことを初心者目線で発信!! 毎日いろいろなことにチャレンジ!
\ Follow me /