Using Emoji as Favicons: The One-Line SVG Trick

You are building a side project and need a favicon. You do not have a logo. Designing one takes time you do not want to spend. Here is a trick that takes 10 seconds: use an emoji as your favicon with a single line of HTML. <link rel= "icon" href= "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🚀</text></svg>" > That is it. No image file. No build step. No asset management. A rocket emoji as your favicon. How it works The favicon is a data URI containing an inline SVG. The SVG contains a text element with the emoji character. The browser renders the SVG (including the emoji text) as the favicon. Breaking it down: data:image/svg+xml, tells the browser this is an inline SVG The SVG has a 100x100 viewBox The text element places the emoji at vertical position 0.9em with font size 90 (to fill most of the viewBox) The comma and angle brackets need proper encoding in the href Browser support This works in all modern browsers: Chro