Как поместить изображение в URL в HTML?

Question

Как поместить изображение в URL в HTML? Слева от адресной строки.

Answer 1

Посмотрите на запись в Википедии для favicon - http://en.wikipedia.org/wiki/Favicon

Формат этого файла .ico, и вам нужно поместить его в корневую папку вашего веб-сервера.

Для более сложных сценариев вы также можете использовать другой значок на странице, используя:

<link rel="shortcut icon" href="http://www.example.com/myicon.ico" />

Answer 2

Просто скопируйте файл с именем facicon.ico в корневой каталог вашего сайта, и изображение появится.

Answer 3

На самом деле это называется favicon. Просто создайте значок 16x16 пикселей, назовите его «favicon.ico» и поместите в корень документа.

Answer 4

Краткий ответ, простое решение

Создайте файл 16x16 в формате ICO, назовите его favicon.ico и поместите в корневой каталог вашего веб-сайта (например, http://mywebsite.com/favicon.ico).

Вашfavicon будет хорошо смотреться в классической среде рабочего стола (Windows + IE, Windows + Chrome и т. д.).

Длинный ответ, сложное (или нет) решение

Реальный ответ сложный.Первым делом для решения является маленький значок на вкладках браузеров ПК. Это легко сделать, см. первое решение выше. Затем у вас есть много дополнительных дел для рассмотрения:

• веб-клипы iOS: пользователи iPhone и iPad могут добавить ваш веб-сайт на свой домашний экран. Для этого нужны специальные изображения. https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
• Android: пользователи планшетов и телефонов Android могут добавить ваш сайт на свой любимый и домашний экран., вам нужны дополнительные изображения.
• Windows 8 и IE10 / IE11: пользователи теперь могут прикрепить ваш веб-сайт к своему рабочему столу. Да, некоторые другие изображения здесь! http://msdn.microsoft.com/en-us/library/ie/dn255024(v=vs.85).aspx#msapplication-square70x70logo
• Google TV: ещедругая картинка! https://developers.google.com/tv/web/docs/design_for_tv#favicons
• и т.д..и т. д.

Вы можете посмотреть этот полный список изображений значков .

Если вы хотите охватить все, я предлагаю вам использовать этот faviconгенератор .Он создает все эти картинки одновременно, а также соответствующий HTML-код.Полное раскрытие: я автор этого сайта.

Answer 5

Я помню, что сводил меня с ума, пытаясь понять, как сделать значок типа файла. Чтобы создать файл значков (расширение .ico), вы можете использовать графическую программу, которая экспортирует ICO (я предпочитаю Fireworks), или использовать онлайн-генератор .ico, который принимает JPG, PNG или GIF в качестве входных данных. 16x16 - это наименьший размер файла .ico, который вы хотите использовать. Вам не нужно помещать favicon.ico в корневой каталог, хотя это наиболее часто. Используя тег ссылки, вы также можете использовать относительную ссылку на файл в другой папке. Файл может называться logo.ico или даже logo.png, если браузер поддерживает PNG для значка избранного / ярлыка. Internet Explorer поддерживает только .ico, поэтому все используют .ico. Пример с некорневой директорией:

<link rel="shortcut icon" href="/media/images/website_graphics/favicon.ico" />

Создание файла favicon.ico из JPG, PNG или GIF