YouTube Icon Sizes for Apps, Websites & Social Media

YouTube icons should be sized appropriately for their context: 16x16 pixels for favicons, 24-48 pixels for website social links, 180x180 for iOS touch icons, and up to 1024x1024 for app store submissions. This guide covers exact dimensions for every platform, from tiny web favicons to high-resolution print materials.

YouTube Icon Size Quick Reference

Web Icon Sizes

Favicon Specifications

Favicons appear in browser tabs, bookmarks, and browser history.

Implementation:

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

Website Social Media Icons

For social media link sections on websites:

Best Practices for Web Icons

1. 1.Consistent sizing - Match all social icons
2. 2.Adequate spacing - Minimum 8px between icons
3. 3.Click/tap targets - Minimum 44x44px touch area
4. 4.Accessibility - Include alt text and aria labels

Example CSS:

.social-icon {
  width: 32px;
  height: 32px;
  padding: 8px; /* Creates 48px touch target */
}

Mobile App Icon Sizes

iOS App Icons

If your app links to YouTube, you might display their icon:

Android App Icons

Adaptive Icons (Android)

For adaptive icons, provide:

• Foreground layer: 108x108 dp (432x432 px at xxxhdpi)
• Background layer: 108x108 dp
• Safe zone: Center 72x72 dp

Social Media Platform Sizes

Displaying YouTube Icon on Other Platforms

Email Signature Icons

Print Material Sizes

Resolution Requirements

Print materials require higher resolution than digital:

Calculating Pixel Dimensions for Print

Pixels = Inches × DPI

Example: 0.5 inch icon at 300 DPI
0.5 × 300 = 150 pixels (minimum source size)

Icon Format Recommendations

PNG (Raster)

SVG (Vector)

ICO (Windows Icon)

EPS/PDF (Print Vectors)

Implementing YouTube Icons

HTML/CSS Implementation

Using PNG:

<a href="https://youtube.com/@yourchannel" aria-label="YouTube">
  <img src="/icons/youtube-32.png" 
       alt="YouTube" 
       width="32" 
       height="32">
</a>

Using SVG (inline):

<a href="https://youtube.com/@yourchannel" aria-label="YouTube">
  <svg width="32" height="32" viewBox="0 0 24 24">
    <!-- YouTube icon path -->
  </svg>
</a>

Using icon fonts:

<a href="https://youtube.com/@yourchannel" aria-label="YouTube">
  <i class="fab fa-youtube"></i>
</a>

Responsive Icons

.youtube-icon {
  width: 24px;
  height: 24px;
}

@media (min-width: 768px) {
  .youtube-icon {
    width: 32px;
    height: 32px;
  }
}

@media (min-width: 1024px) {
  .youtube-icon {
    width: 48px;
    height: 48px;
  }
}

Icon Placement Best Practices

Website Footer Example

┌────────────────────────────────────────────────┐
│                                                │
│  [Logo]     Links     Links     [Social Icons] │
│                                 [YT][TW][IG]   │
│             32-48px icons, 8-16px spacing      │
│                                                │
└────────────────────────────────────────────────┘

Mobile App Example

┌─────────────────────┐
│                     │
│   Share to:         │
│   [YT] [TW] [FB]   │
│   48-64px icons     │
│   24px spacing      │
│                     │
└─────────────────────┘

Email Signature Example

Best regards,
Jane Smith
Marketing Manager

[YT] [LI] [TW]  ← 24px icons
youtube.com/@company

Common Sizing Mistakes

Mistake 1: Icons Too Small

Mistake 2: Inconsistent Sizes

Mistake 3: Low Resolution for Print

Mistake 4: No Spacing

Key principles:

1. 1.Match icon sizes across all social platforms
2. 2.Use appropriate formats (SVG for web, PNG for apps, vector for print)
3. 3.Maintain touch targets (44x44px minimum on mobile)
4. 4.Start with high resolution and scale down
5. 5.Follow YouTube brand guidelines for official icon usage

Download official YouTube icons from YouTube's Brand Resources page to ensure you're using current, authorized assets.

Related Resources:

• YouTube Logo PNG Download Guide
• YouTube Banner Size Guide
• YouTube Thumbnail Size Guide