ファビコンがアニメーションしたり、バッジがついたり、進化しているなぁと思っていたら、最近のファビコンはゲームもできるようになってました。 FavIconTris FavIconTrisは小さいファビコンながら、テトリスで遊ぶことができます。 アニメーションではなく、実際に操作できます。 分かりにくいかもしれませんが、僕が操作しているのをアニメーションGIFにしてみました。
ファビコンがアニメーションしたり、バッジがついたり、進化しているなぁと思っていたら、最近のファビコンはゲームもできるようになってました。 FavIconTris FavIconTrisは小さいファビコンながら、テトリスで遊ぶことができます。 アニメーションではなく、実際に操作できます。 分かりにくいかもしれませんが、僕が操作しているのをアニメーションGIFにしてみました。
The recent release of Safari 9.0 brought a great new feature: pinned tabs. These tabs are locked to the lefthand side of your tab bar and stay in place, even when you open a new window or relaunch the browser. The default behavior is to display the first letter of the site’s name on a color from the site’s theme. If you work on a site with a strong branding element, you’ll want to customize the ic
2017年9月22日 Webサイト制作, 便利ツール Webサイトの制作時に、特に初心者さんが設置を忘れがちなファビコン。Webサイトをブックマークした際や、タブ表示した際にサイト名の横にちょこんと表示されている小さなアイコンのことです（Favourite + Icon = Favicon）。デバイスが増え、これまでとは設置方法が少し変わってきているのと、機能のついたファビコンも増えてきているので、その辺もあわせて紹介します！ ↑私が10年以上利用している会計ソフト！ ファビコンをデザインする ファビコンは16×16ピクセルとかなり小さいながらも、その存在は偉大です。複数のタブを開いている時や、ブックマークリストの中から、ひと目見てどのサイトか区別できるからです。 多くの場合、そのWebサイトのロゴマークを縮めたり、簡略化したものがファビコンデザインとして採用されています。CHANEL、A
久しぶりに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
Webカムや動画までFaviconに流しちゃいます！ FaviconはWebサイトのマークとして大事な役割を担っていますが、単に同じ画像をいつまでも表示しているのでは面白みがありません。もっと活用したい、そう考える人に使ってみて欲しいのがfavico.jsです。 できること favico.jsができることはFaviconのダイナミックな変換です。例えば、 バッジ表示 別なアイコンに差し替え 動画の表示 Webカムの表示 ができます。Faviconの中でWebカムを表示したいと思うケースは思いつきませんが、バッジ表示やユーザによってアイコンを変えると言うのは十分ありえるのではないでしょうか。 バッジ表示についてはアニメーションや形を指定することもできます。 デモ バッジ表示。数はダイナミックに変更できます。 数をアップしました。 アイコンの差し替え。 動画の再生。 バッジの表示位置は指定でき
パクリとかなんとか言ってても始まらない。 乗るしかない、このビッグウェーブに! ってことでTwitterのアイコンをMetro...じゃない、フラットデザイン化して自己満足していたら酢酸先生に褒められたのでやり方を公開。 今回はとりあえず、png/jpgのビットマップ画像をVector Magicというサイトでベクター化してぺたぺた色付けする手法でやってみました。 お前プログラマーなんだからアイコンフラット化ツールぐらい作れよ、という声が聞こえてきますが、そこはOffice使いとして...(むがもご)。 1. まずはVector Magicにユーザー登録 Vector Magic http://vectormagic.com/home 基本は有償ツールの無償サービスなので、まぁそれぐらいはしょうがない。それが嫌であれば他の手を...。 なかなかよく出来てるツールだと思うので、試して仕事につ
こんにちわ。夏休みの学生がうらやましくなんてないぞー、オレっち（@yashiki55）です。 オレっちのMacBook Proが世代交代を果たしまして、MacBook Pro Retinaディスプレイになったことで、毎日ウハウハ言いながら仕事をしておりますが、当然Retina対応していないサイトやソフトの方がまだ多いわけで、自分のサイトでもファビコンが特に汚い感じだったんですよ。 そもそもファビコンって上の画像のコレね。画像はマルチサイズのファビコンに変更した後だから見れるようになったんですが、それまでは「新」という字がぐちゃぐちゃ〜ってカンジになって読めなかったんですね。 あ、Retinaディスプレイ以外ではもちろん従来のままで大丈夫でしたよ。 これまでは16×16ピクセルだった そう。16×16ピクセルのちっこい画像を超高解像度のRetinaディスプレイにぶち込んだら、そら潰れちまうよ
PNG32bit(24bitアルファ付き)画像では、8ビット(256階調)の透明度が各ピクセルに割り当てられていますので、ドロップシャドウの部分も綺麗に再現されます。 GIFやPNG8ではアルファ値は1ビットですのでONまたはOFFの2階調しかありません。よって、透過を活かしたアイコンが作りにくく、どうしても汚い画像になってしまいます。 アイコンには 16x16 , 32x32 , 48x48 , 96x96 , 128x128 等の複数の画像を含めるようにしましょう。表示環境によって、より適した画像が表示されます。 ファビコンを作成の方へ： 16x16の画像を含ませて、ファイル名をfavicon.icoに変更すれば完成です(任意のファイル名でもOK)。 favicon(ファビコン)とはウェブサイトやウェブページに関連付けられたアイコンのことです。 faviconは日本では「ファビコン」と
指定できる画像タイプは PNG , GIF , JPG , PSD , BMP です。 拡張子でファイルタイプを判別していますので、拡張子付きのファイルを指定して下さい。 拡張子の大文字小文字は問いません。 指定できるファイルは合計4000KB以下です。 (PSD:Photoshop形式は透過が無視されます) アイコンには一つのアイコンファイルに複数のサイズと複数の色数の画像を入れることが出来ます。 このサイトでは画像数が複数の場合をマルチアイコンと呼びます。画像が1つの場合は区別するためシングルアイコンと呼びます。 画像には透過情報も含めることが出来ますので、任意の形状のアイコンが作成できます。 画像作成には任意の画像編集ソフトを使用して下さい。 同サイズで色数の違う画像をアイコンに含めることも出来ます。 収納する順番は自由に出来ますので、思い通りのアイコンを作成する事が出来ます。 ファ
ファビコン作らずに１年間ブログ運営してきました。 なんでいままで作らなかったんだっていう話ですよね。 ファビコンってすぐ作れそうなイメージがあったんですが、意外にもPhotoshopではプラグインを追加しないと書き出せないんですね。 というわけで、Photoshopでファビコンを作る方法をメモっておきます。
ファビコンはサイト閲覧時のタブ以外にも、多くの場所で使われていることがわかります。 また、上記以外にも検索結果画面にも表示されるため、そのサイトを表す適切なアイコンを設定するようにしましょう。 作成時のサイズは512px × 512pxのみでOK これだけサイズがあると、全て用意するのかと不安になってしまいますが、WordPress4.3以降のバージョンであれば512px × 512pxのPNG形式ファイルを作成すれば全てに対応してくれるようになりました。 複数作成する必要はないので安心してください。 WordPress以外の場合 WordPressを利用しておらず上記のような自動適用の機能がない場合、またはWordPressが4.3以前のバージョンの場合は、各サイズのアイコンを用意する必要があります。 各ブラウザのファビコン表示サイズは先ほどの表の通り16px × 16px が一般的です
Unless we make a custom CSS selector for every single site we want to do this for, CSS isn’t capable of yanking the href off links and using it to plant a favicon next to the link. But if we involved a smidge of JavaScript, we can get it done. The “I Wish” CSS Only Technique What would be nice is if you had simple semantic HTML like this: <a href="https://github.com">GitHub</a> And then you could
(65%) Piecon / Pie charts in your favicon! faviconを円グラフにしてアニメーションできる「Piecon」。 処理の進捗に応じてtitleタグを書き換える方法もありますが、faviconで円グラフを描くというのは斬新な発想ですね。 画面遷移無しで処理に時間がかかるような時に表示させてあげると他のサイトを見ながら進捗も図形で一目で分かってかなり親切です。 16x16ピクセルをいかに使うかといったところですが、円グラフはちょうどマッチしていて、ナイスアイデアと言わざるをえませんね。 jQuery等に依存せずに単体で使うことが出来る所も特徴。 ブラウザによってはfaviconのアニメーションができませんが、タイトルタグの書き換えによって進捗も分かるようになっています 関連エントリ 様々なグラフを描画できるJavaScriptライブラリ「NVD3.js
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く