webサイトの目印になる。ファビコンの作り方を解説！

2021年01月26日

今回は、あるとオシャレなファビコンについて解説していきたいと思います。

ファビコンとは

favicon（ファビコン）は、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。favorite icon（フェイバリット・アイコン：お気に入りアイコン）という英語の語句を縮約したかばん語である。
Wikipedia

ホームページのURLの横にある、固有のアイコンのことですね。

つけてもつけなくても良いのですが、あると可愛いし、「細かいところにまで気を使っているアピール（誰に？）」になります。
ホームページを作った際は、必ずファビコンを設定しましょう。

ファビコンのサイズが 48 ピクセルの倍数になっていること。

（例: 48 x 48 ピクセル、96 x 96 ピクセル、144 x 144 ピクセルなど）。
様々なサイズがあります。

ファビコンに設定したい画像を正方形に切り取る。
色などを調整して、pngやgifで保存。

今回はpngで制作

※ドット状に作るときれいに見えます。

拡張子を「.ico」に変更します。下記のサイトで変更が可能です。

設定タグはこちらになります。
htmlの<head>〜</head>の間にこのタグを書いてください。

<link rel="icon" type="image/x-icon" href="image/icon.png">

 <link rel="icon" type="image/x-icon" href="<?php echo get_template_directory_uri(); ?>/images/icon.png">

いかがでしたか？
簡単に設置できると思います。
ファビコンを使って、より個性的なホームページに仕上げましょう。

そんな方は下記の記事をご覧ください。

実際の企業サイトを設定した、ホームページの作り方を紹介しています。

【ポートフォリオに載せよう！】企業サイトの作り方

wordpressの自作テーマを作る

当ブログではwordpressのオリジナルテーマの作成方法も公開しています。