【完全フリー】割とオシャレなico・faviconをGimpで作成する方法

Webサイトを作るにあたって必要となってくるのが、Favicon(icoファイル)だ。いざ作ろうと思うとどうやって作ればいいのか分からない方がいるようだ。この記事では、完全フリー(無料)で割とオシャレでオリジナリティのあるFavicon(icoファイル)を簡単にGimpで作成する方法をご紹介する。

材料となる画像と色を用意する

まず、Faviconの素材となるものを用意する。用意するものは次の2つ。簡単に用意できるので問題ない。

  • 画像

画像を用意する

色だけでFaviconを作るのなら、このステップは飛ばしても問題ない。ここで用意する画像は、Faviconとして表示されるときにメインとなるものだ。自分で描いても良いし、Webから拾ってきても良い。Webから拾う場合は、著作権者の利用規約をよく読んでから利用する。私は下記サイトのものを利用させていただくことが多い。

LINK:icooon-mono

色を決める

Faviconの印象を決める色を何種類か選ぶ。適用させるサイトのイメージカラーに合うものをチョイスする。なかなか良い色が見つからないなら、いい感じの色を一覧として表示してくれるサイトが幾つかあるので、そこから選ぶと良いと思う。

LINK:Coolors.co

LINK:AdobecolorCC

材料をGimpなどで合成する

画像と色が決まったらそれをPNGファイルなどとして合成する。Photoshopなど専用の画像エディタを持っているならそれを使ったほうが良いと思う。しかし、そんな高価なものは持ってないという方(私を含める)は、Gimpでの合成をおすすめする。Gimpは少し扱いづらいが高性能な画像エディタだ。

Gimpを入手する

Gimpを持っていないのならGimpを入手しよう。以下サイトから入手できる。

LINK:GIMP – GNU Image Manipulation Program

Gimpで合成する

さっそくGimpを起動して合成作業に取り掛かろう。残念ながら、ここは個々のオリジナリティを発揮させるところなので、正解の方法はない。でも、ここでは私の合成方法をご紹介して、ちょっとした合成方法の一例として参考にしていただければと思う。

土台を作成する

用意した色を用いて土台を作成する。Faviconは本当に小さく表示されることがほとんどなので、遠目から見ても識別できるものにしなければならない。その点を考慮に入れつつ作成する。

画像のサイズは256×256Pixel以上でつくる。これは後の作業でfavicon generatorでFaviconを作る時の最低限のサイズとなるためだ。

さて、いよいよ着色していく。用意した色によっていろいろなデザインを考えることができるが、あまり凝ったものにしなくても良いと思う。先述したように、Faviconは本当に小さく表示されるので細かいところに拘り抜いてもあまり意味がない。

いろいろなデザインを考えてみた。これだけでFaviconとして利用できるものになっている。後に紹介している画像を流したり、影をつけなくてもこれで完成としても良いと思う。

画像を流す

次に作成した土台に画像を流す。配置のしかたによってオリジナリティが産まれるのかもしれない。

影をつける

Google謹製のFaviconを見ると、僅かながら色の境目に影がついているような気がする。同じように影をつけてみることもできる。ちょっとした違いだが印象が変わる。

参考:GIMP 画像に影(ドロップシャドウ)をつけてみよう

PNGに変換

透過色付きのものなので、PNGに変換する。変換できたら合成作業は完了だ。

参考:GIMPで保存した画像ファイル(.xcf)をJPGやPNG形式に変換する方法は? | 教えて君.net

Gimpで合成する方法の動画

上記のFaviconを作っているときの様子を動画にしてみた。Gimpの細かい操作方法はこちらを参考にしていただければ幸いだ。

合成したものをicoに変換する

合成した画像をicoに変換する必要がある。WebサイトでFaviconを設定する場合で、iphoneなどの端末にも適用させる場合、icoファイルだけではなく、その他ファイルも必要になる。そのため、Faviconジェネレーターで作成したほうが手っ取り早い。

favicon generator で必要なファイルを作成

下記サイトで合成した画像をアップロードしてFaviconファイルを生成する。ZIP形式で自動生成されたものをダウンロードできるはずだ。

LINK:favicon generator

うまく生成されなかったicoファイルを ICO converter で作成

上記favicon generatorでは、icoファイルの透過部分がうまく処理できていないときがある。その場合は、icoファイルだけ作り直す。以下サイトでicoファイルだけ作り直そう。

LINK: icoconverter.com/

実際にicoを適用させる

最後にWebサイトに作成したFaviconを適用させる。

favicon generator で作成されたhtmlを参考にする

favicon generatorで作成されたhtmlファイル内にhtml内に記入する方法が記載されている。それをfaviconを設定したいWebサイトのhead内に記入する。(Faviconファイルの参照先を適宜編集する)そして、作成したFaviconファイルをアップロードすれば完了だ。

参考:「Favicon Maker」を使うと画像からファビコンを作って設置までが簡単すぎる

まとめ

icoファイルを作成する方法の紹介だった。Webサイトを幾つか作る人にとっては、ちょっとした悩みどころであったりするので参考になれば幸いだ。

共有する

このエントリーをはてなブックマークに追加

コメントをする

メールアドレスが公開されることはありません。
*のついている項目は必須です。


*

関連記事

関連記事はありません。