GitHub - hail2u/favicon-cheat-sheet: Obsessive cheat sheet to favicon sizes/types. Please contribute! (Note: this may be in flux as I learn new things about favicon best practices.)You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
What size should apple-touch-icon.png be for iPad and iPhone?
Updated list December 2019, iOS13 One icon for iOS 180x180 px and one for android 192x192 px (declared in site.webmanifest). <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest"> #### site.webmanifest { "name": "", "short_name": "", "icons": [ { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" } ], "di
Dynamically coloring a favicon - Roomanna
Since starting my job at Twitter, I’ve spent a lot of time on dev.twitter.com, either reading documentation or posting on the discussion group. I’ve also been Tweeting a lot more, and I tend to switch back and forth a lot throughout the work day. My browsing habits tend to lead to a bunch of open tabs in Chrome, and I realized that I was losing productivity. To illustrate, quickly tell me which of
X-Icon Editor
Get the best experience with Internet Explorer 9 and above Based on your current browser, you are not seeing all that X-Icon Editor has to offer. Learn more about Internet Explorer 9 and above X-Icon Editor is an HTML5 application (based on <Canvas>) that allows you to create high resolution icons that lets your sites shine. With X-Icon Editor you can quickly get your site ready with a large icon
IE10でのSVGのファビコン
SVGのファビコンで試した奴のWindows 8 Release Preview上のInternet Explorer 10での実験。Metro版とデスクトップ版共にSVGのファビコン自体は表示できるけど、単純にlink要素で指定してもダメで、ドメイン・ルートにfavicon.icoというファイル名でSVGファイルを置く必要がある。 IE10はMetro版では32x32を、デスクトップ版では16x16をそれぞれ使う。そのためSVGのようなスケーラブルなフォーマットだとより幸せになれるんじゃないかと思う。「faviconは16x16！」という時代の終わりの始まり。 Chrome 20やSafari 5、Opera 12がちゃんと対応しておらず今すぐ採用できるわけじゃないので、しばらくは32x32と16x16のマルチ解像度なアイコンで乗り切るのが無難。最終的にはiOS向けのアイコンやMetro
SVGのファビコン
Chrome 17と19では無視される。Content-Typeの問題かと思ったけど修正してもダメだったのでそういう話でもないようだ。Internet Explorer 9の挙動が怪しい。404だったらドメイン・ルートを見に行くようになってる模様。Opera 11と12では対応自体はしているのだけど、リサイズがうまくされないのであまり意味がない(キャンバスを16x16にすればいけるのかもしれないけどそれもアレ)。ということでまともに表示できるのはFirefoxのみということのようだ。 Internet Explorer10 PP4でも確認したんだけど、そもそもfavicon表示するGUIスペースがなかった……。 最近は高解像度のアイコンも含めたfavicon (だいたいのブラウザーで対応されている)を利用してるWebサイトも稀に見かけるけど、サイズでかくなりがちだしそもそも作るの面倒だし、
X-Icon Editor
Get the best experience with Internet Explorer 9 and above Based on your current browser, you are not seeing all that X-Icon Editor has to offer. Learn more about Internet Explorer 9 and above X-Icon Editor is an HTML5 application (based on <Canvas>) that allows you to create high resolution icons that lets your sites shine. With X-Icon Editor you can quickly get your site ready with a large icon
ファビコン favicon.ico を作ろう! リアルタイム 5サイズ版
このページでは 16x16, 24x24, 32x32, 48x48, 64x64 の5つの画像を含むマルチアイコンを生成します。 16x16のみ、16x16と32x32の2個、などのアイコンも作成可能です。 入力された画像は指定サイズに拡大縮小されます。 長方形の画像を指定した場合は正方形に変形されます。 透過情報を含むPNG画像も指定可能です。 指定した大きさの画像がアイコン内に作成されます。 16x16の画像のみ作成する場合は16x16に画像を指定して下さい。 32x32の画像のみ作成する場合は32x32に画像を指定して下さい。 同時に複数画像を指定すると、マルチアイコンになります。 16x16と32x32に画像を同時に指定すると2サイズのマルチアイコンになります。 16x16,24x24,32x32,48x48,64x64すべてに同時に画像を指定すると、5サイズのマルチアイコンにな
faviconの色をcanvasで変える - 0xff.toBlog()
github と github:enterpriseさんのfaviconが見分けがつかないので、Chrome拡張で差し替えることにしました。 画像どうしようかとちょっと悩んだけど、色変えるだけでいいだろうとFireworksを起動するも、色を良い感じに変える方法がわからない…。 元が の通り、白黒なので、トーンカーブ的なものではダメそうで、諦めてcanvasでやることにしました。 var favicon=document.getElementsByTagName('img')[0]; var cv = document.createElement('canvas'); cv.width = 16; cv.height = 16; document.body.appendChild(cv); var c = cv.getContext('2d'); c.drawImage(favicon,
2012年末に観ておきたいJavaScript20選: githubでwatch数の多い200件から - memo.yomukaku.net
GithubでJavaScriptのコードとして分類されており、現時点でwatch数の多い200件の中で、実際に使ったことがあり便利または面白いと感じた20件をまとめてみました。 backbone-boilerplate、requirejs、yeoman、lodashのような定番になってきているものから、TimelineJSのような全く汎用性のないものまであります。 d3.js Data-Driven Documents。サンプル集を観るのが手っ取り早いと思います。 pdf.js JavaScriptだけでPDFをレンダリングできる時代です。1年半ほど前にくらべると、かなりPDF製作者の期待通りにレンダリングできるようになってきています。 backbone-boilerplate Backbone.jsを使ったアプリの骨格構造。サーバー側でいわゆるMVC2のアプリを作っている人にはB
Retina時代のWeb制作
Retinaディスプレイを搭載したiPhone 4が発売されて一年半。 巷では高解像度のiPadやMacBookの発売が噂され、Mac OS XではiPhoneのRetinaディスプレイに相当するHiDPIモードがほぼ完成に近付いています。 これら高解像度ディスプレイを搭載した環境では、互換性を維持するため、低解像度の環境に合わせて作られたコンテンツは基本的に低解像度のまま表示されます。 それはウェブブラウザにおいても例外ではありません。従来のウェブページは何の問題も無く表示されますが、新しい高解像度のデバイスには、新しい高解像度のコンテンツを提供したいものです。 Retinaディスプレイを搭載したiPad、そしてパソコンが普及した時、ウェブ制作の手法も変化を求められます。来るべき時代に備え、今のうちにRetinaディスプレイへの対応方法を確認しておきましょう。 ※ 以下に記した手法はMa
研究室／iPhone、iPod touch、iPad用Webクリップ用アイコンの作り方 - iをありがとう
このページでは、iPhone、iPod touch、iPadの「Webクリップ」機能で表示されるアイコンの作り方を解説します。 Webクリップとは iPhone、iPod touch、iPadのウェブブラウザ「Safari」の、ブックマーク機能のひとつです。 ホーム画面に、ウェブサイトへのショートカットを置くことができます。 Webページや、ページ内の特定部分に素早くアクセスできます。 Webクリップを作成すると、表示中のページを縮小した画像が、ボタンとして作成されます。 Webクリップ機能に対応したアイコンを設置しているサイトの場合は、そのアイコンがホーム画面に登録されます。 Webクリップの作成方法 Safariで、任意のWebサイトを開く ブックマークに追加などが行える、共有アイコンをタップ「ホーム画面に追加」を選択 このとき、通常は表示しているサイトの縮小画像（サムネール）がアイコ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - audreyfeldroy/favicon-cheat-sheet: Obsessive cheat sheet to favicon sizes/types. Please contribute! (Note: this may be in flux as I learn new things about favicon best practices.)
StackPath
#122: The State Of Favicons | CSS-Tricks
Daring Fireball: How to Create Retina-Caliber Favicons
svg favicon
★iPhone/iPadのホーム画面用アイコンapple-touch-icon.pngをサイトに設定しよう | 編集長ブログ―安田英久 | Web担当者Forum
Dance Party