Как добавить логотип в html
Перейти к содержимому

Как добавить логотип в html

  • автор:

Добавление логотипа

введите сюда описание изображения

Как добавить логотип к названию сайта в ? Пример:

Отслеживать
задан 10 апр 2018 в 16:32
Иван Репин Иван Репин
351 1 1 золотой знак 9 9 серебряных знаков 21 21 бронзовый знак
10 апр 2018 в 16:34
Надеюсь не надо объяснять, что строку выше надо поместить в head ?
10 апр 2018 в 16:36
10 апр 2018 в 16:36

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Такая иконка называется favicon. Как добавить иконку сайта: инструкция.

Пример: (атрибут href — путь к иконке)

Генератор иконок для сайта (Favicons, Touch Icons, Tile Icons) под разные размеры, ОС и браузеры: ссылка

Как правильно поставить лого .SVG в html

Но оно не отображается. А если даже получиться, то все пропорции плывут. Может как то кодом задать размер и пропорции .SVG ? Вопросы почему .SVG ? Да потому что он более достойно выглядит в мобильной версии сайта. И не мыльное лого.

Отслеживать
3,747 2 2 золотых знака 14 14 серебряных знаков 23 23 бронзовых знака
задан 26 апр 2016 в 5:18
83 1 1 серебряный знак 10 10 бронзовых знаков

Ваша разметка правильная. Только что проверил — на пустой странице ничего просто так не плывет. Более того, мне не удалось даже специально заставить плыть пропорции. Возможно, у вас сама картинка изначально поплывшая.

27 апр 2016 в 11:18

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Способ №1 — Используя тег object

 Your browser does not support SVG 

Способ №2 — используя тег embed

Способ №3 — используя iframe

  

Способ №4 — с помощью CSS

#myelement

Способо №5 — с помощью тега img

Поддерживаемые браузеры: IE9+, Chrome(все), Mozilla(все), Safari 3.0+, Android 3.0+ Удачного кодинга.

Отслеживать
ответ дан 26 апр 2016 в 5:28
Urmuz Tagizade Urmuz Tagizade
2,535 1 1 золотой знак 14 14 серебряных знаков 25 25 бронзовых знаков
У автора проблема с тэгом img — и вы ему советуете . поставить тэг img?
27 апр 2016 в 10:44

Зачем переходить на личности? Я описал все возможные способы. У меня например тег img работает. У него нет. Или тег img нельзя использовать для svg. Можно ведь. Что вы на это скажете? Я вижу Вам делать нечего.

27 апр 2016 в 10:46

У автора проблема не с отображением картинок вообще, а с поддержанием правильного aspect ratio! Ценность вашего ответа — ноль.

27 апр 2016 в 10:47
Цель моего комментария — показать плюсующим серьезную проблему с ответом.
27 апр 2016 в 10:57

Я бы поставил лучше:

код картинки svg 

Дальше можно в саму svg вставить нужные атрибуты, классы, а через viewbox изменить нужные размеры и т. д., все возможности внутри svg, а если вставлять через тот же backgroung или как img, управлять ей не выйдет.

Отслеживать
ответ дан 26 апр 2016 в 6:48
Paralerodrom Paralerodrom
86 6 6 бронзовых знаков
А что значит код картинки ?
26 апр 2016 в 18:38

svg это и есть код, а то как вы видите ее в illustrator или sketch, это воспроизведение кода, суть в том, что вставляя svg через тег вы ставите как бы оригинал и можете дальше им управлять в любой желаемой форме, все остальные варианты не дадут такой возможности. Поизучайте что такое svg и как оно работает, там есть огромное поле для разбега. Если в двух словах, то внутри кода svg изображения доступна каждая «линия» для изменения цвета, размера, изменения состояния, доступна анимация и т. д., и т. д.

27 апр 2016 в 7:40

согласен наполовину — все, что можно сделать с SVG при инлайн добавлении в HTML, точно также возможно и при добавлении файла SVG через object @Pasha Dark недавно появилась у [Yoksel][css.yoksel.ru/a11y-for-logotypes/] интересная, очень подробная статья о добавлении лого на страничку.

Как уменьшить логотип? [закрыт]

Закрыт. Этот вопрос не по теме. Ответы на него в данный момент не принимаются.

Вопросы с просьбами помочь с отладкой («почему этот код не работает?») должны включать желаемое поведение, конкретную проблему или ошибку и минимальный код для её воспроизведения прямо в вопросе. Вопросы без явного описания проблемы бесполезны для остальных посетителей. См. Как создать минимальный, самодостаточный и воспроизводимый пример.

Закрыт 2 года назад .

я только начал учится верстать. Подскажите пожалуйста как уменьшить логотип, я его добавил в png, а он большой что то введите сюда описание изображения https://i.sstatic.net/DRYjw.jpg

CSS — текст в логотипе HTML-шаблона

Совсем коротенькая заметка, посвященная такому приему, как помещение текста в логотип.

В чем заключается вопрос? В каждом psd-макете имеется логотип для будущего сайта. Как правило, дизайнер старается сделать его запоминающимся, неординарным. Чтобы пользователю он бросался в глаза, оставил в его мозгу память о посещенном сайте. Поэтому подобные логотипы делаются вычурными, с графикой, нестандартными шрифтами.

При верстке подобный логотип можно сделать почти полностью на CSS, но это займет много времени. И, как правило, верстальщики так не делают.

Обычно логотип сайта вырезается из psd-макета одной картинкой и вставляется в код или как фоновое изображение (предпочтительный вариант, так как логотип меняется очень редко), или же, как картинка в самом HTML-документе (такой подход на сегодняшний день не приветствуется из-за правил семантики).

Однако помимо правил семантики HTML, существует еще и такая вещь, как SEO. Без этой технологии не проживет ни один сайт на сегодняшний день, если он хочет быть известным, конечно. А если ему достаточно быть широко известным в узких кругах — тогда можно и забыть о ней.

Поэтому, при верстке HTML-шаблона вырезанную картинку-логотип верстальщик оборачивает в ссылку (ибо логотип всегда должен быть ссылкой), которую в свою очередь оборачивает в заголовок первого уровня

должен быть один на всей странице, и это один из самых главных тегов для SEO — по нему поисковые машины находят сам сайт.

Но для Google, Yandex и других систем наиболее важной составляющей сайта является текст. Поэтому внутрь конструкции

заголовок + ссылка + картинка

нужно вставить сам тест, который дублирует название сайта в логотипе. Например, таким образом:

Но тогда возникает небольшая проблема — текст ссылки появляется в логотипе, когда браузер отрисовывает картинку. Чтобы было понятно, о чем идет речь, привожу картинку ниже:

Некрасиво, конечно. И совсем не то, что требуется. Как же убрать эту ссылку? Выход решается одной строчкой, с помощью свойства text-indent. Тексту задаем это свойство так, чтобы спрятать его из видимой части окна браузера.

Пример кода, решающего такую задачу, показан ниже:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *