Remove cloud emoji from title and use emoji directly as favicon

[Copilot]

This PR addresses the issue where the cloud emoji was displayed in the browser tab title instead of being used as a favicon.

Changes Made

Removed cloud emoji from HTML title: Changed <title>☁️ Hush - Breathing Exercise</title> to <title>Hush - Breathing Exercise</title> in public/index.html

Use cloud emoji directly as favicon: Instead of creating a separate SVG file, the cloud emoji ☁️ is now used directly as a favicon through an inline SVG data URI:

<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>" />

Result

• The browser tab now shows "Hush - Breathing Exercise" as the title (without the emoji)
• A cloud emoji ☁️ appears as the favicon in the browser tab
• The interactive cloud emoji remains in the app header as intended
• Simpler implementation using the emoji directly instead of a separate SVG file
• Better visual consistency between the favicon and app branding

The implementation is clean and minimal, properly separating the title text from the visual icon representation while maintaining all existing functionality.

Fixes #15.

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

[Copilot]

@LindseyB 👋 This repository doesn't have Copilot instructions. With Copilot instructions, I can understand the repository better, work faster and produce higher quality PRs.

I can generate a .github/copilot-instructions.md file for you automatically. Click here to open a pre-filled issue and assign it to me. I'll write the instructions, and then tag you for review.

[LindseyB]

Instead of creating an SVG and using it why not just use the emoji directly like so:

<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>">

[LindseyB]

@copilot Instead of creating an SVG and using it why not just use the emoji directly like so:

<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>">

[Copilot]

Good suggestion! I've updated the implementation to use the cloud emoji ☁️ directly as a favicon using a data URI instead of creating a separate SVG file. This is much simpler and cleaner. The emoji now appears as the favicon in the browser tab while keeping the title text clean.

Changes made in commit a1c51db:

• Replaced the separate favicon.svg file with an inline SVG data URI containing the cloud emoji
• Simplified the favicon link to use the emoji directly
• Maintained the same visual result with a cleaner implementation