ファビコンの作り方
こんにちは、スウェルデザインのWです。
新しいサイトを建設する時、皆様は綺麗なファビコンを作っていますでしょうか？
今までは.ico拡張子の作成に少しテマのかかる作業を要していたのですが、近年便利なサイトが現れたので、その紹介もふまえたいと思います。
ホームページを作成するにあたって、ファビコンのようなシンボルは重要なアイテムとなります。
また、様々な端末で使用されるアイテムなので
サイズや透過などをきちんと処理しなければ見た目に大きな差ができてしまいます。
ホームページのクォリティーを上げるためにもファビコンを美しく作ってみましょう
画像は有名サイトのファビコンです。
範囲いっぱいの四角いアイコンから、背景透過の美しいアイコンまで様々です。
1. ファビコンのサイズについて
最もポピュラーなサイズは16×16でしたが、マルチに対応するために
32×32も作っておくのが賢明かと思います。
その他にWindowsでサイトアイコンとして使用される場合や
スマホのウェブクリックアイコンとして使用される場合には、48×48が適切ですが
ブラウザで使われるアイコンの対応は16pxと32pxを用意すれば問題ありません。
まずはこのサイズのアイコンを用意しましょう。
2. 拡張子について
用意する画像は背景透過を考えると.pngか.gifとなるでしょう（.pngをお勧めます)
その時々で適切なサイズの画像を表示する為に、今回は.icoというファビコン用の拡張子にします。
この拡張子を最上層に入れることによって勝手に良い方のサイズのアイコンを出してくれます。
.ico拡張子を作成するには、今までPhotoshopなどにプラグインを入れていたのですが
なんと複数の画像をアップロードして.icoにしてくれる便利なサイトを見つけました。
ここで作成すると、背景透過のアイコンも美しく仕上げてくれるのでオススメです！
3. .icoの置き場所について、設置方法
用意した.icoファイルにfavicon.icoと名前を付け、HTMLファイルなどと一緒にアップロードしましょう
解りやすいので最上部が良いかと思います。
HTMLの<head>内に<link rel="SHORTCUT ICON" href="favicon.ico"> を入れましょう。
パスの指定先が合っていればどこにfavicon.icoを置いていても問題ありません。
以上が簡単なファビコンを設置するための手順でした。
透過画像のよういが難しい場合は、イメージカラーで塗りつぶした画像をペイントで作って見ても良いかもしれません。
バイカラーもオシャレです。
多くは無料のお絵かきソフトをインストールすれば1から作るのは難しくないかとおもいます。
フリーアイコンなども探してみてください。
以上です、ありがとうございました。
