faviconの作り方

faviconとは?

タブブラウザで見てる時、サイト名の前にくるアイコンです。

拡張子は「.ico」
最近はマルチアイコンと言って、1つのicoファイルに、複数のサイズの画像データを含んでいたりもします。
大体は16×16pixel、32×32pixelの2つのサイズが設定されていることが多いです。

他にも以下のサイズがあります。

16px × 16px IEのタブ
24px × 24px IE9の「ピン留め機能」
32px × 32px Chrome、Firefox、Safariなどのタブ
48px × 48px Windowsのサイトアイコン
64px × 64px 高解像度のWindowsサイトアイコン

このwebサイトは●●のことなんだね!とわかるものが良いですね。

  1. 作り方

    WindowsやMaxで使える画像編集ツールやフリーソフトのアイコン作成ツール、またデザインソフトがある場合はphotoshopやillustratorを使用して16×16pixel、32×32pixelの画像を用意します。

    背景を透明にしておくとちょっとかっこいいです。

  2. アイコン化しよう

    それぞれの画像をpng形式で書き出ししたあと、

    https://ao-system.net/alphaicon/
    上のサイトを利用して、アイコン化します。

    ふたつアップロードして、「アイコン作成」を押すと

    この画面になるので、背景色いろいろ変えて試してみたあと、
    「アイコンダウンロード」を押すとicoファイルがダウンロードされます。