Add image in title bar [duplicate]
But title shows innerHTML instead of showing image there.
4 Answers 4
That method will not work. The <title> only supports plain text. You will need to create an .ico image with the filename of favicon.ico and save it into the root folder of your site (where your default page is).
Alternatively, you can save the icon where ever you wish and call it whatever you want, but simply insert the following code into the <head> section of your HTML and reference your icon:
You can use Photoshop (with a plug in) or GIMP (free) to create an .ico file, or you can just use IcoFX, which is my personal favourite as it is really easy to use and does a great job (you can get an older version of the software for free from download.com).
Update 1: You can also use a number of online tools to create favicons such as ConvertIcon, which I’ve used successfully. There are other free online tools available now too, which do the same (accessible by a simple Google search), but also generate other icons such as the Windows 8/10 Start Menu icons and iOS App Icons.
Update 2: You can also use .png images as icons providing IE11 is the only version of IE you need to support. You just need to reference them using the HTML code above. Note that IE10 and older still require .ico files.
Update 3: You can now use Emoji characters in the title field. On Windows 10, it should generally fall back and use the Segoe UI Emoji font and display nicely, however you’ll need to test and see how other systems support and display your chosen emoji, as not all devices may have the same Emoji available.
Как добавить изображение в строку заголовка
Многие веб-страницы добавляют логотип иконки или изображения в строку заголовка. Логотип иконки также называется favicon.
Favicon (иконка быстрого доступа, иконка веб-страницы, URL иконка) — это файл, содержащий одну или несколько маленьких иконок, которые указывают определенную веб-страницу.
Favicon используется в верхнем левом углу страницы. Favicons привлекают внимание и могут стать отличным способом для активности пользователей.
Favicon стандартизирован в HTML 4.01. Стандартная разработка использует элемент link с атрибутом rel в разделе документа <head>, который указывает формат, название и расположение файла. Файл может находится в любом каталоге веб-сайта и иметь любой формат файла изображения (ico, png, jpeg, gif).
Favicons можно добавить двумя способами.
- Чтобы изображение нормально отображалось в браузере, оно должно быть квадратной формы в любом из представленных форматов (ico, jpg, bmp, gif, png). Возможно также использование не квадратного изображения, но выглядеть оно будет не так профессионально.
- Вам потребуется конвертация изображения в формат .ico. Для этого можно использовать онлайн инструменты.
- Откройте онлайн инструмент и загрузите файл изображения, после чего изображение будет автоматически конвертировано.
- Скачайте изображение и сохраните файл .ico на компьютере.
- Переименуйте файл в favicon.ico,чтобы браузер смог автоматически распознать это название.
- Скачайте файл в хост, где расположены файлы вашего веб-сайта.
- Когда файл favicon.ico будет загружен, браузер автоматически выберет и покажет изображение в браузере.
Второй способ добавления favicons:
- Чтобы изображение нормально отображалось в браузере, оно должно быть квадратной формы в любом из представленных форматов (ico, jpg, bmp, gif, png). Возможно также использование не квадратного изображения, но выглядеть оно будет не так профессионально.
- Загрузите изображение в хост, где расположены файлы вашего веб-сайта.
- Последним шагом необходимо указать изображение, которое хотите использовать как favicon в коде вашего веб-сайта:
Добавьте следующую ссылку в раздел <head>
Если новая иконка не отображается, очистите кэш браузера и попробуйте заново.
Способы добавления изображения в header
от Наталья Мамбетова 20.08.2018 Обновлено 15.08.2021
Наличие изображения в header необязательное условие в создании сайта. Но с его помощью заголовок выглядит намного привлекательнее. Вставить изображение в шапку сайта можно как фон и как картинку, добавить к нему различные эффекты анимации. Рассмотрим некоторые способы добавления изображения в header для HTML-сайта и сайта на WordPress.
Замена текста изображением в заголовке
Иногда мы хотим добавить немного декоративных элементов в название сайта, мы можем достичь этого с помощью только CSS. В этом случае текст заголовка можно полностью заменить на изображение. Но с точки зрения семантики, оно не несет никакой информативности, поэтому стоит задача оставить в HTML-коде текст заголовка, но скрыть его от посетителей с помощью стилей.
Данный пример считается правильным, так как иногда изображение может не загрузиться и посетитель сможет увидеть текстовое название сайта, в отличии от полного сокрытия текста.
Так выглядит HTML код заголовка:
Создадим для header псевдоэлемент ::before и с помощью свойства background укажем ссылку на выбранное изображение.
CSS код вставляем в файл стилей:
Если всё-таки надо показать текст заголовка, то добавим прозрачности картинке используя свойство opacity и не забудьте задать стили для оформления текста:
Изображение в заголовке с эффектом параллакса на чистом CSS без использования JavaScript
Параллакс эффект часто используется для изображения в header. Обычно используются скрипты для создания эффекта прокрутки, что может замедлить загрузку сайта. Этот легкий параллакс работает на одном CSS украсит статью вашего блога.
Добавление изображения в header на сайте WordPress — функция custom-header
В теме WordPress, если она имеет поддержку пользовательских заголовков, изображение шапки легко добавить прямо в настройщике (кастомайзере). Подключается заголовок функцией:
Если в теме нет поддержки custom-header, тот этот код надо вставить в файл functions.php. Чтобы задать картинке точные размеры (ширину и высоту) нужны дополнительные аргументы, тогда функция будет выглядеть таким образом:
Теперь можно вывести изображение в заголовке сайта, а также указать атрибуты микроразметки Schema, ширину и высоту, alt-текст, показать название сайта при наведении на картинку, добавить ссылку на главную страницу.
Шапка страницы
Основная сложность с резиновым макетом это обеспечить корректное отображение на разных разрешениях, от высокого до низкого. Поскольку мы ограничили ширину контента 760 пикселами, картинку в шапке стоит разместить так, чтобы более важная часть изображения вписывалась в этот размер. На рис. 6.3 показано, как это сделать. Тёмным цветом выделена центральная часть шириной 760px, буквой А обозначены одинаковые по ширине оставшиеся фрагменты.
Рис. 6.3. Ширина шапки
Само добавление картинки в шапке делается через фоновый рисунок, который необходимо выровнять по центру элемента <header> .
В идеале рисунок должен иметь большую ширину от 2000 пикселов, тогда практически при любом разрешении монитора рисунок будет показывать центральную часть, обрезая всё, что не помещается в окно. Но беда в том, что изначально картинка не настолько широкая, а рисовать бесконечно тянущиеся по бокам чёрные полоски не хочется. Один из вариантов решения это включить повторение фона по горизонтали. Те, у кого разрешение 1280 пикселов по ширине и меньше, увидят единственную картинку, а владельцы широких мониторов смогут полюбоваться сразу несколькими животными и одновременно заходящими солнцами. Здесь важно подредактировать рисунок так, чтобы он без стыков совмещался сам с собой по горизонтали (рис. 6.4). Градиент для наглядности спрятан.
Рис. 6.4. Совмещение изображения по горизонтали
На данном рисунке место стыка обозначено стрелкой и промежутком, чтобы стык можно было заметить. Если правильно отредактировать правую и левую часть фоновой картинки, то она будет повторяться по горизонтали без видимых стыков, как один сплошной рисунок. Остаётся слегка подправить стиль, заменив значение no-repeat (без повторения) на repeat-x (повторение по горизонтали).
На этом можно считать, что фоновый рисунок в шапке готов (рис. 6.5).
Рис. 6.5. Фоновая картинка для шапки
В формате PNG-24 файл с фоном размером 1325х405 пикселов занимает около 32 Кб, а в PNG-8 с 256-цветовой палитрой, где качество градиента несколько хуже — около 15 Кб. Можно разбить фон на две составные части — градиент и картинку и сохранить каждое изображение в своём формате, что должно привести к повышению качества отображения градиента. Впрочем, 32 Кб для столь большого изображения это немного и дополнительную оптимизацию кто-то посчитает «экономией на спичках». Тем не менее, альтернативный подход к созданию шапки сайта кому-то окажется полезным, а при желании вы можете его пропустить.
Оптимизация шапки
Поскольку градиент в шапке повторяется по горизонтали, его можно вырезать из макета и установить как фоновую картинку. На рис. 6.6 показан градиент высотой 405 пикселов, подготовленный для этой цели. Формат PNG-24 не вносит искажения в изображение, а градиенты хорошо сжимает (итоговый объем 402 байта), так что в этом случае однозначно следует использовать именно его. Рамка вокруг рисунка добавлена для наглядности.
Рис. 6.6. Градиентный рисунок (header-gradient.png)
Картинка с силуэтными животными делается на прозрачном фоне и высотой 198 пикселов, нет смысла делать её на всю высоту шапки, поскольку она занимает лишь часть. Фрагмент изображения показан на рис. 6.7. Шахматное поле означает прозрачность.
Рис. 6.7. Фоновая картинка с прозрачностью (header-animal.png)
Поскольку сохранение этой картинки идет в формате PNG-8, у которого только один уровень прозрачности, в отличие от 256 уровней формата PNG-24, важно обеспечить корректное наложение на градиентный фон. Для этого при сохранении в Photoshop-е надо указать цвет краёв (Matte) близкий к средней части градиента, где идёт наложение силуэта. Примерно это цвет #9de1f0. В этом случае не возникнет грязных контуров вокруг деревьев и животных, а картинка при наложении на градиент будет восприниматься как единое целое.
Два рисунка для фона шапки подготовлены, пишем код HTML.
И стиль для элемента <header> и слоя header-bg .
В итоге объем файлов оказался 12,5 Кб, что даже меньше ожидаемого.
Название сайта
Название написано на облаке с растушёванными краями, что должно создать трудности при наложении на градиент. Есть два способа, как их обойти.
- Использовать формат PNG-24 при сохранении прозрачности.
- Сохранить рисунок в формате GIF или PNG-8 с фрагментом градиента, а затем наложить рисунок на градиент так, чтобы совпадение было с точностью до пиксела.
Очевидно, что второй способ имеет ряд недостатков — изображение нельзя сдвинуть даже на пару пикселов, оно привязано к градиенту, и если его градиент изменить, придётся менять и картинку. Так что сохраняем заголовок в формате PNG-24. Код HTML останется прежним, а стили расширятся.
Выравнивание по центру делается через свойство text-align , добавляемое к родителю тега <img> , а сдвиг вниз через свойство top . Чтобы это свойство сработало, необходимо для картинки задать относительное позиционирование с помощью свойства position со значением relative .
На главной странице сайта картинка с названием выводится как обычно, на остальных страницах она служит ссылкой на главную страницу. Для этого достаточно слегка изменить код:
Значение / у атрибута href указывает на главную страницу и работает только на веб-сервере, но никак не локально.