Html как поставить логотип

Как добавить изображение в строку заголовка

Многие веб-страницы добавляют логотип иконки или изображения в строку заголовка. Логотип иконки также называется favicon.

Favicon (иконка быстрого доступа, иконка веб-страницы, URL иконка) — это файл, содержащий одну или несколько маленьких иконок, которые указывают определенную веб-страницу.

Favicon используется в верхнем левом углу страницы. Favicons привлекают внимание и могут стать отличным способом для активности пользователей.

Favicons можно добавить двумя способами.

• Чтобы изображение нормально отображалось в браузере, оно должно быть квадратной формы в любом из представленных форматов (ico, jpg, bmp, gif, png). Возможно также использование не квадратного изображения, но выглядеть оно будет не так профессионально.
• Вам потребуется конвертация изображения в формат .ico. Для этого можно использовать онлайн инструменты.
• Откройте онлайн инструмент и загрузите файл изображения, после чего изображение будет автоматически конвертировано.
• Скачайте изображение и сохраните файл .ico на компьютере.
• Переименуйте файл в favicon.ico,чтобы браузер смог автоматически распознать это название.
• Скачайте файл в хост, где расположены файлы вашего веб-сайта.
• Когда файл favicon.ico будет загружен, браузер автоматически выберет и покажет изображение в браузере.

Второй способ добавления favicons:

• Чтобы изображение нормально отображалось в браузере, оно должно быть квадратной формы в любом из представленных форматов (ico, jpg, bmp, gif, png). Возможно также использование не квадратного изображения, но выглядеть оно будет не так профессионально.
• Загрузите изображение в хост, где расположены файлы вашего веб-сайта.
• Последним шагом необходимо указать изображение, которое хотите использовать как favicon в коде вашего веб-сайта:

Добавьте следующую ссылку в раздел

icon" href="/favicon.ico" type="image/x-icon">

Пример

html> html> head> title>Заголовок документа title> link rel="shortcut icon" href="href="/favicon1.ico"> head> body> h1 style = "color: #1c98c9;"> Иконка W3docs h1> p> Иконка W3docs добавлена в строку заголовка p> body> html>

Результат

Иконка favicon должна иметь следующие характеристики:

• Favicon.ico — это название по умолчанию.
• Размеры иконок должны быть 16×16, 32×32, 48×48, 64×64 или 128×128 пикселей.
• Иконки должны иметь 8, 24 или 32-битный цвет.

В зависимости от формата favicon, атрибут type должен быть изменен:

• Для PNG используйте image/png.
• Для GIF используйте image/gif.
• Для JPEG используйте image/gif.
• Для ICO используйте image/x-icon.
• Для SVG используйте image/svg+xml

icon" href="favicon.gif" type="image/gif">

Для разных платформ размер favicon должен быть изменен:

table >table table-bordered table-striped table-header small-font"> tbody> tr> th>Platformth> th>Nameth> th>Rel valueth> th>Favicon sizeth> tr> tr> td>Google TVtd> td>favicon.pngtd> td>icontd> td>96×96td> tr> tr> td>Opera Coasttd> td>favicon-coast.pngtd> td>icontd> td>228×228td> tr> tr> td>Ipad Retina, iOS 7 or latertd> td>apple-touch-icon-152×152-precomposed.pngtd> td>apple-touch-icon-precomposedtd> td>152×152td> tr> tr> td>Ipad Retina, iOS 6 or latertd> td>apple-touch-icon-144×144-precomposed.pngtd> td>apple-touch-icon-precomposedtd> td>144×144td> tr> tr> td>Ipad Min, first generation iOS 7 or latertd> td>apple-touch-icon-76×76-precomposed.pngtd> td>apple-touch-icon-precomposedtd> td>76×76td> tr> tr> td>Ipad Mini,first generation iOS 6 or previoustd> td>apple-touch-icon-72×72-precomposed.pngtd> td>apple-touch-icon-precomposedtd> td>72×72td> tr> tr> td>Iphone Retina, iOS 7 or latertd> td>apple-touch-icon-120×120-precomposed.pngtd> td>apple-touch-icon-precomposedtd> td>120×120td> tr> tr> td>Iphone Retina, iOS 6 or previoustd> td>apple-touch-icon-114×114-precomposed.pngtd> td>apple-touch-icon-precomposedtd> td>114×114td> tr> tbody> table>

Для устройств Apple с операционной системой iOS версия 1.1.3 или выше и для устройств Android можете создать дисплей на главном экране, используя в Safari кнопку Добавить на главный экран (Add to Home Screen). Для разных платформ добавьте ссылку в разделе документа head.

Смотрите, как можете добавить ее в ваш код.

 icon" href="/favicon.ico" type="image/x-icon"> icon" href="/favicon.png" sizes="32x32" type="image/png"> icon-precomposed" href="/apple-touch-icon-152x152-precomposed.png" type="image/png" sizes="152x152"> icon-precomposed" href="/apple-touch-icon-152x152-precomposed.png" type="image/png" sizes="120x120"> icon" href="/favicon-googletv.png" sizes="96x96" type="image/png">

Источник

Логотип по стандартам HTML5 или Как поставить векторную картинку на веб-страницу

25 февраля 1993 года Марк Андрессен (Marc Andreessen) написал:
Предлагаю новый опциональный HTML-тег: IMG
При нем должен обязательно указываться аргумент SRC=«url».
Тег отсылает к файлу растрового изображения (bitmap или pixmap). Браузер будет запрашивать этот файл в Сети, распознавать как изображение и вставлять в текст сообразно месту тега в коде страницы .

Допустим, вы нарисовали в Corel Draw! логотип компании и собираетесь разместить его на сайте не как-нибудь, а формате HTML5. И, соответственно, размещать картинку не в растровом формате, а в .SVG

Зачем мне картинка в SVG?

Что это дает, понятно – при любом масштабировании на планшете или любом другом гаджете мы имеем идеально точно отрисованную картинку, насколько детализированной она бы ни была.

По умолчанию экспорт из Corel Draw! в SVG формат даже при галочке «Только выделенные объекты» дает в результате картинку такого размера, как наш рабочий лист. То есть картинка будет на A4, если рабочий лист такого формата. Приходится делать отдельный лист точно такого размера в пикселах, какой нам нужен, делать наш логотип именно такого размера, центровать, а потом уже экспортировать.

А теперь вставляем на страницу

мы видим сразу волшебный результат в браузерах под Android 4 и на ipad’ах, но ничего не видим на компьютере в обычных браузерах. Firefox 13, IE 8, Opera 12, Chrome (версия 24)- все дружно предлагают скачать и сохранить SVG файл вместо того, чтобы просто показать его.
Попробуем другой способ вставки SVG —

— показывает совершенно аналогичный результат, Опера, правда, выдает «Нет плагина. Ознакомиться?».
Третий способ вставки SVG – с помощью тега

Вижу опять ту же картину – все мои браузеры не показывают SVG.
По таблице совместимости – все мои браузеры кроме IE8 просто обязаны показывать правильно. К тому же, напомню, планшеты под Android и IPad IOS отображают мою страницу верно.

MIME-Type

Оказывается, дело в том, что мой сервер (IBM Lotus Domino) не умеет корректно отдавать MIME-Type для SVG. И файл, лежащий в File Resources базы, не может быть корректно отдан! Прописываю строчку image/svg+xml в свойствах ресурса. И, о чудо! – все браузеры (кроме IE8) показывают все три варианта (img, embed, object) вставки картинки. Отлично, это меня устраивает, «костыли» для IE будут в gif. Еще раз удивляюсь тому факту, что даже без mime-type на планшетах все показывалось правильно.

Взглянем на логотип поближе

А теперь я пробую увеличить масштаб страницы, чтобы посмотреть на свой логотип, а, точнее, сравнить, как отображается один и тот же файл, вставленный тремя разными тегами. Оказывается, при увеличении масштаба страницы в Firefox, контур того варианта, который был вставлен тегом IMG, то расплывается, то снова становится четким.

А как насчет защиты от несанкционированного копирования и воспроизведения?

Я не претендую на звание специалиста в этой области, наоборот, хотела бы задать вопрос. Просто не нашла ничьего мнения по данному вопросу. У SVG формата нет watermarks, равно как и других защитных атрибутов.
Обычно фирмы владеют файлами в векторах как исходниками. Делая брендбук, дизайн-студии отдают вектор, а везде используется уже растр.
А SVG, вообще-то, текстовый формат, точнее, XML-ный. И, будучи вставленным в любую программу для паблишинга, он будет воспроизведен без потери качества. Это надо учитывать, т.к. редактировать ваши файлы будет гораздо проще и, возможно, потом будет нечем доказать, что вы являетесь законным правообладателем.

Источник