Сайт иконка png: Векторные иконки и стикеры — PNG, SVG, EPS, PSD и CSS

css — Как более оптимально добавлять иконки в HTML при верстке сайтов?

Хочется найти самый оптимальный вариант с точки зрения SEO и скорости, особенно если иконок таких будет несколько десятков на странице.

Для SEO с точки зрения индексации, самый лучший вариант добавление инлайн SVG код в HTML.

У SVG есть два тега <desc> и <title>, в которые вы можете написать любой нужный вам текст для индексации поисковиками.

<title > Фирма Орион </title>
И этот текст кроме того, что будет проиндексирован, дополнительно выводится в качестве подсказки при наведении курсора.

<desc> Наша фирма Орион оказывает следующие услуги ......</desc>
Этот текст пользователь не увидит, но он также будет проиндексирован.

Ещё преимущество инлайн добавления — беcпроблемная стилизация иконок.

#marker {
stroke:#383838;
fill:#383838;
}
#marker:hover {
stroke:red;
fill:red;
}

<svg viewBox="0 0 29 36" xmlns="http://www.  w3.org/2000/svg"> 
<desc> Наша фирма Орион оказывает следующие услуги ......</desc>
 <g pointer-events="all" > 
 <title > Фирма Орион </title>
 <path  d="M14.4995 1.7998C9.50223 1.7998 5.4375 5.675 5.4375 10.4393C5.4375 16.8366 13.596 22.96 13.9431 23.2175C14.1062 23.3393 14.3029 23.3998 14.4995 23.3998C14.6962 23.3998 14.8929 23.3393 15.056 23.2175C15.4031 22.96 23.5625 16.8366 23.5625 10.4393C23.5625 5.675 19.4969 1.7998 14.4995 1.7998ZM14.4995 21.4143C12.7141 19.9566 7.25009 15.1154 7.25009 10.4393C7.25009 6.62803 10.5019 3.52787 14.4995 3.52787C18.4972 3.52787 21.7499 6.62803 21.7499 10.4393C21.7499 15.1068 16.2849 19.9549 14.4995 21.4143Z" />
  <path  d="M14.5 6.2998C12.0015 6.2998 9.96875 8.3185 9.96875 10.7998C9.96875 13.2811 12.0015 15.2998 14.5 15.2998C16.9985 15.2998 19.0312 13.2811 19.0312 10.7998C19.0312 8.3185 16.9985 6.2998 14.5 6.2998ZM14.5 13.4998C13.0011 13.4998 11.7812 12.2884 11.7812 10.7998C11.7812 9.3112 13.0011 8.0998 14.5 8.

  
 0998C15.9989 8.0998 17.2188 9.3112 17.2188 10.7998C17.2188 12.2884 15.9989 13.4998 14.5 13.4998Z" />
 </g> 
</svg>

Основной недостаток инлайн добавления — при большом количестве svg иконок, код HTML сильно увеличивается.

Эту задачу решают спрайты SVG с набором нужных иконок. Спрайт загружается один раз при помощи тега

<object>

<object type="image/svg+xml" data="img/symbol/sprite.svg">
  Your  browser does not support SVG 
</object>

и затем, каждая иконка вызывается из спрайта на любой странице HTML сколько угодно раз при помощи тега <use>

<svg>
      <use  xlink:href="sprite.svg"#icons--icon1"></use>
</svg> 

Другие способы вставки SVG иконок <img>, background, content имеют те или иные недостатки в проблемности стилизации, анимации, масштабируемости

И отсюда резонный вопрос, — зачем использовать масштабируемую графику SVG в качестве фона, когда при этом теряются основные преимущества SVG.

Нужен просто фон? Тогда однозначно нужен png.

Добавляем иконки сайта для iPhone, iPad и Android

Если Ваш сайт достаточно популярен, то многие пользователи заходят на него даже с телефонов и планшетов! Многие добавляю его в закладки на рабочий стол телефона или планшета, для того чтобы на рабочем столе отображалась красивая иконка вашего сайта, необходимо…

1. Главная
2. Все про HTML

Если Ваш сайт достаточно популярен, то многие пользователи заходят на него даже с телефонов и планшетов!

Многие добавляю его в закладки на рабочий стол телефона или планшета, для того чтобы на рабочем столе отображалась красивая иконка вашего сайта, необходимо:

Первым делом

, нам необходимо создать нужную иконку в формате .png. Рисуете (или подбираете) ее. Желательно, в хорошем разрешении.

Качество (разрешение) экранов устройств от Apple постоянно растет и меняется, поэтому нужно оптимизировать эти «картинки» под разные устройства.

Второе, необходимо сделать иконки разных размеров для разных устройств:

для старых iPhone размер иконки должен быть 57х57, для новый, начиная с 4-го действуют следующие размеры:

• 60х60 — IPhone
• 76×76 -iPad
• 120×120 — iphone-retina
• 152×152 — ipad-retina

Третье, вставить в код указав пути к картинкам:

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" href="touch-icon-ipad-retina.png">

Safari на iOS 7 не добавляет эффекты к иконкам. А старые версии Safari добавляли эффекты для иконок , чтобы эффект не применялся — нужно к именам файлам добавить —precomposed.png

А что Android!?:

Все дело в том, что Android-девайсы также подхватывают файлы apple-touch-icon.

png и несмотря на наличие в названии слова «apple» 🙂

Справедливости ради, хочу заметить, что ОС Android намеренно не ищет эти иконки, а только в том случае, если пользователь решил добавить сайт на «рабочий стол».

В заключении — если не хотите заморачиваться со вставкой кода, подготовкой картинок разного размера, то просто закиньте в корень сайта картинку (размером 60 на 60 пикселей) с названием «apple-touch-icon.png». Это самый простейший способ.

---

Мы советуем использовать сервис ICONOGEN

Укажите файл с иконкой и сервис быстро сделает иконки разных размеров:

Файлы можно скачать архивом.

Сервис так же генерирует html код для вставки в шаблон сайта:

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-72x72. png">
<link rel="apple-touch-icon" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/favicon-16x16.png">
<link rel="icon" type="image/png" href="/favicon-32x32.png">
<link rel="icon" type="image/png" href="/favicon-96x96.png">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png">
<meta name="msapplication-square70x70logo" content="/smalltile.png" />
<meta name="msapplication-square150x150logo" content="/mediumtile.png" />
<meta name="msapplication-wide310x150logo" content="/widetile.
  
No related posts.