Faviconをパパっと作る方法

2016年3月9日

とっつぁん

デザイン・DTP

この記事は 2 分くらいで読めると思います

あとで読む

Faviconって？

Faviconをササっと作る方法

ブラウザのタブの部分にオリジナルの画像を使っているサイトがありますよね？

というかWordpressが増えてきて、ほとんどのホームページには設定されてると思います。

昔ほどではないと思いますが、

Faviconを知らない人は「ここのアイコン設定出来るって何かこのサイトちゃんとお金かけてそう…」っていう印象があるので設定しちゃいましょう（笑）

WordPressだとサイト基本情報の設定で画像をアップするだけなんですよね。

でも手書きでホームページを作成していると意外とめんどくさい…

そんなFaviconの作り方の備忘録。

ちなみにファビコンと読む人とファブアイコンと読む人がいますが、ワタクシは何となく後者です。

まずは正方形の画像を作る

Faviconは正方形の画像ですので、

とりあえずは正方形の画像を作って保存します。

サイズは260px×260px以上で制作します。

Real Favicon Generator

Faviconの面倒なところは画像1個つくればオッケーという訳ではないところ、

色々なブラウザやデバイスに対応させるにはそれなりに面倒…

そこで利用するのがReal Favicon Generator。

Real Favicon Generatorは各ブラウザ・デバイスに対応するFaviconを一括で作成してくれます。

Real Favicon Generatorの利用方法

基本的には画像UPしてダウンロードしてコードをコピペするだけ。

Favicon for Android ChromeのApp nameが必須なくらい。（サイトの名前でOK）

あとは英語なのが面倒ですかね…（笑）

使い方

画像のアップロード

上記の青いボタンで画像をアップロードします。

パスの指定

ワタクシはサイトのルートに大量のFaviconを置くのはあまり好きではないので、Faviconsというディレクトリに保存してます。

なのでパスの指定を/favicons/と入力。

ダウンロードとコードの取得

あとは画像の入ったZipファイルをダウンロードして、コードをコピー、

アップロードをすれば終了です。