Как добавить иконку на мой сайт?

Какая разметка является современным стандартом для добавления значка на мой сайт? Каков стандартный формат изображения и размер?

Для работы во всех браузерах .icoпредпочтительнее, что касается размера, 32x32 является наиболее широко используемым, 16x16 также работает (это фактический размер, используемый в браузере в большинстве мест).

Также не в вашем вопросе, они должны иметь глубину цвета 8 или 24 бита.

Возможно, стоит отметить, что если вы планируете iWh независимо от того, какие пользователи делают закладки на вашем сайте, это отдельное <link>изображение, например StackOverflow:

<link rel="apple-touch-icon" href="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon.png">

Который:

Вы можете использовать такой инструмент, как http://www.favicon.cc/, чтобы импортировать изображение и преобразовать его в значок, или просто создать его с нуля.

После этого, если вы назовете свой файл favicon.icoи поместите его в корень вашего сайта, большинство веб-браузеров получат его автоматически.

Но вы также можете явно объявить это в ваших html-файлах следующим образом:

<link rel="shortcut icon" type="image/png" href="path/to/your/favicon.png" />

С преимуществами использования другого формата, чем ico, используйте различные значки на разных страницах, поместите ваш значок в другое место, используйте другое имя faviconи т. Д.

http://en.wikipedia.org/wiki/Favicon

Разметка с полным http-путем к домену для IE и сохранение значка в папке с документами:

<link rel="shortcut icon" href="http://www.your-site-domain/favicon.ico">

Стандартный формат изображения:

• .ico
• 16 х 16 пикселей

Для разных устройств, браузеров и ОС вы можете использовать разные иконки. Например, ниже приведен список, который может вас вдохновить. Делайте все возможное, исправляйте / редактируйте список по мере развития событий.

<link rel="icon" type="image/x-icon" href="/images/icons/favicon.ico" />
<link rel="icon" type="image/png" sizes="96x96" href="/images/icons/favicon-96x96.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/images/icons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/images/icons/favicon-16x16.png" />
<link rel="shortcut icon" type="image/x-icon" href="/images/icons/favicon.ico" />
<link rel="apple-touch-icon" sizes="57x57" href="/images/icons/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="60x60" href="/images/icons/apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/images/icons/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="/images/icons/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/images/icons/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/images/icons/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/images/icons/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/images/icons/apple-touch-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/images/icons/apple-touch-icon.png" />
<link rel="icon" type="image/png" href="/images/icons/android-chrome-192x192.png" sizes="192x192" />
<link rel="mask-icon" href="/images/icons/safari-pinned-tab.svg" color="#5bbad5" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="msapplication-TileImage" content="/images/icons/mstile-144x144.png" />
<meta name="msapplication-config" content="/browserconfig.xml" />
<meta name="theme-color" content="#282B34" />

Вам больше не нужна ссылка, но она полезна. Вместо этого, пока вы оставляете файл с именем favicon.ico (и это ico) в своем корне, он будет использоваться как favicon.

У меня были небольшие проблемы при создании моего .ico-файла с помощью GIMP, но в этом посте приведены подробные инструкции. Хитрость заключается в том, чтобы сначала сохранить в формате GIF для преобразования в индексированную таблицу цветов, а затем преобразовать ее в формат ICO.