Добавление фона и favicon

В этой статье Вы научитесь устанавливать favicon и фон на Ваш сайт.

Что такое favicon? Favicon – это такое маленькое изображение, которое отображается около названия сайта. В разных браузерах оно отображается по-разному. Примеры favicon показаны на скриншоте.

Вам нужно найти и загрузить favicon на Ваш сайт.  Для этого можно использовать сайт https://www.iconfinder.com/. На этом сайте Вам нужно найти изображение, которое соответствует вашему сайту. Это изображение должно иметь формат .ico. Изображения могут быть двух размеров: 16×16 либо 32×32. Лучше выбрать размер 16×16. Введите ключевое слово, которое соответствует тематике вашего сайта. Поэтому для примера будет введено слово «tire» — шина.

После ввода ключевого слова вы попадаете на страницу с библиотекой иконок, соответствующих ключевому слову. На этой странице Вам нужно настроить размер в 16 пикселей. Выбираете свою иконку с форматом ico.

Кликаете по ней. Попадаете на страницу загрузки и скачиваете.

Затем заходите в папку, в которой сохраняются ваши загрузки, находите Вашу иконку и переименовываете ее в favicon.ico. Теперь ее нужно скопировать в папку «www» , т.е. там, где находится файл index.html.

Теперь в файле index.html нужно favicon подключить. Для этого кликните правой кнопкой мыши по файлу index.html и в выпадающем меню выберите строку «Edit with Notepad++». Вы попадете в программу Notepad++, где Вы до этого записывали данные для Вашего сайта. Конечный результат записи подключения показан на скриншоте.

В записи используется тег link, далее в атрибуте href указывается путь к этой иконке, в атрибуте relуказываетсяshortcuticon и указывается атрибут type. Если вы сейчас обновите страницу, favicon не появится. Это связано с тем, что информация о таких вещах как favicon обновляется достаточно редко. Для того чтобы проверить, что вы все сделали правильно откройте ваш сайт в браузере, в котором вы его еще не открывали и favicon появится.На этом установка favicon закончена. Теперь вы можете вывести фон вашего сайта. Для того чтобы вывести фон на страницу вашего сайта нужно зайти в папку «stiles» и кликнуть по файлу main.css. Это переведет вас в программу Notepad++. В поле программы вы указываете для селектора body, т.е. для всей страницы в целом,свойствоbackground. Далее его значение — url,в котором указываете путь к вашему фону bg.png (../images/bg.png–где ../ — это родительская директория, ведьmain.css лежит не внутри www, а на уровень ниже), и пишете«no-repeat», что говорит о том, что его повторять не нужно ни по вертикали, ни по горизонтали. Конечное выражение будет выглядеть таким образом:

После этого можно сразу посмотреть на результат.

Как видите, фон полностью не заполняет вашу страницу. Такое же белое поле будет внизу. Как это исправить? Необходимо внести дополнение в файл main.css. То есть, в выражение добавляется строка:

Когда вы обновите страницу, то увидите, что фон растянут. Эта строка показываетзначение свойстваbackground-size — cover. На этом установка фона на страницу Вашего сайта завершена.

Источник: книга Михаила Русакова