📘 Lesson · Lesson 28
Favicon
Favicon
What a Favicon Is
A favicon (favorite icon) is the tiny image on the browser tab, next to the page title — and in bookmarks, history and the phone home screen when someone saves your site. It is your website's logo in miniature: the little "f" for Facebook, the red play button for YouTube. Small detail, big trust signal — a site without one looks unfinished, showing a blank/default page icon.
Tab WITHOUT favicon: [ 🌐 HTML Tutorial ] ← generic globe/blank
Tab WITH favicon: [ <> HTML Tutorial ] ← your own iconAdding One — the Tag
<head>
<link rel="icon" href="favicon.ico">
<!-- or a PNG, which is common today: -->
<link rel="icon" type="image/png" href="/favicon-32x32.png">
</head>Put favicon.ico in your site's root folder and MANY browsers find it
automatically even without the tag - but always add the tag to be sure.
It is a <link> tag (the same tag family that attaches CSS), living in <head>. rel="icon" declares its role; href points to the image file. That's the whole requirement.
Formats and Sizes
| Format | Note |
|---|---|
| .ico | The classic — can hold multiple sizes in one file; works in every browser including old ones |
| .png | Easy to make, transparent, sharp; the common modern choice (use 32×32 or 48×48) |
| .svg | Vector — one file scales to any size; supported by modern browsers |
Easiest workflow: make a square logo (e.g. 512×512 PNG), run it through a free "favicon generator" website, and it outputs all the sizes plus the exact tags to paste. You do not hand-craft favicons; you generate them. Keep the source square — a rectangular logo gets squished into the square icon slot.
Mobile and Apple Icons — the full set
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Different places need different sizes: 16×16 for the tab, 180×180 for when an iPhone user adds your site to their home screen (apple-touch-icon), and the manifest for Android. A favicon generator produces this whole block — you just paste it. For a school or business site, the apple-touch-icon matters: parents who "Add to Home Screen" then see your school logo as an app-like icon.
Why It Won't Update — the caching trap
You changed the favicon, uploaded it, refreshed — and the OLD one still shows. This is the most common favicon frustration. Browsers cache favicons very aggressively (harder than normal pages). Fixes: hard-refresh (Ctrl+Shift+R), open the favicon URL directly (
yoursite.com/favicon.ico) to confirm the new file is live, add a version query (href="favicon.ico?v=2"), or test in Incognito. The file is usually correct; the browser is just showing a remembered copy.Exam Corner
Q: What is a favicon? The small icon shown on the browser tab, bookmarks and home screen — the site's mini logo.
Q: Which tag adds it?
Q: Common favicon formats? .ico, .png, .svg.
Q: What is apple-touch-icon for? The icon shown when an iOS user adds the site to their home screen.
Q: Favicon changed but old one shows — why? Aggressive browser caching; hard-refresh or add ?v=2.
Q: Which tag adds it?
<link rel="icon" href="favicon.ico"> inside <head>.Q: Common favicon formats? .ico, .png, .svg.
Q: What is apple-touch-icon for? The icon shown when an iOS user adds the site to their home screen.
Q: Favicon changed but old one shows — why? Aggressive browser caching; hard-refresh or add ?v=2.
Favicon क्या है
Favicon (favorite icon) browser tab पर page title के बगल वाली नन्ही image है — और bookmarks, history तथा phone home screen में जब कोई आपकी site save करे. यह आपकी website का छोटा logo है: Facebook का "f", YouTube का लाल play button. छोटी detail, बड़ा trust signal — बिना favicon site अधूरी लगती है, blank/default page icon दिखाती है.
Favicon ke BINA tab: [ 🌐 HTML Tutorial ] ← generic globe/blank
Favicon ke SAATH tab: [ <> HTML Tutorial ] ← aapka apna iconजोड़ना — Tag
<head>
<link rel="icon" href="favicon.ico">
<!-- ya PNG, jo aaj common hai: -->
<link rel="icon" type="image/png" href="/favicon-32x32.png">
</head>favicon.ico ko site ke root folder me rakho aur KAI browsers use
bina tag ke bhi apne aap dhoondh lete hain - par tag hamesha lagao pakke ke liye.
यह <link> tag है (वही tag family जो CSS attach करती है), <head> में रहता है. rel="icon" उसकी भूमिका बताता है; href image file की ओर इशारा. बस इतनी ही ज़रूरत.
Formats और Sizes
| Format | Note |
|---|---|
| .ico | Classic — एक file में कई sizes रख सकता है; पुराने समेत हर browser में चलता है |
| .png | बनाना आसान, transparent, sharp; common modern choice (32×32 या 48×48) |
| .svg | Vector — एक file किसी भी size पर scale; modern browsers support करते हैं |
सबसे आसान workflow: square logo बनाइए (जैसे 512×512 PNG), किसी free "favicon generator" website से गुज़ारिए, वह सारी sizes और paste करने के exact tags दे देता है. Favicons हाथ से नहीं बनाते; generate करते हैं. Source square रखिए — rectangular logo square icon slot में दबकर बिगड़ जाता है.
Mobile और Apple Icons — पूरा set
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">अलग जगहों को अलग sizes चाहिए: tab के लिए 16×16, iPhone user के home screen में site जोड़ने पर 180×180 (apple-touch-icon), और Android के लिए manifest. Favicon generator यह पूरा block देता है — आप बस paste करते हैं. School/business site के लिए apple-touch-icon मायने रखता है: "Add to Home Screen" करने वाले parents को आपका school logo app जैसे icon के रूप में दिखता है.
Update क्यों नहीं होता — caching trap
आपने favicon बदला, upload किया, refresh किया — और PURANA ही दिख रहा है. यह सबसे common favicon परेशानी है. Browsers favicons को बहुत ज़ोर से cache करते हैं (normal pages से ज़्यादा). इलाज: hard-refresh (Ctrl+Shift+R), favicon URL सीधे खोलिए (
yoursite.com/favicon.ico) यह पक्का करने को नई file live है, version query जोड़िए (href="favicon.ico?v=2"), या Incognito में test कीजिए. File आमतौर पर सही होती है; browser बस याद की हुई copy दिखा रहा होता है.Exam Corner
Q: Favicon क्या है? Browser tab, bookmarks और home screen पर दिखने वाला छोटा icon — site का mini logo.
Q: कौन-सा tag जोड़ता है? <head> में
Q: Common favicon formats? .ico, .png, .svg.
Q: apple-touch-icon किसलिए? iOS user के home screen में site जोड़ने पर दिखने वाला icon.
Q: Favicon बदला पर पुराना दिखता है — क्यों? ज़ोरदार browser caching; hard-refresh या ?v=2 जोड़िए.
Q: कौन-सा tag जोड़ता है? <head> में
<link rel="icon" href="favicon.ico">.Q: Common favicon formats? .ico, .png, .svg.
Q: apple-touch-icon किसलिए? iOS user के home screen में site जोड़ने पर दिखने वाला icon.
Q: Favicon बदला पर पुराना दिखता है — क्यों? ज़ोरदार browser caching; hard-refresh या ?v=2 जोड़िए.
💻 Live Code Editor
इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.
सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का
console.log देखने के लिए F12 दबाइए.