Skip to content

Instantly share code, notes, and snippets.

@lewdev
Last active April 14, 2023 04:40
Show Gist options
  • Select an option

  • Save lewdev/437078d061b40a3893abba37aac3a8ff to your computer and use it in GitHub Desktop.

Select an option

Save lewdev/437078d061b40a3893abba37aac3a8ff to your computer and use it in GitHub Desktop.
😀 Use Emoji as your favicon (🔖Bookmarklet)

😀 Use Emoji as your favicon

Adjust the x, y, and font-size attributes in the text element to get your specific emoji to be centered and fit. Emojis have differing widths and heights.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y="1.045em" font-size="72">👨‍💻</text></svg>

Then put it in an icon meta tag. Be sure to replace the double-quotes with %22.

<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📂</text></svg>">

Run this in your Address Bar (🔖Bookmarklet 546b)

Here's a quick tool to replace the double-quotes with 22% and then put the SVG into a meta favicon tag. This also allows you to preview the SVG changes. The gray background helps show you where it "fits" within the icon.

data:text/html,<title>Emoji Favicon</title><meta charset=utf8><link rel=icon id=l />Input<textarea spellcheck=false onkeyup='p.innerHTML=this.value;m="data:image/svg+xml,"+this.value.replace(/["]/g, "%2522").trim();l.href=m;o.value="<link rel=\"icon\" href=\""+m+ "\">"'><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y="1.045em" font-size="72">👨‍💻</text></svg></textarea><textarea id=o spellcheck=false></textarea><p id=p style="background-color:gray;margin:0;padding:0"></p><style>input,textarea{width:100%25;display:block}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment