lmorchard - Pebbling Club 🐧🪨

How To Use an Emoji as a Favicon Easily | CSS-Tricks - CSS-Tricks

css-tricks.com
2023-01-19T05:37:31.000Z
webdev favicon imported:pinboard

Notes

Lea Verou had a dang genius idea to use an emoji as a favicon. The idea only recently possible as browsers have started supporting SVG for favicons. Chuck an emoji inside an SVG <text> element and use that as the favicon.

Feed

Embed

Unfurl

{ "author": "Chris Coyier", "date": "2022-01-03T16:02:39.000Z", "description": "With just a simple one-liner of code you can use any emoji as a favicon of your website. 😃", "image": "https://css-tricks.com/wp-json/social-image-generator/v1/image/305613", "logo": "https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/07/star.png?fit=180%2C180&ssl=1", "publisher": "CSS-Tricks", "title": "How To Use An Emoji As A Favicon Easily | CSS-Tricks", "url": "https://css-tricks.com/emoji-as-a-favicon/", "feed": "https://css-tricks.com/feed/", "iframe": "<blockquote class=\"wp-embedded-content\" data-secret=\"8BdrqO1CWV\"><a href=\"https://css-tricks.com/emoji-as-a-favicon/\">How To Use an Emoji as a Favicon Easily</a></blockquote><iframe sandbox=\"allow-scripts\" security=\"restricted\" src=\"https://css-tricks.com/emoji-as-a-favicon/embed/#?secret=8BdrqO1CWV\" width=\"600\" height=\"338\" title=\"“How To Use an Emoji as a Favicon Easily” — CSS-Tricks\" data-secret=\"8BdrqO1CWV\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" class=\"wp-embedded-content\"></iframe><script type=\"text/javascript\">\n/* <![CDATA[ */\n/*! This file is auto-generated */\n!function(d,l){\"use strict\";l.querySelector&&d.addEventListener&&\"undefined\"!=typeof URL&&(d.wp=d.wp||{},d.wp.receiveEmbedMessage||(d.wp.receiveEmbedMessage=function(e){var t=e.data;if((t||t.secret||t.message||t.value)&&!/[^a-zA-Z0-9]/.test(t.secret)){for(var s,r,n,a=l.querySelectorAll('iframe[data-secret=\"'+t.secret+'\"]'),o=l.querySelectorAll('blockquote[data-secret=\"'+t.secret+'\"]'),c=new RegExp(\"^https?:$\",\"i\"),i=0;i<o.length;i++)o[i].style.display=\"none\";for(i=0;i<a.length;i++)s=a[i],e.source===s.contentWindow&&(s.removeAttribute(\"style\"),\"height\"===t.message?(1e3<(r=parseInt(t.value,10))?r=1e3:~~r<200&&(r=200),s.height=r):\"link\"===t.message&&(r=new URL(s.getAttribute(\"src\")),n=new URL(t.value),c.test(n.protocol))&&n.host===r.host&&l.activeElement===s&&(d.top.location.href=t.value))}},d.addEventListener(\"message\",d.wp.receiveEmbedMessage,!1),l.addEventListener(\"DOMContentLoaded\",function(){for(var e,t,s=l.querySelectorAll(\"iframe.wp-embedded-content\"),r=0;r<s.length;r++)(t=(e=s[r]).getAttribute(\"data-secret\"))||(t=Math.random().toString(36).substring(2,12),e.src+=\"#?secret=\"+t,e.setAttribute(\"data-secret\",t)),e.contentWindow.postMessage({message:\"ready\",secret:t},\"*\")},!1)))}(window,document);\n/* ]]> */\n</script>\n", "lang": "en", "failed": true, "failedAt": 1728192785414, "failedError": "TimeoutError: Promise timed out after 10000 milliseconds", "cached": true, "cachedAt": 1728192799838, "expires": 1728363604523, "status": 200, "bodyLength": 85353, "duration": 6907 }
Google's undocumented favicon to png convertor

simonwillison.net
2012-06-09T20:21:23.000Z
google png favicon webdev icons imported:pinboard

Notes

Google's undocumented favicon to png convertor (via) Showing the favicon of a domain next to a link is a really nice trick, but it’s slightly tricky to achieve as IE won’t display a .ico file if you link to it from an img element, so you need to convert the images server-side. This undocumented Google API does that for you, meaning it’s much easier to add favicons as a feature to your site.

Feed

Unfurl

{ "description": "Showing the favicon of a domain next to a link is a really nice trick, but it’s slightly tricky to achieve as IE won’t display a .ico file if you …", "logo": "https://simonwillison.net/favicon.ico", "title": "Google’s undocumented favicon to png convertor", "url": "https://simonwillison.net/2008/Aug/30/favicons/", "feed": "http://simonwillison.net/atom/everything/", "lang": "en", "expires": 1728364727556, "status": 200, "bodyLength": 6173, "duration": 818 }
Beck - Loser - SoundManager 2 Demo: Play MP3 links on a page, "page as playlist" style

schillmania.com
2008-07-15T16:45:52.000Z
favicon vumeter music sound imported:pinboard

Notes

"Experimental dynamic XBM test, favicon "VU meter""

Unfurl

{ "failed": true, "failedAt": 1728195567446, "failedError": "TimeoutError: Promise timed out after 10000 milliseconds", "expires": 1728365999688, "status": 200, "bodyLength": 1203, "image": "data:image/x-bitmap,#define%20img14x14_width%2016%0A#define%20img14x14_height%2016%0Astatic%20char%20img14x14_bits%5B%5D%20=%20%7B%0A0x00,0x00,0x00,0x00,0x7f,0xfe,0x7f,0xfe,0x7f,0xfe,0x7f,0xfe,0x7f,0xfe,0x7f,0xfe,0x7f,0xfe,0x7f,0xfe,0x7f,0xfe,0x7f,0xfe,0x7f,0xfe,0x7f,0xfe,0x7f,0xfe,0x7f,0xfe%7D;", "logo": "https://www.schillmania.com/favicon.ico", "title": "XBM image test", "url": "http://schillmania.com/projects/soundmanager2/demo/page-player/xbm-test.html", "duration": 4176 }

0 - 50 of 3 items

10 25 50 100 250