-
2017.10.30 -
2021.01.22
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サイトは●●のことなんだね!とわかるものが良いですね。
-
- 作り方
-
WindowsやMaxで使える画像編集ツールやフリーソフトのアイコン作成ツール、またデザインソフトがある場合はphotoshopやillustratorを使用して16×16pixel、32×32pixelの画像を用意します。
背景を透明にしておくとちょっとかっこいいです。
-
- アイコン化しよう
-
それぞれの画像をpng形式で書き出ししたあと、
https://ao-system.net/alphaicon/
上のサイトを利用して、アイコン化します。ふたつアップロードして、「アイコン作成」を押すと
この画面になるので、背景色いろいろ変えて試してみたあと、
「アイコンダウンロード」を押すとicoファイルがダウンロードされます。