[B! favicon] pocoponのブックマーク

絵文字をファビコンとして表示する簡単な方法

2021/5/17追記 2021年5月現在、Safariではこの方法に対応していません。Safari用に別途ファビコンを用意する必要があります。ちょっとしたWebサイトを作るときに地味に面倒なのがファビコンです。わざわざ画像を作るのも、どこかからちょうど良い画像素材を持ってくるのも、アップロードするのも面倒だったりします。そんなときは絵文字をファビコンとして使いましょう。やり方先にやり方を載せておきます。これをHTMLの<head>の中へコピペすればファビコンとして絵文字が表示されます。 <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text x=%2250%%22 y=%2250%%22 style=%

pocopon 2021/05/14

SVG
favicon

リンク

SVG形式のファビコンを設置しよう

2022年4月27日 SVG, Webサイト制作つ・い・に！ファビコンもSVG形式が対応されるようになりました！SVGを使えばこれまで使われてきたPNGなどのビットマップ形式とは違い、拡大縮小しても画質が劣化しません。つまり、過去記事「クリエイティブなファビコンを設置しよう」で紹介したように多くのサイズを用意する必要はありません！やったね！少し工夫すればダークモードにも対応できますよ！さっそくみていきましょう！ ↑私が10年以上利用している会計ソフト！ SVGファビコン設置方法 1. SVG形式のファビコン用画像を用意グラフィックツールでファビコンにしたい画像を用意します。サイズは特に気にしなくてもOK。正方形であればどのサイズでもきれいに表示されます。今回はIllustratorを使って32x32pxのものを用意しました。 SVG形式で保存します。 2. HTMLファイルに記述あと

pocopon 2020/03/12

SVG
favicon

リンク

Webサイトに必要なfaviconが21個になっていた - IT探検の追憶

久しぶりにWebサイトのfaviconを変えようと思い、調べてみると、必要なfaviconが大幅に増えていることがわかりました。その数、何と21個！そんなに増えていたとは。一応、以下にリストアップしてみます。 faviconのリスト favicon.ico: IE用 favicon-16x16.png: タブ表示用 favicon-32x32.png: Mac版Safari用 favicon-96x96.png: Google TV用 favicon-160x160.png: Opera 12 までのスピード・ダイアル用 favicon-196x196.png: Android版Chrome用 mstile-70x70.png: Windows 8 用 mstile-144x144.png mstile-150x150.png mstile-310x310.png mstile-31

pocopon 2015/01/08

リンク

こんなの使ってたらバカになる！便利すぎるWordPressプラグインBEST5

初カキコ…ども… 俺みたいに何でもかんでもプラグインで解決しようって腐れ野郎、他に、いますかっていねーか、はは。と有名なコピペをあれしつつ、今回はWordPressの便利すぎて後ろめたい気持ちにすらなりそうなプラグインBEST5をご紹介します。第1位　Favicon Rotator ファビコンって作るの何気にめんどくさくないですか？フォトショを拡張してないとicoファイル作れないし。JPGやPNGデータをファビコン形式に変換してくれるサイトを使ってicoファイルを作り、WordPressのメディアにアップロードし、ヘッダに組み込む。あぁ、めんどくさい！ところがこのFavicon Rotatorってプラグインを使うと、JPGやPNGの画像をアップロードするだけであっというまに出来上がるんです！ﾏｼﾞﾊﾟﾈｴプラグインをインストールすると、外観の中にFaviconというメニューが現れ

pocopon 2014/10/09

リンク

Mac でものすごく簡単に favicon.ico を作る方法

便利なんだけどあまり使われてないような気がするので。ご存じだったらごめんなさいよ。ウェブサイトに設置する favicon.ico ですが、用意した画像を favicon ファイルに変換するの Mac だとものすごく簡単にできます。画像を「プレビュー.app」で開くデフォルト設定なら普通に開けばプレビューで開かれると思います。 (必要なら)サイズを変更する「ツール」→「サイズを調整」で16 px 四方のサイズに。別名で保存「ファイル」→「別名で保存」を選ぶ。別のファイルにするんだから当たり前といえば当たり前。「フォーマット」で「Microsoft アイコン」を選ぶこの表現がわかりにくいんだけど、要するに favicon です。（Mac OS 10.7 Lion 以降でのやり方は後述） Favicon はもともと Internet Explorer 独自の仕様だったから