ImageMagickでfaviconを作成する

2019-04-23 00:00:00
画像処理

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

ImageMagickでfaviconを作成する

MacでHomebrewをImageMagickを導入し、faviconを作成する方法について記載します。
ウェブサイトを作成するときに必須となる作業ですが、faviconの変換方法をよく忘れてしまうので、備忘録的に記載します。

目次

Homebrewを導入する

Homebrew は macOS 用パッケージマネージャーです。
macOS 用パッケージマネージャー — Homebrew

MacOSであれば下記コマンドで導入できます。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

ImageMagickをインストールする

先程導入したHomebrewを使ってimagemagickを導入します。

インストールコマンド

brew install imagemagick

インストールには結構時間がかかります。5分程度かかりますので気長に待ちます。

画像を favicon に変換する

favicon用のicoファイルを作成します。

favicon は .ico ファイルとなります。
今回はpngの画像をicoに変換します。

image.pngという元画像をfavicon.icoに変換するコマンドです。

icoファイルはマルチアイコンと言って1つのファイルに複数のサイズの画像を含めることができます。
下記コマンドで16,24,32,40,48,64,96,128,192,256のサイズを含んだマルチアイコンを作成できます。

image.png から favicon.ico を作るコマンドの例です。

magick convert image.png -define icon:auto-resize favicon.ico

しかし、上記コマンドでは、マルチアイコンとして含める画像が多くなり、容量が大きくなりすぎてしまうので私はいくつかのサイズに限定しています。
私の場合は16,32,48,64のサイズでfaviconは作ることにしています。

下記コマンドでマルチアイコンに含める画像サイズを指定して生成できます。

magick convert image.png -define icon:auto-resize=16,32,48,64 favicon.ico

追記

2019-04-26 追記

最近 favicon を作る作業が多く、毎回コマンドを打つのは大変なので favicon の生成・変換ツールを作りました。
ファイルをアップロードしてサイズを選択するだけで自動生成してくれるため便利です。
favicon 変換デモ

Favicon ジェネレーター

同じカテゴリの記事