Всем привет, с вами Кейта. Сегодня, мы с вами сделаем экспресс-статью без лишней воды и мыла. Как же добавить логотип на свой сайт.
Экземпляр сайта с работающим логотипом(НЕ РЕКЛАМА):
http://cafe.keita.fun (Домен неактуален)
Для начала сделайте или скачайте файл в формате png с изображением без фона. Например чашку кофе в моём случае. Зайдите на любой интернет-сайт по изменению формата изображения. Наберите в браузере: "png to ico online". На любой из этих сайтов вставьте ваш файл, нажмите "ОК", затем скачайте получившийся в формате .ico .
Переместите этот файл в папку CSS вашего сайта, затем переименуйте его в favicon , переименовали? Хорошо, давайте дальше!
Далее, открываем любой текстовой редактор, которым вы пользуетесь. Через него открываете ваш файл html, если у вас их несколько, тогда вносите изменение для всех. В разделе <head> от начала до конца </head> вы должны вставить следующую строчку:
<link rel="SHORTCUT ICON" href="css/favicon.ico" type="image/x-icon">
В моём случае это выглядело так:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Кофейня для продажи</title>
<link rel="stylesheet" href="css/style.css">
<link rel="SHORTCUT ICON" href="css/favicon.ico" type="image/x-icon">
</head>
В вашем может выглядеть немного по иному. Сохраняем через CTRL+S , если нужно проделываем тоже самое и для других файлов формата .html на вашем сайте тем же методом. Открываем ваш сайт(если ещё не загружен на хостинг, если уже загружен - обновите файлы, так что открываем на локальном компьютере простым 2х нажатием на index.html)
Мы должны увидеть это. Наш логотип появился, ура!!!
Обновлено в 2023:
И снова здравствуйте, теперь давайте научимся добавлять аватар ещё и при просмотре с iPhone устройств! :)
Используем любой сайт, который найдёте в свободном доступе с названием "Сгенерировать свой аватар для сайта с iPhone" либо переходим по ссылке на сайт, которым пользуюсь я:
Загружаем сюда свой аватар в формате png, затем нажимаем на кнопку "Iconify"
После распаковки скачанного архива с папкой iconified в папку с вашим сайтом, переходим в любой удобный вам текстовый редактор и открываем там ваш index.html.
Добавляем код ниже в ваш <head>
<!-- =========================================
fav & icons for iPhone and iPad
========================================== -->
<link rel="apple-touch-icon" href="iconified/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="57x57" href="iconified/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="iconified/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="iconified/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="iconified/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="iconified/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="iconified/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="iconified/apple-touch-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="iconified/apple-touch-icon-180x180.png" />
Сохраняем изменения на CTRL+S.
Объясню, что же мы всё-таки добавили: мы добавили аватары для устройств Apple, которые могут использовать именно эти файлы и их размеры без масштабирования, уже созданные вами. Если бы вы это не сделали, возможно аватар не был бы виден там вообще или мог быть в плохом качестве.
И так, теперь мы с вами поняли и совершили - создание и установку логотипа на html&css сайт с применением #html всем спасибо за внимание. С вами был Кейта, в прошлой статье я рассказал как сделать первый сайт, для которого мы сейчас делали логотип. В следующей статье будет: "Как установить сайт на хостинг?"