Содержание
Иконка сайта.
Что такое иконка сайта?
Для начала разберемся, что такое иконка сайта и где мы её можем наблюдать. Иконка сайта это небольшое изображение 16х16 пикселей в формате ico. которое можно увидеть в адресной строке, «закладках», «избранном» «истории», заголовках страниц в браузерах,
а также в результатах поиска поисковой системы Яндекс
Иконки сайтов так же можно увидеть в некоторых каталогах сайтов, сервисах аналитики и статистики сайтов, RSS лентах.. и прочих местах бескрайних просторов сети Интернет.
Основное предназначение пиктограммы это выделение Вашего сайта из массы других ресурсов. Красивая иконка делает сайт уникальным, оригинальным, привлекает внимание пользователей, а так же делает сайт более запоминающимся, так что отнеситесь к созданию иконки сайта подобающим образом, уж чего точно не стоит делать, так это пренебрегать созданием иконки вовсе, тем самым, позволяя браузерам лепить напротив Вашего сайта свою стандартную, скучную пиктограмму.
Как подключить иконку к своему сайту?
Для того чтобы указать иконку для страницы сайта необходимо связать эту страницу с подключаемым изображением — иконкой, с помощью тега <link>.
Напомню, тег <link> имеет атрибуты:
- href — Путь к файлу.
- rel — Определяет отношения между текущим документом и файлом, на который делается ссылка.
- shortcut icon — Определяет, что подключаемый файл является иконкой.
- stylesheet — Определяет, что подключаемый файл содержит таблицу стилей.
- application/rss+xml — Файл в формате XML для описания ленты новостей.
- type — MIME тип данных подключаемого файла.
И пишется в голове документа между тегами <head> </head> следовательно вся запись вместе приобретает следующий вид:
<head>
<link rel=»shortcut icon» href=»favicon.
ico» type=»image/x-icon»>
</head>
Где favicon.ico название иконки лежащей в корневой папке сайта.
Кстати иконку для сайта принято называть именно favicon.ico и располагать в корневой папке рядом с главной страницей сайта , дело в том что если иконка будет называться favicon.ico и лежать в корне сайта то для большинства браузеров этого уже вполне хватит чтобы отображать Вашу пиктограмму «по умолчанию» даже без строчки:
<link rel=»shortcut icon» href=»favicon.ico» type=»image/x-icon»>
Однако всё же лучше связывайте иконку со страницей сайта тегом <link>
Пример:
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Иконка сайта</title>
<link rel=»shortcut icon» href=».
./graphics/favicon.ico» type=»image/x-icon»>
</head>
<body>
<h2>Моя любимая страничка!</h2>
<p>Эта страничка использует индивидуальную иконку в виде сердечка.</p>
</body>
</html>
смотреть пример
В этом примере к странице мы подключаем иконку, которая лежит на уровень выше от документа в папке graphics. Таким способом каждой отдельной странице сайта можно назначить свою собственную пиктограмму.
Как самостоятельно изготовить файл favicon.ico?
Способ первый:
Найти в Интернете готовую подходящую иконку в коллекциях иконок..
Способ второй:
Изготовить иконку с помощью какого либо онлайн сервиса. Наиболее популярным сервисом, создающим иконки для сайта, в русскоязычном Интернете, является ресурс www.favicon.ru
Всё просто заходите на данный ресурс, загружаете большое размером изображение (желательно квадратное) только весом не более 300кб.
. ну например логотип сайта, жмете кнопку «Создать favicon.ico» на выходе скачиваете уменьшенную копию этого изображения 16х16 (а так же по желанию 32х32 и 48х48) пикселей в формате ico. Достаточно удобный ресурс позволяющий быстро создавать иконки приемлемого качества.
Ну и третий способ:
Лучше всего, конечно, нарисовать иконку самостоятельно, в которой каждый пиксель будет именно таким каким Вы желаете его видеть. Однако большинство популярных графических редакторов типа фотошопа не желают сохранять изображение в формате ico.. Но не беда!! В Интернете гуляет масса редакторов иконок хороших и не очень, платных и бесплатных, функционально простеньких и жутко навороченных.
Лично я пользуюсь не сильно хитрой программкой — редактором иконок, но пользуюсь ей не так, как задумывали авторы.. Я сначала рисую иконку в привычном мне фотошопе, сохраняю её в формате jpg, потом открываю это изображение с помощью этой нехитрой программки и сохраняю его же уже в формате ico. Короче использую программку в качестве «конвертора», а не графического редактора.
. программка называется IcoFX впрочем, как уже сказано выше существует куча других программ, так что не стоит останавливаться именно на этой!! Это я к ней приловчился, а Вы, может быть, найдете, что ни будь более удобное для себя.
Как изменить иконку (favicon) для сайта?
В инструкции рассмотрены следующие вопросы:
- Зачем нужен favicon для сайта?
- Где взять иконку для сайта?
- Как установить иконку на сайт?
- Как объявить Apple Touch icon и плитку для Windows 10?
Зачем нужен favicon для сайта?
Favicon (англ. favorite icon — избранный значок) — это небольшое изображение, которое ассоциируется с определенным вебсайтом. Вы, наверняка, замечали, что у каждого сайта есть такая иконка:
Вот где можно увидеть такую иконку:
- Закладки и вкладки браузера
- Результаты поиска Яндекс, Google
- Каталоги и рейтинги, которые загружают favicon сайтов
- Панель задач и рабочий стол операционной системы
Иконка сайта позволяет пользователям быстрее находить сайт во вкладках браузера или результатах поиска.
Favicon повышает узнаваемость сайта.
Где взять иконку для сайта?
По умолчанию все сайты uCoz имеют стандартный favicon. Чтобы получить свою иконку сайта, вы можете сделать следующее:
- Найти в интернете готовый файл иконки с расширением .ico (например, здесь)
- Перевести изображение в иконку с помощью онлайн сервисов конвертации или специальных программ
- Самостоятельно нарисовать иконку в графическом редакторе (например, в GIMP)
При создании файла favicon.ico важно знать, что иконка должна быть квадратной. Рекомендованные размеры 16х16, 32х32 и 48х48 пикселей.
Наряду с расширением .ico, в настоящее время используются иконки формата .png. Разрешение таких изображений может достигать 180×180 пикселей.
Как установить иконку на сайт?
Когда у вас будут готовы файлы иконок с расширением ico и png, с помощью файлового менеджера загрузите их в корень сайта (корень — это то, что вы видите первым при входе в файловый менеджер не переходя в другие директории):
Стандартная иконка favicon.
ico будет заменена на новую и через некоторое время вы сможете увидеть ее во вкладках браузера, в закладках и в результатах поисковых систем.
Важно! Чтобы иконка отобразилась сразу, достаточно открыть ее по прямой ссылке http://ваш-сайт.ру/favicon.ico и несколько раз выполнить комбинацию клавиш CTRL+F5. В результате вы в кеше обновите иконку на новую, далее при открытии главной страницы сайта просто обновите ее несколько раз и иконка в вкладке должна обновиться на новую.
Apple Touch icon используется на многих платформах за пределами iOS. Поэтому важно предусмотреть несколько размеров иконок, чтобы каждая платформа смогла выбрать подходящую:
<link rel="apple-touch-icon" href="apple-touch-icon-57x57.png"> <link rel="apple-touch-icon" href="apple-touch-icon-114x114.png"> <link rel="apple-touch-icon" href="apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" href="apple-touch-icon-144x144.png"> <link rel="apple-touch-icon" href="apple-touch-icon-60x60.png"> <link rel="apple-touch-icon" href="apple-touch-icon-120x120.png"> <link rel="apple-touch-icon" href="apple-touch-icon-76x76.png"> <link rel="apple-touch-icon" href="apple-touch-icon-152x152.png">
png">
<link rel="apple-touch-icon" href="apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" href="apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" href="apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" href="apple-touch-icon-152x152.png">
В Windows 10 есть плитки, иконки к которым могут быть объявлены следующим образом:
<meta name="msapplication-square70x70logo" content="tile-70x70.png" /> <meta name="msapplication-square150x150logo" content="tile-150x150.png" /> <meta name="msapplication-wide310x150logo" content="tile-310x150.png" /> <meta name="msapplication-square310x310logo" content="tile-310x310.png" />
html — Как добавить значок вкладки браузера (favicon) для веб-сайта?
Существует ряд различных значков и даже экранов-заставок, которые можно установить для различных устройств. В этом ответе рассказывается, как поддержать их всех.
Вот несколько фрагментов, которые я использовал, с соответствующими ссылками на места, где я собирал информацию.
См. мой блог для получения дополнительной информации и дополнительной информации о шаблоне проекта ASP.NET MVC Boilerplate со всем этим, встроенным прямо из коробки (включая примеры файлов изображений).
Добавьте следующую разметку в заголовок html. Закомментированные разделы являются необязательными. В то время как незакомментированные разделы рекомендуется охватывать все варианты использования значков. Не бойтесь, больше всего, если это комментарии, чтобы помочь вам.
png">
png">
png">
png" media="(ширина устройства: 768px) и (высота устройства: 1024px) и (ориентация: книжная) и (-webkit-device-pixel-ratio: 2)">
Мой файл browserconfig.xml. Полное объяснение выше.
0" encoding="utf-8"?> <конфигурация браузера>
<плитка> #5cb95c
Мой файл manifest.json. Полное объяснение выше.
{
"name": "Шаблон ASP.NET MVC (обязательно! Обновите это)",
"значки": [
{
"src": "\/Содержимое\/иконки\/android-chrome-36x36.png",
"размеры": "36x36",
"тип": "изображение\/png",
"плотность": "0,75"
},
{
"src": "\/Содержимое\/иконки\/android-chrome-48x48.png",
"размеры": "48x48",
"тип": "изображение\/png",
"плотность": "1.0"
},
{
"src": "\/Содержимое\/иконки\/android-chrome-72x72. png",
"размеры": "72x72",
"тип": "изображение\/png",
"плотность": "1,5"
},
{
"src": "\/Содержимое\/значки\/android-chrome-96x96.png",
"размеры": "96x96",
"тип": "изображение\/png",
"плотность": "2.0"
},
{
"src": "\/Содержимое\/иконки\/android-chrome-144x144.png",
"размеры": "144x144",
"тип": "изображение\/png",
"плотность": "3.0"
},
{
"src": "\/Содержимое\/иконки\/android-chrome-192x192.png",
"размеры": "192x192",
"тип": "изображение\/png",
"плотность": "4.0"
}
]
}
Список файлов в проекте (Обратите внимание, что имена этих файлов важны, если вы решите поместить некоторые из них в корень вашего проекта, чтобы избежать использования вышеуказанных метатегов):
favicon.ico
браузерconfig.xml
Контент/Изображения/
Android-хром-144x144. png
Android-хром-192x192.png
Android-хром-36x36.png
Android-хром-48x48.png
Android-хром-72x72.png
Android-хром-96x96.png
apple-touch-icon.png
яблоко-тач-значок-57x57.png
яблоко-тач-значок-60x60.png
яблоко-тач-значок-72x72.png
яблоко-тач-значок-76x76.png
яблоко-тач-значок-114x114.png
яблоко-тач-значок-120x120.png
яблоко-тач-значок-144x144.png
яблоко-тач-значок-152x152.png
яблоко-тач-значок-180x180.png
apple-touch-icon-precomposed.png (180x180)
favicon-16x16.png
favicon-32x32.png
фавикон-96x96.png
favicon-192x192.png
manifest.json
mstile-70x70.png
mstile-144x144.png
mstile-150x150.png
mstile-310x150.png
mstile-310x310.png
яблоко-тач-стартап-изображение-1536x2008.png
яблоко-тач-стартап-изображение-1496x2048.png
яблоко-тач-стартап-изображение-768x1004.png
яблоко-тач-стартап-изображение-748x1024.png
яблоко-тач-стартап-изображение-640x1096.png
яблоко-тач-стартап-изображение-640x920. png
яблоко-тач-стартап-изображение-320x460.png
Всего накладных расходов
Если вы удалите комментарии, это 3 КБ дополнительного HTML, если вы не поддерживаете заставки, это 1,5 КБ. Если вы используете сжатие GZIP для своего HTML-контента, что в наши дни должны делать все, у вас остается около 634 байт накладных расходов на запрос для поддержки всех платформ или 446 байт без заставок. Я лично считаю, что стоит поддерживать устройства IOS, Android и Windows, но это ваш выбор, я просто даю варианты!
Боковое примечание о текущем веб-значке/заставке/настройках Ситуация
Эта ситуация со специфическими значками, экранами-заставками и специальными тегами для управления веб-браузером или закрепленными значками нелепа. В идеальном мире мы все использовали бы файл favicon.svg, который хорошо выглядел бы в любом размере и мог бы быть помещен в корень страницы. Только FireFox поддерживает это на момент написания (см. CanIUse. com).
Однако в наши дни значки — не единственная настройка, есть несколько других настроек, зависящих от производителя (показаны выше), но файл favicon.svg подходит для большинства случаев использования.
Обновление
Обновлено для включения новой версии Android/Chrome M39+ favicon/темы. Интересно, что они использовали тот же подход, что и Microsoft, но используют файл JSON вместо XML.
css — HTML — Добавить значок на вкладку браузера
Задать вопрос
спросил
Изменено
8 лет, 3 месяца назад
Просмотрено
73 тысячи раз
Я делаю задание для класса, и нам поручили сделать веб-страницу. Все прошло хорошо с созданием страницы, но я изо всех сил пытаюсь получить значок на вкладке браузера.
Он поручил нам получить иконку из одной из наших папок
Это из его указаний
«Обратите внимание, чтобы отобразить вашу иконку, вы вставляете эту строку в свой раздел заголовка html»
«Предполагается, что значок вашей компании находится в папке с изображениями»
Я пробовал много вариантов этого, но это не сработает.
Мой называется favicon(1).ico
Вот одна из моих попыток
Вот еще.
У меня есть папка на рабочем столе под названием «Вопрос 1», и в этой папке у меня есть файл HTML для этого назначения и еще одна папка с названием «изображения». В файле «images» у меня есть значок «favicon(1).ico».
Можно ли взять этот значок из моей папки и поместить в свой код?
- HTML
- CSS
- иконки
1
Это сниппет, который я использую всякий раз, когда мне нужно настроить фавикон: