HTML 10 – picture, source element and favicon

Show the correct picture

picture & source

<picture>
  <source srcset="cat-small.jpg" media="(max-width: 768px)">
  <source srcset="cat-medium.jpg" media="(min-width: 769px) and (max-width: 1024px)">
  <source srcset="cat-large.jpg" media="(min-width: 1025px)">
  <img src="catt.jpg" alt="A picture with a cat">
</picture>

• picture element allows you to provide multiple versions of an images (different sizes and resolutions)
• It can automatically select the most appropriate version based on device screen or user preferences
• It can also be used to support different image formats
• the img element specifies the default version of the image
• source elements specify alternative image version(s)
• srcset attribute specifies the URL of image
• media attribute specifies the media query, in other words which image is correct to show

  <link rel="icon" href="favicon.ico" type="image/x-icon">

• favicon is a small icon that represents a website
• It appears in the browser tab and bookmarks bar
• It help uses to identify quickly which website is in each tab
• link elements specifies the relationship between the HTML document and external resource
• rel attribute specifies that the linked file is favicon
• href attribute specifies the favicon’s URL
• Modern browsers support ico, png, gif, jpeg and svg formats

---

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!