Правильно определите иконку для сайта

Скажем, у меня есть SVG со значком, который я хочу использовать для своего веб-сайта.

  1. В какие размеры и форматы мне его преобразовать?
  2. Как бы выглядел мой HTML?

Я знаю, как указать простой значок 16x16, но моя цель состоит в том, чтобы значок работал и выглядел хорошо для как можно большего числа вариантов использования. Например, значок значка, закладки, значки сенсорного экрана iPhone, значки рабочего стола, закрепленные веб-сайты Windows 8 и т. Д.

Итак, в основном ищу пример HTML, который максимально охватывает, в каком формате и размере должны быть файлы изображений.


icons html favicon apple-touch-icon pinned-site
person Svish    schedule 14.03.2014    source источник
comment
Я не могу четко понять, что вы хотите сделать? Вы хотите охватить все распространенные размеры изображений, например 16x16, 24x24, 32x32 и т. Д.? Не могли бы вы уточнить немного подробнее?   -  person bosnjak    schedule 14.03.2014
comment
Нашел полезный сайт, поэтому добавил ответ сам. Вам должно быть ясно, что я имел в виду, увидев это;)   -  person Svish    schedule 14.03.2014

Ответы (2)


arrow_upward
1
arrow_downward

Нашел очень полезный сайт, RealFaviconGenerator.net. Вы просто загружаете свое изображение, а все остальное он сделает за вас. Генерируемый им HTML выглядит так:

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="icon" type="image/png" href="/favicon-196x196.png" sizes="196x196">
<link rel="icon" type="image/png" href="/favicon-160x160.png" sizes="160x160">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<meta name="msapplication-TileColor" content="#ffc40d">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">

Все ссылки включают размеры изображений. Кроме того, файл favicon.ico, который там не упоминается, поскольку предполагается, что он находится в своем местоположении по умолчанию, содержит несколько разных размеров. Думаю, 16, 24 и 32.

Замечательный сайт!

person Svish    schedule 14.03.2014
comment
Ах да, какой замечательный ресурс! Что ж, я являюсь автором RFG, поэтому я не могу быть беспристрастным :) Что касается размера различных изображений и их размера, вы можете найти список здесь: realfavicongenerator.net/faq#why_so_many_files - person philippe_b; 15.03.2014
comment
@philippe_b Это круто! Я беспристрастен и считаю это отличным ресурсом: p - person Svish; 16.03.2014

arrow_upward
0
arrow_downward

Я бы посмотрел на что-то вроде приложения ico-moon. Он предоставляет очень простой в использовании генератор шрифтов / svg, который может работать лучше для вас.

http://icomoon.io/app/#/select

person Mark    schedule 14.03.2014