最新の手法でブラウザのタブに表示される「Favicon(ファビコン)」を作成するとこうなる

ブラウザのタブやブックマークに表示される「Favicon(ファビコン)」は、ウェブサイトを印象づける重要な要素です。そんなファビコンを作成しウェブサイトに表示させる最新の方法について、フロントエンドエンジニアのAndrey Sitnik氏が解説しています。 How to Favicon in 2021: Six files that fit most needs — Martian Chronicles, Evil Martians’ team blog https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs ファビコンは2000年代初頭に生まれたコンセプトで、インターネットに公開するウェブサイトはファビコンを備えているべきだとSitnik氏は主張。しかし、ウェブサイト

[abiruy]

知らない間に全ブラウザがsvg faviconに対応したのかと思って読んだらずっこけた・・・

[gnta]

Favicon自体がWeb標準で定められているものではなくIE独自の実装だったものを各ブラウザやOSが勝手に拡張させて今に至ってるからこんなにややこしいことに

[Falky]

いや結局変換するんじゃん。なにこれ

[TakamoriTarou]

Libre office のdraw がパワポみたいな感覚で作れて、さくっとSVGが書き出せるので便利よ。

[trashcan]

この例ベクターグラフィックスをわざわざピクセル化してるやん。InkscapeとかのドローソフトでSVG画像を作ってそのままアイコンにできるのかと思った。

[itochan]

サンプル画像なしで解説するような内容？

[Helfard]

自動化するツールができてから記事にしろと言いたい。

[WhiteWillow]

こういう一般人からしたらどうでも良い事ではてな民大荒れになるの結構好き

[yoshi-na]

結局複数変換書き出すんかーい

[hobbiel55]

めんどくせー

[pascal256]

SVGが使えることを今更しった

[sugarte]

2021年のfavicon事情

[twol]

ダークモード用のCSS効くのか

[sugawara1991]

趣旨はSVG使え⁺非対応環境向きビットマップ作れ、で2020現在クレバーな(と筆者が考える)ビットマップサイズ種別の最適化とその指定方法でしょ。思考停止で非対応を切ったり最大解像度だけとか全部作るのはダサいと

[arapro]

自動化ツールあるよ。png一個突っ込めばまるっと面倒見てくれる → https://realfavicongenerator.net/

[spark7]

容量はでかいけどico方式はお手軽で良いな。

[kijtra]

もう300x300くらいのPNG1コでいいよ

[blueboy]

　一太郎・プレミアムを持っているなら、花子 2019 で SVG 保存ができるし、あれこれと加工もできる。

[uunfo]

1ファイルで済むようにはならないのか…

[Kmusiclife]

はい解散！

[hitoyasu]

"「Favicon(ファビコン)」"

[youichirou]

“画像サイズに合わせて大量のファビコンを用意する必要がなく” いやいや、十分に大量だし、SVG除けばフツーの作り方だよこれ。

[palm84]

ふむ？

[mayumayu_nimolove]

別に今はnuxtとかnextが勝手に作ってくれるからな。

[tettekete37564]

MS独自仕様が排除されて標準化されたのかと思ったら。そもそもあれはWinアプリのアイコン用の仕様だからな

[dgen]

最新とかいうから絵を描くだけで完成するかと思えば・・・

[primedesignworks]

いつも生成サービスを使ってるから気にしたことなかった。

[BRITAN]

ファビコンがWordPressデフォのままだから変更しないと…

[imash]

ファビコンって名前久しぶりに聞いた

[shikiarai]

端末側がsvgで表示できるかどうか次第かな

[kumagoro_morino]

さいしんとは。

[Shinwiki]

え？pngの出力とかは見た目確認のためでしょ？まさかただの便利な各サイズ画像の作り方講座？？

[theta]

はてなブログでも使えるかな？

[monster-energy-zx14]

地味にfaviconってめんどい