Задать вопрос
@mrmelsik
Верстальщик

Как сделать иконку сайта с помощью css?

Как сделать иконку сайту с помощью css вместо этой: skrinshoter.ru/s/150919/amKPnFrM
  • Вопрос задан
  • 712 просмотров
Подписаться 1 Простой 8 комментариев
Пригласить эксперта
Ответы на вопрос 3
@66demon666
Сетевой админ, АТС-админ
Иконка для сайта - изображение в формате ICO и именем favicon.ico, никакого css.
Ответ написан
baks090780
@baks090780
Верстальщик
1. Создайте необходимую картинку например в фотошопе или другом графическом редакторе, желательно квадратную (равностороннюю), желательно 512x512px или около такого размера, можете сделать с прозрачным фоном PNG.
2. Переходим по ссылке: https://www.favicon-generator.org/ , там выбираем наш графический файл и жмем на кнопку [Create Favicon]
5d7ea315cd9d3081327343.jpeg
Далее система создаст все необходимые файлы иконок и поместит их в архивный файл, который необходимо скачать, распаковать и залить например в корень своего сайта.
5d7ea4905840c879636103.jpeg
После этого необходимо будет вставить еще сгенерированный код с того сайта в шаблон своего сайта между тегами <head> и </head> - и будет тебе СЧАСТЬЕ!
<!doctype html>
<html lang="ru">
<head>

	<meta charset="utf-8">
	<title>Document</title>

	<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
	<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
	<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
	<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
	<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
	<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
	<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
	<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
	<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
	<link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
	<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
	<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
	<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
	<link rel="manifest" href="/manifest.json">
	<meta name="msapplication-TileColor" content="#ffffff">
	<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
	<meta name="theme-color" content="#ffffff">

</head>
<body>
	
	Тут содержание вашего сайта

</body>
</html>

Пути к иконкам при желании можно изменить, для этого надо залить в любую необходимую папку, и естественно пути в скопированном коде тоже надо будет изменить.
Ответ написан
Комментировать
anatoly_kulikov
@anatoly_kulikov
Помог ответ? Отметь решением!
Обычно браузер по дефолту запрашивает файл favicon.ico из корня сайта. Можете в корень такой файл положить и всё.

А ещё можно взять любой редактор и автозаменой нужную строчку добавить.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы