Favicon:超簡単!画像アップするだけでファビコン コードも生成してくれるサイト

ファビコンのサンプル SNS & web services

ファビコンについて改めて説明は不要でしょう。

ブラウザのタブについているオリジナルの目印や、スマートフォンのショートカットとして表示されるアレです。

ファビコンのサンプル

スポンサーリンク

ファビコン ジェネレーターを使おう

必要な画像サイズ バリエーションだけでなく、htmlに入れるコードも生成してくれる至れり尽くせりのサイトFavicon Generator for all platforms: iOS, Android, PC/Mac…」を使って超簡単にファビコンを設定してしまいましょう。

英語サイトなので、使い方を日本語で説明しますね。

ファビコン ジェネレーターにアクセスする

Favicon Generator for perfect icons on all browsers
The ultimate favicon generator. Design your icons platform per platform and make them look great everywhere. Including in Google results pages.

ファビコンジェネレーターにアクセスする

右側に表示される[Select your Favicon picture] ボタンを押しましょう。
ボタンを押すと、パソコンで元画像を選択するウィンドウが表示されます。

Fabicon を生成するための最小画像サイズは70x70pxですが、元画像のサイズが260x260pxより小さいといくつかのオプション画像が生成されません。

画像をアップロードする

ファビコンジェネレーターに画像をアップする

先の手順でアップロードした元画像が260x260pxより小さい場合、上図の確認ウィンドウが表示されます。

Windows 8やIE 11は高解像度のタイルを使用することを推奨していますが、元画像が小さいとこれらのオプションは生成されませんという内容です。

画像を選択しなおす場合は、[Cansel and submit another picture]を押します。
かまわずそのまま進むなら、[Continue with this picture]を選択しましょう。

なお、長方形の元画像をアップロードした場合、余白部分を透明にしてファビコンを生成しますよ、という確認ウィンドウが表示されます。

ファビコン画像を最終調整しよう

ファビコン画像の最終調整

iOS用ウェブクリップ、アンドロイド Chrome用ファビコン、Windows Metro用タイル、macOS・サファリ用のファビコンが、サンプル画像とともに表示されます。

それぞれのプラットフォームごとに、ファビコンの見え方を調整できます。
例えば…こんなこと。

Settings

[(Main)settings]: 表示通りそのまま使うなら「No change, keep the master picture as is/」を選択しましょう。

[Add margins and plain background]: マージンサイズや背景色を設定できます。

[Apply a slight drop shadow, …」: Googleの公式アプリのように若干のドロップシャドウを付けることができます。

Windows Metro UIで使われている背景色を付けたり、macOS Safariのモノクローム アイコンを調整したりもできます。

Assets

対象とするプラットフォームのバージョンの詳細を設定できます。

選択肢の詳細は割愛します。詳細を知りたい方は、コメントください。

Dedicated picture

iOSウェブクリップ専用、Android Chrome専用…といった具合に、プラットフォーム専用の画像を選択してファビコンを生成できます。Dedicated pictureタブを開くと表示される青いボタンをクリックしパソコンから画像を選択しなおします。

ファビコン生成のオプションを設定しよう

ファビコン画像最終調整ページの最下部に、「Fabicon Generator Options」があります。

この欄の設定通りに html コードが生成されます。

普通のサイトに普通にファビコンを入れるだけなら、[Path]タブでファビコン画像の保存場所を設定するだけでOKです。

上のラジオボタンは、「ドメイン直下のルートディレクトリにファビコン画像を保存する」という意味です。

ファビコン画像をルート以外のディレクトリに保存する場合は、下のラジオボタンをチェックして、入力フィールドにファビコン画像の保存場所ディレクトリを入力します。

[Generate your Favicons and HTML code] ボタンを押します。

ファビコンファイルのダウンロードとhtmlコードを取得しよう

ファビコンファイルダウンロードとhtmlコード取得

[Favicon package]ボタンを押すと、ファビコンファイルをダウンロードできます。

ダウンロードしたzipファイルを解凍して、指定したディレクトリにすべてのファイルを保存しましょう。

次に、上図 3.に表示される htmlコードをコピーして、ファビコンを設置するhtmlファイルの<head></head>内にペーストします。

ファビコンファイルとhtmlをサーバにアップロードするのを忘れないでね♪

サーバへアップロードした後ファビコンが正しく表示されるかを確認するには、上図画面 4. の [Check your favicon]ボタンを押しましょう。次に表示される画面で、URLを入力することでファビコンが正しく表示されているか否かを確認できます。

文章で説明すると長いですね。でも、作業時間は3分くらいかな。

以上