Иконка домашней страницы "Домик" или "home" | CSS

• Как автоматически получать фавиконы других сайтов
• Анимированная иконка загрузки на CSS

Значок в HTML: ⌂

Реализация с помощью background

<style> 
.home1 {
  height: 3em; width: 3em; /* подберите свой размер, например, 16px или 32px */ 
  background: #2C2C2C; /* подберите свой цвет */ 
  background-image:
   linear-gradient(transparent 5%, #2C2C2C 5%, #2C2C2C 50%, transparent 50%),
   linear-gradient(90deg, #fff 20%, transparent 20%),
   linear-gradient(270deg, #fff 20%, transparent 20%),
   linear-gradient(225deg, #fff 25%, transparent 25%),
   linear-gradient(135deg, #fff 25%, transparent 25%),
   linear-gradient(transparent 70%, #fff 70%);
  background-position: 80% 0%, 0% 100%, 0% 100%, 0% 0%, 0% 0%, 50% 0%;
  background-size: 15% 100%, 100% 50%, 100% 50%, auto, auto, 16% 100%;
  background-repeat: no-repeat;
}
</style>

<div class="home1"></div>

Реализация с помощью :before и :after. Если px поменять на em, распадется на элементы в Chrome при увеличении (CTRL+).

<style> 
.home {
  position: relative;
  height: 16px; width: 8px;
  border: 14px solid #2C2C2C; border-bottom: none;
}
.home:before {
  content: "";
  position: absolute; top: -30px;
  right: -26px; /* 30px - 8px/2 */ 
  border-style: solid; border-width: 0 30px 20px; border-color: rgba(0,0,0,0) rgba(0,0,0,0) #2C2C2C;
}
.home:after {
  content: "";
  position: absolute; top: -30px; left: 13px;
  height: 10px;
  border: 4px solid #2C2C2C;
}
</style>

<div class="home"></div>