[{"data":1,"prerenderedAt":233},["ShallowReactive",2],{"term-f\u002Ffavicon":3,"related-f\u002Ffavicon":225},{"id":4,"title":5,"acronym":6,"body":7,"category":208,"description":209,"difficulty":210,"extension":211,"letter":212,"meta":213,"navigation":214,"path":215,"related":216,"seo":219,"sitemap":220,"stem":223,"subcategory":6,"__hash__":224},"terms\u002Fterms\u002Ff\u002Ffavicon.md","Favicon",null,{"type":8,"value":9,"toc":202},"minimark",[10,15,19,23,26,30,191,195,198],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"The favicon is that tiny little icon in your browser tab next to the page title. It's what makes your website look like a real website instead of a faceless tab. Forgetting the favicon is peak vibe coder energy, but adding it takes 5 minutes.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"A favicon (favorite icon) is a small square image displayed in browser tabs, bookmarks, and address bars. Modern best practice includes providing multiple sizes (.ico, 32x32, 180x180 for Apple touch icon, 192x192 for Android) and declaring them via link tags. Tools like Favicon.io or RealFaviconGenerator.net handle generation.",[11,27,29],{"id":28},"show-me-the-code","Show Me The Code",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Clink rel=\"icon\" type=\"image\u002Fx-icon\" href=\"\u002Ffavicon.ico\" \u002F>\n\u003Clink rel=\"icon\" type=\"image\u002Fpng\" sizes=\"32x32\" href=\"\u002Ffavicon-32x32.png\" \u002F>\n\u003Clink rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"\u002Fapple-touch-icon.png\" \u002F>\n","html","",[38,39,40,96,149],"code",{"__ignoreMap":36},[41,42,45,49,53,57,60,63,67,69,72,74,76,79,81,84,86,88,91,93],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sMK4o","\u003C",[41,50,52],{"class":51},"swJcz","link",[41,54,56],{"class":55},"spNyl"," rel",[41,58,59],{"class":47},"=",[41,61,62],{"class":47},"\"",[41,64,66],{"class":65},"sfazB","icon",[41,68,62],{"class":47},[41,70,71],{"class":55}," type",[41,73,59],{"class":47},[41,75,62],{"class":47},[41,77,78],{"class":65},"image\u002Fx-icon",[41,80,62],{"class":47},[41,82,83],{"class":55}," href",[41,85,59],{"class":47},[41,87,62],{"class":47},[41,89,90],{"class":65},"\u002Ffavicon.ico",[41,92,62],{"class":47},[41,94,95],{"class":47}," \u002F>\n",[41,97,99,101,103,105,107,109,111,113,115,117,119,122,124,127,129,131,134,136,138,140,142,145,147],{"class":43,"line":98},2,[41,100,48],{"class":47},[41,102,52],{"class":51},[41,104,56],{"class":55},[41,106,59],{"class":47},[41,108,62],{"class":47},[41,110,66],{"class":65},[41,112,62],{"class":47},[41,114,71],{"class":55},[41,116,59],{"class":47},[41,118,62],{"class":47},[41,120,121],{"class":65},"image\u002Fpng",[41,123,62],{"class":47},[41,125,126],{"class":55}," sizes",[41,128,59],{"class":47},[41,130,62],{"class":47},[41,132,133],{"class":65},"32x32",[41,135,62],{"class":47},[41,137,83],{"class":55},[41,139,59],{"class":47},[41,141,62],{"class":47},[41,143,144],{"class":65},"\u002Ffavicon-32x32.png",[41,146,62],{"class":47},[41,148,95],{"class":47},[41,150,152,154,156,158,160,162,165,167,169,171,173,176,178,180,182,184,187,189],{"class":43,"line":151},3,[41,153,48],{"class":47},[41,155,52],{"class":51},[41,157,56],{"class":55},[41,159,59],{"class":47},[41,161,62],{"class":47},[41,163,164],{"class":65},"apple-touch-icon",[41,166,62],{"class":47},[41,168,126],{"class":55},[41,170,59],{"class":47},[41,172,62],{"class":47},[41,174,175],{"class":65},"180x180",[41,177,62],{"class":47},[41,179,83],{"class":55},[41,181,59],{"class":47},[41,183,62],{"class":47},[41,185,186],{"class":65},"\u002Fapple-touch-icon.png",[41,188,62],{"class":47},[41,190,95],{"class":47},[11,192,194],{"id":193},"when-youll-hear-this","When You'll Hear This",[16,196,197],{},"Clients always notice when the favicon is missing.,Use RealFaviconGenerator to create all the sizes you need.,The favicon shows in bookmarks and PWA home screen icons.",[199,200,201],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":36,"searchDepth":98,"depth":98,"links":203},[204,205,206,207],{"id":13,"depth":98,"text":14},{"id":21,"depth":98,"text":22},{"id":28,"depth":98,"text":29},{"id":193,"depth":98,"text":194},"frontend","The favicon is that tiny little icon in your browser tab next to the page title.","beginner","md","f",{},true,"\u002Fterms\u002Ff\u002Ffavicon",[217,218],"Meta Tags","PWA",{"title":5,"description":209},{"changefreq":221,"priority":222},"weekly",0.7,"terms\u002Ff\u002Ffavicon","p0LXuhIuc9wM7iNgOXnLF6puTmiO7zfORLbSJvFkHww",[226,229],{"title":217,"path":227,"acronym":6,"category":208,"difficulty":210,"description":228},"\u002Fterms\u002Fm\u002Fmeta-tags","Meta tags are invisible HTML tags that sit in your page's head and tell search engines and social media platforms about your page.",{"title":218,"path":230,"acronym":218,"category":208,"difficulty":231,"description":232},"\u002Fterms\u002Fp\u002Fpwa","intermediate","A PWA is a website that pretends to be an app.",1776518279134]