ファビコン透過方法

こんにちは！
初心者ながらＨＰづくりを楽しんでいるココロです。

このページでは、

「透過させたいファビコンの作り方」

について備忘録を兼ねてまとめています。

ちょっと画像が荒れてしまってますけどこんな感じで、

このアイコンの周りの白い 「 □ 」 をなんとかしたかったんです。

「かわいいファビコンを作りたい！ 」

「よーし、こうだ！ 」

　　　　　↓

「あ、あれ…？ 透過しない… 」

という問題で困っちゃって（涙）

いろんなサイトさんに助けてもらいながらあっちゃこっちゃ調べてファビコン１つ作るのに５、６時間くらいかかりました… （汗）
「ＰＮＧ２５６ 」 という単語を目にした時はそっとパソコンを閉じようかと。

大きなポイントだったのは、

色解像度を２５６色(８bit)に変更

サイトさんで透過の加工

この２点でした。

画像の種類の問題だったのかな？ 色解像度を２５６色（８bit）に変更してもｉｃｏｎを作成した時に透過になってなかったんです。 調べたら透過をしてくれるサイトさんを発見して早速ぽちぽちとクリックして透過加工 →
「やったぁ…でけたぁ…！ 」
と無事に完成。

ほんとあの時は
わぁ━ヽ(○´∀｀○)ノ━ぃ！！
と感激しました。

そんなわけでもし、

「あれ？！ファビコンが透過しない 」

「ファビコン透過できない… 」

と同じように困っておられる方に少しでも参考になれば幸いです。

※ 本ページはプロモーションを
　　含んでいます

ファビコン透過の流れ

  • 　　　　　　　　　　　　　　　
  • JTrim をダウンロード
  • 　　↓
  • そこで透過させたい画像を開く
  • 　　↓
  • イメージから透過色設定を選択
  • 　　↓
  • 透過させたい場所をクリック
  • 　　↓
  • カラーから色解像度の変更へ
  • 　　↓
  • ２５６色（８bit）に変更
  • 　　↓
  • 名前をつけて保存
  • 　　↓
  • サイトさんで透過の加工
  • 　　↓
  • ファビコン作成サイトにアップ
  • 　　↓
  • ダウンロードして完成
  • 　　　　　　　　　　　　　　　

です。

下のほうに備忘録として一連の流れを記録していますので私の手順でよければご参考になさってみてください。

Thanks for all the friendly sites

色解像度を２５６色（８bit）に変更する際はこちらの 「SiSO-LAB 」 さんの情報に助けてもらいました。 手順なども詳しく書いてくださっています。（ほんと助かりました（T T）感謝…）

透過の加工はこちらの 「peko-step 」 さんで行いました。 とてもわかりやすくて素敵なサイトさんです。透過できた時は感激しました（T＿T）
（感謝です… (っ´；ω；)っｱﾘｶﾞﾄｳ…｡+ﾟ)

最後にｉｃｏｎの作成はこちらの 「ファビコン favicon.ico を作ろう! 」 さんでポチリ。お気に入りのかわいいｉｃｏｎができました♪
(感謝です♪手順もシンプルで簡単にできちゃいます)

JTrimについて

こちらの 「窓の社 」 さんから
ダウンロードできます。（2019.11.07）
※サイトさんの緑のアイコンからダウンロードできます※

出典１：
https://forest.watch.impress.co.jp/library/software/jtrim/

JTrim使用で透過の流れ

↑↑

DL → デスクトップ →
JTrimさんのアイコンです

  • 　　　　　　　　　　　　　　　
  • ダウンロードしたJTrimを開く
  • 　　↓
  • 「ファイル 」
  • 　　↓
  • 「開く 」
    (アイコンクリックでもＯＫです)
  • 　　↓
  • 透過させたい画像を選択
  • 　　↓
  • 「イメージ 」
  • 　　↓
  • 「透過色設定 」へ
  • 　　　　　　　　　　　　　　　
  • 　　　　　　　　　　　　　　　
  • 選択してペンのマークに
  • 　　↓
  • 透過したいところをクリック
  • 　　↓
  • シマシマ模様にする
  • 　　　　　　　　　　　　　　　
  • もし変化がない場合は
    「透過状態を表示 」の
    切り替えでシマ模様がでます
  • 　　　　　　　　　　　　　　　
  • 　　　　　　　　　　　　　　　
  • それからカラーのタブを選択
  • 　　↓
  • 色解像度の変更をクリック
  • 　　　　　　　　　　　　　　　
  • 　　　　　　　　　　　　　　　
  • 色解像度を２５６色(８bit)
    に変更
  • 　　↓
  • 名前をつけて保存
  • (.png で保存するのは
    ダメでした)
  • 　　　　　　　　　　　　　　　
  • 　　　　　　　　　　　　　　　
  • 「peko-step 」さんのサイトへ
  • 　　↓
  • 保存した画像をアップロード
  • 　　　　　　　　　　　　　　　

出典１：
https://www.peko-step.com/tool/alphachannel.html

  • 　　　　　　　　　　　　　　　
  • 透過させたいところをクリック
  • 　　↓
  • 白い□をぽちぽちと…
  • 　　↓
  • お好みの形に整える
  • 　　　　　　　　　　　　　　　

出典１：
https://www.peko-step.com/tool/alphachannel.html

  • 　　　　　　　　　　　　　　　
  • 整ったら画像の上で右クリック
  • 　　↓
  • 名前をつけて保存
  • (.png imageで保存されます)
  • 　　　　　　　　　　　　　　　

出典１：
https://www.peko-step.com/tool/alphachannel.html

  • 　　　　　　　　　　　　　　　
  • 保存をした画像を

    「ファビコンfavicon.icoを作ろう! 」

    さんのＨＰへアップロード
  • 　　↓
  • お好きなサイズを選択
  • 　　↓
  • 「favicon.ico」 の所をポチリ
  • 　　↓
  • ダウンロード
  • 　　↓
  • 　 完成♪
  • 　　　　　　　　　　　　　　　

ぽちぽちと透過をさせてもらった 「peko-step 」 さんのサイトではお絵かきができたり、ぼかしを入れることもできちゃいます。 透過の切り替えは下の画像のようなアイコンで透過の選択ができました。 （似てたらいいのですけど… ）

あたたかみのあるデザインにも癒される素敵なサイトさんです。
（・・*）
（ぽちぽちも楽しかったです♪）

あれこれ試してみてもなかなかファビコンの透過ができなくて調べてみると 「 PNG-24 」 にする必要があるとかないとか…

「そ、そんなに難しいの？！ 」

と、めげそうだったのですが各サイトさんのおかげで無事に作れました。 （T T*）

なんでもPNG画像の種類には、

・ 「PNG-8 」
・ 「PNG-24 」
・ 「PNG-32 」

の３種類のファイルタイプがあるみたいですね。 しかも保存した後は同じ 「.png 」 という拡張子…。 （ややこしい）
透過処理にはPNG-24に透明を加えたPNG-32にしないといけないらしく。

推測ではありますけど透過できなかった画像の保存形式は 「.png 」 でもPNG-24に透明を加えたPNG-32ではなかったのでしょう。（たぶん）
それをJTrimさんとpeko-stepさんで透過処理を加えることで、PNG-32に変換されて透過ができたのかなぁ？って推測しています。

「画像　ＰＮＧ　２５６ 」 といった検索キーワードで検索をかけると詳しく書いてくださっているサイトさんが出てきます。 よければ参考になさってみてください。

ＷＥＢって便利ですよね（・・*）
ＷＥＢの備忘録ノートみたいな感じ…。 これからもファビコンを作っていく予定なのでまとめてみました。

５、６時間かかってしまって困ったのでもし 「ファビコンの透過ができない 」 とお困りの方にお役に立てたら幸いです。

とあるココロのＨＰ目録Ⅱでした
（*＾ω＾）

もし、このページの情報が少しでも役に立ちそうだな、役に立ったな、と思ってもらえましたら、気になる広告をポチりとクリックしてやってください。(｡･ω･｡)ﾉ凸”

記事を書く励みになります！
よろしくお願いします。
(* . .)⁾⁾ﾍﾟｺﾘっ