[e]Macでfaviconを作成する方法

この記事をかいた人

本業は整体師。主に大好きなGoProを始めとしたアクションカメラや動画編集、子育てについての情報を発信しています!

今回はMacでfaviconを作成する方法をご紹介します。

意外に手間がかかりました…でも簡単な方法があったりと実に奥が深いと感じたfavicon作成です。

スポンサーリンク

faviconを作成しようとしている方、これから作成する予定の方にお役立て頂ければ嬉しいです。

faviconとは?

「ファビコン」と言って、Webサイトを開いた時などのタブに表示されるアイコン画像です。

色々なサイトのファビコン

ロゴマークなどを設置することで、視覚的に少し目立つ事ができます。

作成方法

私が試したのは以下の2つです。

  • photoshopでの作成
  • favicon作成サイトを使用

photoshopでの作成

Photoshopでの作成は、あるサイトからico形式で保存が出来るファイルをダウンロードしなければなりません。

ダウンロードはこちら↓
Photoshop で背景透過の美しい favicon (ファビコン) を作成する

ですが私の環境ではPhotoshopのフォルダ内に、そのファイルを格納する[File Format]のフォルダが存在しないため反映されず、ico形式での保存が出来ませんでした。

ちなみに私はCreative Cloudで契約をしています。
同じように契約をされている方は出来ないのかもしれません。

favicon作成サイトを使用

せっかくPhotoshopで作成したアイコン画像。

どうにか使えないかと探していると、アイコン画像への変換をしてくれるサイトを発見。

今回はこちらを利用しました。
ファビコン作成。favicon.ico 無料で透過マルチアイコンが作れます。

こちらで画像をアップロードすると、ico形式でのダウンロードが可能になります。

変換が楽に行えますので、私のような初心者の方にも安心です。

私はこれでアイコン画像の作成を完了しました。

Macでの裏技?

その後色々と探し続けていると、より簡単な方法を発見しました!

実にシンプルで分かりやすいものです。
Macでアイコン画像をプレビューします。

プレビュー画面

そして「書き出し」を選択し、ファイル形式を選びます。

書き出し選択画面

次にファイル形式を選びます。

ファイルを形式選択画面

普通に押すと形式はこれだけですが、ここで[optionキー]を押しながら形式を選択すると…

ファイル形式選択画面

出ました!
Microsoftアイコン形式!!

これで保存する事で変換完了です。
実に便利な方法ですね。

まとめ

以上で私のfavicon作成手順でした。

遠回りになってしまいましたが、色々と勉強にもなったので、結果オーライですかね。

やはり実際にやってみて、身に付いて、シェアする。
この流れが非常に重要だと改めて感じました。

favicon作成は本当に簡単です。
オリジナリティを簡単に出せますので、後回しにせず今すぐ取り掛かる事をオススメ致します。

自分らしいfavicon画像を作成してください。

ナシタカ(@ehicalog)でした。

スポンサーリンク

スポンサーリンク