How to Use This Favicon
This creates a simple text-based favicon with "MC" (MyCareClaim) in a medical-themed blue gradient. To implement it:
Option 1: CSS-based Favicon (Recommended)
Add this CSS to your main stylesheet:
.favicon-mc {
width: 32px;
height: 32px;
background: linear-gradient(135deg, #4F46E5, #7C3AED);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
font-size: 14px;
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
border: 1px solid rgba(255,255,255,0.2);
}
Option 2: HTML Implementation
Add this to your HTML head section:
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect width='32' height='32' rx='6' fill='url(%23gradient)'/><defs><linearGradient id='gradient' x1='0%' y1='0%' x2='100%' y2='100%'><stop offset='0%' style='stop-color:%234F46E5'/><stop offset='100%' style='stop-color:%237C3AED'/></linearGradient></defs><text x='16' y='22' font-family='Arial, sans-serif' font-size='14' font-weight='bold' text-anchor='middle' fill='white'>MC</text></svg>">
Option 3: Generate ICO File
You can also use online tools to convert this design to a proper .ico file:
- Take a screenshot of the favicon above
- Use an online favicon generator (like favicon.io)
- Upload the image and generate multiple sizes
- Download the .ico file and place it in your public folder