Иконка на сайте: Иконка сайта.

Сайт 

Содержание

Иконка сайта.

Что такое иконка сайта?

Для начала разберемся, что такое иконка сайта и где мы её можем наблюдать. Иконка сайта это небольшое изображение 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.

<link rel=»SHORTCUT ICON» href=»/favicon.ico» type=»image/x-icon»>

Название «Favicon» — это английское сокращение от слов FAVorites ICON, что в переводе обозначает «значок для избранного». Иконка веб сайта в браузере отображается в адресной строке, непосредственно перед url-адресом страницы. Так же иконку веб сайта в браузере можно увидеть во вкладках и рядом с закладками.

Если же владелец ресурса никогда не задавался вопросом, как добавить иконку на сайт, то по умолчанию в качестве картинки будет отображаться значок браузера.

Помимо отображения в браузерах, Favicon отображается и в поисковиках: иконка сайта в Яндексе ставиться слева от названия ресурса, аккурат напротив цифры, показывающей место ресурса в выдаче по введенному пользователем поисковому запросу.

Итак, после того, как стало понятно, зачем нужна иконка для сайта и где она отображается, можно перейти к описанию того,

как сделать иконку для сайта самостоятельно и как добавить ее на сайт.

Создание иконки для сайта

Существует несколько способов, как сделать иконку для сайта. Самым простым вариантом является создание иконки для сайта с помощью онлайн сервисов, в которые загружается квадратное изображение, из которого система автоматически формирует картинку выбранного размера в нужном формате. Один из таких сервисов по созданию Favicon’ок онлайн находится здесь.

Как еще сделать иконку для сайта? Весьма популярно создание иконки для web сайта с помощью специальных программ, позволяющих редактировать изображения по своему усмотрению. Обычно программы отличаются между собой инструментами, встроенным функционалом и, конечно, пользовательским интерфейсом. Одни программы для создания иконок на сайт позволяют одновременно редактировать несколько картинок, другие дают возможность использовать градиентную заливку или 3D эффекты, а третьи имеют простой и понятный интерфейс. Скачать программу для создания иконок можно как здесь, выбрав любую из предложенных, так и поискав в поисковиках:

Так же можно самостоятельно нарисовать иконку для сайта в фотошопе. Данная универсальная программа для редактирования изображений позволяет рисовать все что угодно. Можно рисовать лого фирмы, писать буквы особыми шрифтами и т.д., главное помнить, что нарисованная иконка сайта так или иначе должна быть связана с общим оформлением ресурса или с его контентом, ведь именно тогда она будет лучше запоминаться вашим посетителям.

Для того, чтобы сохранить нарисованную иконку для сайта в фотошопе, нужно нажать «сохранить как» и выбрать специальный формат .ico.
Если вы не обнаружили у себя этот формат, не отчаивайтесь — просто стандартный набор форматов изображений Photoshop’а не включает его в себя. Но его очень легко добавить, достаточно лишь скачать плагин ico-формата и распаковать его в папку C:ProgramFilesAdobeAdobePhotoshopCS2Plug-InsFileFormats, после чего при сохранении изображений командой «Сохранить как» в списке доступных форматов появится строчка ICO (Windowsicon)(*.ICO).

Иконки для сайта: размер 16х16 или 32х32?

Размер иконки сайта обычно составляет 16х16 пикселей, допускается так же использование размера 32х32. Но стоит учесть, что в браузере в любом случае рисунок будет уменьшен и приведен к формату 16х16 пикселей, так что не стоит даже пытаться втиснуть туда высокохудожественное изображение, его все равно не будет видно на маленьком значке, намного лучше будут смотреться читаемые буквы и логотипы.

Формат иконки для сайта

На сегодняшний день универсальным форматом иконки для сайта считается формат .ico, так как именно его поддерживают все самые популярные браузеры: Google Chrome, Internet Explorer, Firefox, Opera и Safari. Следующие по универсальности форматы иконки для webсайта – PNG, JPEG, и GIF их поддерживают все браузеры, кроме Internet Explorer’а. А вот анимированные иконки для сайта GIF-формата поддерживают только Firefox и Opera.

Все возможности поддержки браузерами форматов иконок для сайтов представлены ниже:

Когда картинка создана и сохранена в нужном формате, можно переходить к тому, как установить иконку на сайт.

Как добавить иконку на сайт? Установка иконки на сайт

Первым нужно сделать не что иное, как добавить иконку на сайт в прямом смысле слова. Нужно загрузить изображение иконки, сохраненное в выбранном формате, на сервер: в корневую папку сайта (обычно она называется public_html). Как загрузить иконку на сайт? Это можно сделать с помощью специальных программ, помогающих соединиться по FTP или же в менеджере файлов, через панель управления сайтом.
После того, как вставка иконки на сайт произведена, необходимо сделать так, чтобы изображение отображалось в браузере. Для установки иконки на сайт (отображения в браузере) необходимо прописать специальный код и поместить его в правильное место.

Html код иконки для сайта

<link rel=»SHORTCUT ICON» href=»/favicon.ico» type=»image/x-icon»>

Обратите внимание на тип картинки иконки, его нужно прописывать в «type».
Например, если у вас картинка иконки имеет формат GIF, тогда код будет выглядеть следующим образом:

<link rel=»SHORTCUT ICON» href=»/favicon.gif» type=»image/gif»>

Данный Html код иконки для сайта нужно вставить в произвольном месте между тегами <head> и </head> в файл страницы, на которую нужно поставить иконку.

Если вам нужна в wordpress иконка сайта, то необходимо отредактировать файл header.php, в который вставляется этот же код.
Итак, вы теперь знаете, как установить иконку на сайт самостоятельно.

Как поменять иконку сайта? замена иконки сайта

Если вас интересует, как изменить иконку сайта, значит, она уже есть у вас на сайте. Смена иконки сайта осуществляется практически по той же схеме, что и добавление. Для замены иконки сайта первым делом также необходимо нарисовать новую картинку и сохранить ее в нужном формате. Далее сохраненное изображение добавляется на сайт в корневую папку. После этого необходимо найти файл, где уже есть прописанный html код иконки для сайта между тегами и проверить его правильность. Если в коде прописаны верный путь к новой картинке, а так же ее название и формат, то браузер будет отображать изображение на вкладках, сразу после сохранения файла и обновления страницы.
Итак, теперь вы знаете и как сменить иконку сайта на новую.

 

Статьи по теме:

Самостоятельное продвижение сайтов в Интернете
Как закрыть внешние ссылки от индексации
Как подобрать ключевые слова на сайт
Где взять контент для сайта
Какой URL добавить на страницу

Иконки для сайта. Как установить фавикон (favicon)

Содержание:

Что такое «фавикон» для сайта

Практически каждый веб-мастер должен знать, что такое «фавикон» для сайта и какова его функция. Но есть и те, кто слышит об этом впервые. 

Эта статья написана специально для тех, кто незнаком с этим понятием, или хочет освежить/дополнить свои знания про иконки для сайта.

Итак, само название «фавикон» – это то, что осталось от исходного «favicon», так сказать – сленговая версия, которая популярна в русскоязычном интернете.
Favicon – для сайта является его своеобразной визитной карточкой. Расшифровывается как «favourite icon» (если дословно, то это «любимое/избранное изображение»).

По факту это небольшая картинка, которая отображается:

  1. В результатах поиска рядом с названием отображаемой странички веб-ресурса.


     

  2. В адресных строках почти всех браузеров непосредственно перед адресом.


     

  3. Во вкладке браузера, соответствующей отображаемой странице, рядышком с ее названием.


     

  4. В закладках браузера.

Зачем нужен favicon для сайта

Если установить «фавикон» на сайт ничего сверхъестественного не случится. Но некоторые положительные моменты все же будут:

  • Повышение узнаваемости веб-ресурса интернет-пользователями (если сделать иконку из картинки, которая будет выделяться среди других и легко запоминаться).
     
  • Увеличение показателя CTR веб-ресурса (тоже полезно).
     
  • Косвенное улучшение поведенческих факторов вследствие подсознательного выбора пользователем Вашего веб-ресурса в результатах поисковой выдачи (если он будет выделяться).

Как сделать «фавикон» для сайта

Для того чтобы сделать иконку из картинки, которую Вы выберете, нужно соблюсти некоторые условия:

  1. Назвать ее «favicon.ico».
  2. Размер иконки должен составлять 16х16 пикселей.
  3. Разместить favicon.ico для сайта в корне веб-ресурса.
  4. Нужно сделать иконку в формате .ico. 

Другие варианты места размещения и формата тоже возможны, но для этого придется вносить изменения в HTML-код страничек в зависимости от выбранного типа изображения:


Создать «фавикон» можно вручную, используя практически любой из доступных графических редакторов и минимальные знания в работе с кодом.
В случае если Вы не хотите разбираться с тем, как сделать иконку для сайта самому, всегда есть возможность воспользоваться одним из многочисленных онлайн-сервисов, созданных специально для этой цели.

На них обычно можно выбрать готовую favicon.ico для сайта или же воспользоваться онлайн-генератором, который может сделать иконку в формате ico из картинки на Ваш выбор:

Как создать новый «фавикон» или вообще его удалить

Для того, чтобы заменить старую иконку для сайта на новую или вовсе от нее избавиться, нужно всего лишь удалить favicon.ico из корневого каталога и, если это надо, загрузить туда же новый файл.

Во время следующего визита поисковый бот проиндексирует изменения и новый «фавикон» для сайта начнет отображаться везде, где это возможно.

Небольшой итог

Независимо от способа, который Вы выберете, чтобы создать favicon.ico для сайта, это простейшее действие поможет существенно улучшить узнаваемость Вашего веб-ресурса среди сотен одинаковых конкурентов. А это однозначно не будет лишним!
Спасибо за внимание! Не забудьте «лайкнуть»!

 

Что такое favicon (иконка сайта) и как ее добавить

Каждый сайт должен иметь свой значок или иконку (favicon). Несмотря на то, что они небольшого размера, фавиконки оказывают огромное влияние – они используются браузерами при визуализации вашего сайта (или бренда). Фавиконы используются не только для отображения значка сайта на вкладке браузера, они также могут быть использованы для закладок и в плитке последних посещенных сайтов. Из сегодняшней статьи вы узнаете исчерпывающую информацию об favicon: что это такое, зачем нужно, как создать и как разместить на своем сайте.

 

 

Что такое фавикон (favicon)

Favicon (дословный термин любимая иконка) – это маленькая картинка, которая используется браузерами для брендирования вашего сайта/компании. Если favicon установлен на вашем сайте правильно, браузеры будут использовать его по мере необходимости в разных местах. Сюда относятся вкладки браузера (рядом с заголовком страницы), адресные строки (рядом с URL-адресом), закладки и так далее.

Иногда фавиконы называют Значки сайтов, что является полезной характеристикой, которая информирует о том, что данный значок будет использоваться для представления вашего сайта в различных случаях.

Ниже пример файла-иконки favicon, который используется на нашем сайте:

 

 

Важность favicon

Фавиконы (или значки сайтов) похожи на логотип компании в том смысле, что он может играть небольшую, но важную роль для брендирования вашего сайта. Сайт, на котором отсутствует значок, может показаться менее заслуживающим доверия пользователей (поскольку мы все привыкли их видеть). С другой стороны, сайт, на котором есть этот значок, предоставит пользователю четкое визуальное представление о сайте. Подумайте об этом, ведь одна картинка (даже небольшая) стоит тысячи слов.

 

 

Формат файла favicon

Есть несколько допустимых форматов изображений для значков favicon, но два самых популярных – это ico и png. Эти форматы имеют наибольшую поддержку браузерами и поддерживают прозрачный фон для значка (в отличие от jpg).

 

Формат ICO

Традиционно иконки создаются в виде файла ICO (favicon.ico). Файл ICO позволяет хранить несколько изображений разных размеров в одном файле, что позволяет браузеру (на ПК и в мобильных) выбирать необходимый размер из доступных изображений. Проблема с форматом ico заключается в том, что не многие люди знают, что это такое или как его создать. Вы можете создавать файлы ICO в фоторедакторе, таком как Gimp или Фотошоп, но самым простым способом будет использование онлайн-генератора значков, который делает этот процесс действительно простым. В сети Интернет вы сможете найти достаточное количество таких онлайн-генераторов.

 

 

Формат PNG

Начиная с HTML5, формат PNG является приемлемым форматом для значков сайтов, и на сегодня все основные браузеры поддерживают его. Возможно, это будет лучшим вариантом в будущем, так как формат png имеет более широкую популярность в сети. Однако, поскольку все браузеры (даже старые) поддерживают ICO, лучше использовать версии и png, и ico, чтобы избежать нежелательных 404-х ошибок.

 

 

Размер файла favicon

Вашему сайту необходимо иметь несколько размеров изображений фавиконов, чтобы оптимально отображать их в различных случаях:

  • 16x16px, 32x32px – стандартные размеры favicon.
  • 180x180px – значок для iOS.
  • 192x192px – значок для Android/Chrome.
  • 270x270px – значок для плитки среднего размера в Windows.

 

 

Именование и место расположения файла favicon

Возможно, вы помните дни, когда фавикон должен был иметь только одно, точное имя файла, — favicon.ico. И он должен был располагаться только в корневом каталоге вашего сайта. Но, времена изменились. Теперь вы можете назвать этот файл как угодно, сохранять его в других форматах и в любом месте на вашем сайте.

Примечание: Размещение favicon.ico в корневом каталоге все еще является хорошей идеей в качестве запасного варианта.

 

 

Как добавить значок favicon на свой сайт

Если вы уже создали этот файл (или файлы), вам осталось пройти только два шага.

Шаг №1: загрузка файла favicon на сервер хостинга

Во-первых, вам нужно загрузить файл favicon.ico на сервер, на котором размещен ваш веб-сайт (используя, например, FTP-клиент или же панель управления хостингом). Как мы уже упоминали ранее, это может быть корневой каталог сайта, либо же другая папка. Главное позже указать правильную ссылку на расположение файла.

 

Шаг №2: добавление кода с тегом информации о файле favicon

Во-вторых, вам нужно разместить тег подключения favicon в шапке сайта (в секции <head>). Ниже примеры тегов для файлов favicon, вы можете использовать их все, если у вас есть несколько размеров этого файла:

<head>
……..
  <link rel="apple-touch-icon" href="{ВАШ_ДОМЕН}/apple-touch-icon.png">
  <link rel="icon" type="image/png" href="{ВАШ_ДОМЕН}/favicon-32x32.png">
  <link rel="icon" type="image/png" href="{ВАШ_ДОМЕН}/favicon-16x16.png">
  <link rel="icon" type="image/x-icon" href="{ВАШ_ДОМЕН}/favicon.ico">
……..
</head>

 

 

Добавьте этот код в исходный код вашего сайта, только не забудьте заменить {ВАШ_ДОМЕН} на адрес своего сайта. Также, не забудьте об правильном расположении и именовании ваших файлов favicon.

 

 

 

Заключительная мысль

Из сегодняшнего урока вы узнали несколько основных моментов о добавлении значков favicon на свой сайт. Мы надеемся, что данная информация поможет вам прояснить некоторые вещи о значках сайта (иконках сайта) favicon. Если у вас есть какие-то вопросы по данной теме, не стесняйтесь задавать их в разделе комментариев ниже.

Спасибо, что читаете нас!

 

 

 

Как добавить иконку (favicon) на сайт?

Профессиональной разработкой сайта можно назвать только такой процесс, при котором предусматриваются возможности и подготавливаются инструменты продвижения. Одна из необходимых деталей, без которых работу нельзя назвать завершенной — создание и загрузка иконки favicon.

Что такое favicon

Favicon — это устоявшееся в интернете сокращение от английского словосочетания favorites icon, что можно вольно перевести как «иконка для избранного». Это небольшое изображение размером 16 на 16 пикселей, которое выводится рядом с заголовком сайта на вкладках браузера, в сохраненных закладках и в некоторых поисковых системах.
 
Favicon задумывалась как способ быстрой идентификации ресурса, но в итоге они стали действенным инструментом раскрутки сайтов, привлечения к ним внимания. Красивая и аккуратная иконка рядом с названием страницы в выдаче поисковой системы позволяет выделиться на фоне конкурентов и получить нового посетителя.

Как добавить Favicon

Прежде чем добавлять favicon на сайт, его необходимо создать. Есть три основных способа сделать это.
  • Нарисовать иконку с нуля.
  • Конвертировать готовое изображение в иконку.
  • Заказать отрисовку уникальной иконки у дизайнера.
Для первых двух способов вам понадобится либо специальный графический редактор, либо онлайн-сервис, предназначенный для создания иконок. Так или иначе, результатом этого этапа должен стать графический файл с названием favicon.ico разрешением 16 на 16 пикселей.
 
После этого остается лишь правильно загрузить иконку. Её нужно поместить в корень сайта — папку на сервере, в которой лежат все файлы ресурса. Сделать это можно по протоколу FTP или через панель управления хостингом. В случае работы на локальном сервере, можно просто скопировать и вставить файл в нужную папку.
 
Может возникнуть резонный вопрос: как добавить иконку на сайт, если по каким-то причинам копирование файла в корневую директорию невозможно или нежелательно? Такое бывает, если ресурс работает на какой-либо CMS (системе управления контентом). Выбор папки, в которую следует поместить иконку, зависит от используемой системы. Обычно это директория шаблона оформления. В его коде уже должно быть указание на нестандартное расположение фавикона, но если его нет, следует добавить код между тегами и в файле, описывающем структуру шапки страницы.
 
После всех проделанных действий достаточно будет перезагрузить страницу (иногда может потребоваться очистить кэш), чтобы увидеть иконку в заголовке браузера. В поисковых системах изменения могут отобразиться не сразу, а лишь спустя какое-то время. Это нормально и не стоит переживать: если иконка видна в шапке, вы все сделали правильно.

Иконка сайта

Иконка сайта помогает найти его в результатах поиска и вкладках браузера. Ясная, подходящая к теме сайта иконка добавляет ещё один «плюс в карму» сайта. Её отсутствие или «дефолтная» иконка хостинга — демонстрирует небрежность в работе с сайтом.

Какой должна быть иконка?

Иконка имеет специальное расширение — ico. Это расширение используется и для иконок компьютерных программ. Иконки программ могут быть многостраничными — для разных размеров иконки. Для иконки сайта этого не нужно — её размер всегда 16×16 пикселей.

Уместить в квадрат из 256 пикселей (16×16) полноценное изображение не получится. Тени, переходы цветов должны быть минимизированы. Но и просто цветной квадратик не подойдёт — он не поможет найти сайт по иконке. Подумайте, как простой графический символ, буква, цифра, знак может достойно отразить содержание вашего сайта? Обычно в иконке используются цвета, использованные в оформлении сайта.

Анимированные иконки — дурной тон.

Где лежит иконка на сайте?

Иконку нужно закачать не только в папку шаблона сайта и панели управления, но и в корень сайта. Она всегда должна называться favicon.ico. По адресу: http://вашСайт/favicon.ico её ищут сторонние сервисы. Яндекс, кстати, собирает иконки сайтов c одной страницы своей выдачи и склеивает их все в одну картинку: для быстроты загрузки страниц поиска.

Контент-менеджеру удобнее работать с сайтом, если иконка пользовательской части отличается от иконки страниц панели управления.

Как создать иконку сайта?

Я пользуюсь сервисом favicon.ru. Раньше он умел только преобразовывать изображения в формат ICO. Теперь можно нарисовать иконку непосредственно на сайте. Возможность закачать свою — осталась. Появилась возможность отредактировать закаченное изображение перед преобразованием, например, удалив фоновый цвет, чтобы сделать прозрачную иконку. Очень удобно, пользуйтесь на здоровье!

Сувениры

Изображения в формате ico — это ещё и разные «состояния» указателя мыши. У Артемия Лебедева можно купить себе, например, такой магнит.

Добавляем иконки сайта для iPhone, iPad и Android

Если Ваш сайт достаточно популярен, то многие пользователи заходят на него даже с телефонов и планшетов!

Многие добавляю его в закладки на рабочий стол телефона или планшета, для того чтобы на рабочем столе отображалась красивая иконка вашего сайта, необходимо:

Первым делом, нам необходимо создать нужную иконку в формате .png. Рисуете (или подбираете) ее. Желательно, в хорошем разрешении.

Качество (разрешение) экранов устройств от Apple постоянно растет и меняется, поэтому нужно оптимизировать эти «картинки» под разные устройства.

Второе, необходимо сделать иконки разных размеров для разных устройств:

для старых iPhone размер иконки должен быть 57х57, для новый, начиная с 4-го действуют следующие размеры:

  • 60х60 — IPhone
  • 76×76 -iPad
  • 120×120 — iphone-retina
  • 152×152 — ipad-retina

Третье, вставить в код указав пути к картинкам:

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" href="touch-icon-ipad-retina.png">

Safari на iOS 7 не добавляет эффекты к иконкам. А старые версии Safari добавляли эффекты для иконок , чтобы эффект не применялся — нужно к именам файлам добавить —precomposed.png

А что Android!?:

Все дело в том, что Android-девайсы также подхватывают файлы apple-touch-icon.png и несмотря на наличие в названии слова «apple» 🙂

Справедливости ради, хочу заметить, что ОС Android намеренно не ищет эти иконки, а только в том случае, если пользователь решил добавить сайт на «рабочий стол».

В заключении — если не хотите заморачиваться со вставкой кода, подготовкой картинок разного размера, то просто закиньте в корень сайта картинку (размером 60 на 60 пикселей) с названием «apple-touch-icon.png». Это самый простейший способ.

Для быстрого автоматического создания иконок для сайта

Мы советуем использовать сервис ICONOGEN

Укажите файл с иконкой и сервис быстро сделает иконки разных размеров:

Файлы можно скачать архивом.

Сервис так же генерирует html код для вставки в шаблон сайта:

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-60x60. png">
<link rel="apple-touch-icon" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/favicon-16x16.png">
<link rel="icon" type="image/png" href="/favicon-32x32.png">
<link rel="icon" type="image/png" href="/favicon-96x96.png">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png">
<meta name="msapplication-square70x70logo" content="/smalltile.png" />
<meta name="msapplication-square150x150logo" content="/mediumtile.png" />
<meta name="msapplication-wide310x150logo" content="/widetile.png" />
<meta name="msapplication-square310x310logo" content="/largetile.png" />

Руководство для новичков по добавлению значка на свой веб-сайт

Интернет сайт

время доступа

9 марта 2021 г.

песочные часы пустые

2мин чтения

Вы можете встретить термин favicon, когда речь идет о веб-дизайне и разработке. Но что это такое? Что ж, в этой статье мы ответим на ваш вопрос и покажем, как добавить значок на свой сайт. Давайте начнем!

Что такое Favicon и почему он важен?

Проще говоря, значок — это логотип вашего веб-сайта, который отображается рядом с мета-заголовком на вкладке вашего браузера.Другими словами, вместо того, чтобы показывать пустой значок документа в браузере, на вашем веб-сайте будет отображаться значок вашего официального веб-сайта.

Большинство веб-сайтов обычно используют свой логотип в качестве значка. Если на вашем веб-сайте нет логотипа, вы можете просто создать его с помощью бесплатного конструктора логотипов. Таким образом, ваши посетители легко заметят ваш веб-сайт, когда они открывают множество вкладок в одном окне браузера. К тому же ваш сайт будет выглядеть более профессионально.

Как добавить значок на свой сайт?

Выберите один из двух способов ниже, чтобы добавить значок на свой веб-сайт!

Разрешить браузерам автоматически создавать значок

Самый простой способ добавить значок на свой сайт — загрузить его как .png или .ico из Файлового менеджера вашего хостинга . Для этого выполните следующие действия:

  1. Подготовьте квадратное изображение в формате .png или .ico для логотипа вашего веб-сайта.

    Если у вас уже есть файл .png и , используйте его. Однако конвертируйте изображение в формат .ico с помощью ConvertICo.com, если вам когда-нибудь понадобится.

  2. Переименуйте изображение .png или .ico в favicon .

    Большинство браузеров автоматически обнаруживают файл favicon.png и favicon.ico , расположенный в каталоге вашего веб-сайта, как значок вашего веб-сайта. Так что кодировать не нужно.

  3. Получите доступ к папке public_html , зайдя в hPanel, затем File Manager -> Go To File Manager .
  4. Загрузите файл favicon.png или .ico в папку public_html . Перезагрузите свой сайт, и вы увидите значок.

Загрузите обычное изображение и отредактируйте файл header.php вашей темы

Кроме того, если у вас есть изображение, отличное от формата .png или .ico (jpg, BMP, gif и т. Д.), Вы также можете использовать его в качестве значка своего веб-сайта. Однако вам необходимо изменить файл header.php в папке с используемой в данный момент темой. Для этого выполните следующие действия в hPanel.

  1. Как только у вас будет квадратное изображение в качестве логотипа, перейдите в Диспетчер файлов -> Перейти в Диспетчер файлов -> public_html .
  2. Загрузите изображение в папку public_html .

    Вы можете сохранить исходное имя изображения или переименовать его в favicon . Рекомендуется переименовать значок, чтобы отличать его от других изображений.

  3. Перейдите в папку wp-content -> themes . Затем войдите в папку с темой, которую вы используете в данный момент.
  4. Откройте файл header.php и вставьте следующий синтаксис непосредственно перед концом тега :

    Измените части / jpg и /favicon.jpg в соответствии с форматом и названием изображения, которое вы собираетесь использовать.

  5. После сохранения изменений изображение должно отображаться как значок вашего веб-сайта.

Если вы не видите новый значок, очистите кеш браузера и перезапустите его.

Заключение

Как видите, наличие значка на вашем сайте имеет решающее значение. Это не только делает ваш сайт заметным на вкладках браузера, но и придает ему профессиональный вид.

Вы можете добавить его автоматически, загрузив изображение .png или .ico с именем favicon в папку public_html . В качестве альтернативы вы можете загрузить обычное изображение (jpg, BMP, gif и т. Д.) И изменить файл header.php в папке с используемой в данный момент темой.

Было ли это руководство полезным? Оставьте комментарий ниже!

Быстрый совет: добавление значка на ваш веб-сайт

Натан Ролер

Что такое Favicon?

Значок favicon — это маленький значок, который браузеры отображают рядом с заголовком страницы на вкладке браузера или в адресной строке рядом с ее URL-адресом. Он также используется, когда вы добавляете страницу в закладки. Вот несколько примеров:

Вот пример меню закладок:

Но это еще не все. Некоторые веб-службы и поисковые системы (например, DuckDuckGo) даже используют значок:

Есть ли у вашего сайта фавикон?

Как видите, фавикон очень важен. Это критически важно для распознавания сайта в браузере, полном вкладок, это отличная возможность расширить брендинг вашего сайта, и ваш сайт будет просто выглядеть неполным без них.

К сожалению, многие дизайнеры и разработчики не осознают, насколько просто добавить значок. Они не указывают ни одного или оставляют общий вариант, который предоставляет их веб-хостинг. Как вам такой брендинг — вы получаете такой же значок, как и тысячи других сайтов!

Favicons добавляют дополнительный блеск, который ценят посетители (и клиенты).

Технические подробности

Размер

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

Что показывать

Поскольку у вас есть только 256 пикселей для работы, может быть немного сложно понять, что включить в значок.Вот несколько общих идей:

  • Используйте ваш логотип (или его часть)
  • Если ваш логотип плохо отображается при таком маленьком размере, используйте стилизованную версию первой буквы (или букв) вашего сайта или названия компании
  • Используйте значок, который сообщает, что делает или представляет ваш сайт (например, Google Analytics использует крошечную диаграмму для своего значка).

Формат изображения

Как следует из названия, значки должны использовать формат файла значков ( .ico ).Раньше конвертировать в этот формат было сложно. Однако благодаря простым бесплатным услугам это уже не так. Все, что вам нужно сделать, это создать изображение 16×16. Формат .ico поддерживает прозрачность, поэтому вы не ограничены созданием квадратного значка. Если вы хотите воспользоваться преимуществами прозрачности, используйте при создании изображения формат .gif или .png.

Когда у вас будет изображение 16×16, воспользуйтесь бесплатным сервисом, например favicon.cc, чтобы преобразовать его. Используйте параметр «Импортировать изображение», чтобы загрузить исходное изображение:

Вы увидите предварительный просмотр вашего нового значка.Затем вы можете скачать преобразованный значок:

Сохраните файл на своем сайте (подробнее об этом ниже).

Куда он идет

Изначально значки должны были называться точно favicon.ico и размещаться в корне вашего домена (например, http://www.yourdomain.com/favicon.ico ). Это означало, что у вас может быть только один значок на домен, точка. Однако по мере того, как значки стали стандартизированными, появилась большая гибкость. Сейчас есть два подхода:

Один значок для всего домена

Если вам нужен только один значок для всего домена, просто сохраните значок .ico в корневую папку вашего сайта. После загрузки он должен быть доступен по адресу http://www.yourdomain.com/favicon.ico . Как только вы загрузите файл, ваш браузер должен начать отображать значок для всех страниц вашего сайта. Если нет, очистите кеш браузера и перезагрузите страницу.

Фавиконы для отдельных страниц

Если вам нужен больший контроль (и чтобы быть немного более совместимым со стандартами), вы можете указать значки для каждой страницы. Чтобы использовать этот подход, сохраните .ico в любом месте вашего сайта, например в папке изображений / . Затем добавьте на свою страницу следующий код:

Обновите выделенный путь для ссылки на новый файл значка. Обратите внимание, что мы используем путь относительно сайта (начиная с косой черты), поэтому ссылка будет действительной независимо от пути к текущей странице.

При использовании этого подхода вы все равно захотите загрузить резервный значок на http: // www.yourdomain.com/favicon.ico для ситуаций, когда кто-то просматривает или добавляет в закладки не-HTML-контент (например, PDF-файл).

Давайте рассмотрим: как это сделать, простой способ

  1. Создайте изображение 16×16. Если вам нужна прозрачность, используйте формат PNG или GIF.
  2. Преобразуйте изображение в формат .ico с помощью бесплатного сервиса, такого как favicon.cc.
  3. Загрузите новый значок на http://www.yourdomain.com/favicon.ico . Для более точного управления используйте приведенный выше код, чтобы указать значки для каждой страницы.

Заключение

Добавить значок так просто, нет оправдания не делать этого. Фавиконы важны для узнаваемости и брендинга сайтов, и их всегда следует добавлять на ваши сайты. С ними можно даже повеселиться — например, на зимние каникулы добавить веточку падуба.

Я надеюсь, что это руководство устранило тайну этих маленьких значков и дало вам возможность добавлять их на свои сайты!

Есть мысли или комментарии? Вы видели юмористический или креативный значок во время просмотра веб-страниц? Пожалуйста, поделитесь в комментариях!

Спасибо Diane D.за предложение этой статьи — она ​​получила подарочный сертификат Amazon на 15 долларов в качестве приза.

html — Как добавить значок вкладки браузера (фавикон) для веб-сайта?

Существует ряд различных значков и даже экранов-заставок, которые можно настроить для различных устройств. В этом ответе рассказывается, как их всех поддержать.

Вот несколько фрагментов, которые я использовал с соответствующими ссылками на то, где я собрал информацию. См. Мой блог для получения дополнительной информации и дополнительных сведений об ASP.Шаблон проекта .NET MVC Boilerplate со всем этим встроенным прямо из коробки (включая файлы примеров изображений).

Добавьте следующую разметку в заголовок HTML. Закомментированные разделы не являются обязательными. В то время как разделы без комментариев рекомендуется охватывать все случаи использования значков. Не бойтесь, в большинстве случаев это комментарии, которые вам помогут.

  

 ->










 html5rocks.com/2014/11/Support-for-theme-color-in-Chrome-39-for-Android ->




 ->



 ->

 ->

 ->



 png">




















 png - iOS 6 iPad (портрет) ->










 png - Для Windows 8.1 / IE11.
     mstile-310x310.png - Для Windows 8.1 / IE11.
     mstile-310x150.png - Для Windows 8.1 / IE11.
     См. Http://www.buildmypinnedsite.com/en и http://msdn.microsoft.com/en-gb/library/ie/dn255024%28v=vs.85%29.aspx. ->

 ->

Мой файл browserconfig.xml. Полное объяснение выше.

  

  
    
      
      
      
      
       # 5cb95c

Мой манифест.json файл. Полное объяснение выше.

  {
    "name": "Шаблон ASP.NET MVC (обязательно! Обновите это)",
    "значки": [
        {
            "src": "\ / Content \ / icons \ /android-chrome-36x36.png",
            "размеры": "36x36",
            "тип": "изображение \ / png",
            "плотность": "0,75"
        },
        {
            "src": "\ / Content \ / icons \ /android-chrome-48x48.png",
            "размеры": "48x48",
            "тип": "изображение \ / png",
            "density": "1.0"
        },
        {
            "src": "\ / Content \ / icons \ / android-chrome-72x72.png ",
            "размеры": "72x72",
            "тип": "изображение \ / png",
            "плотность": "1,5"
        },
        {
            "src": "\ / Content \ / icons \ /android-chrome-96x96. png",
            "размеры": "96x96",
            "тип": "изображение \ / png",
            "плотность": "2,0"
        },
        {
            "src": "\ / Content \ / icons \ /android-chrome-144x144.png",
            "размеры": "144x144",
            "тип": "изображение \ / png",
            «плотность»: «3,0»
        },
        {
            "src": "\ / Content \ / icons \ / android-chrome-192x192.png ",
            "размеры": "192x192",
            "тип": "изображение \ / png",
            «плотность»: «4,0»
        }
    ]
}

Список файлов в проекте (обратите внимание, что имена этих файлов важны, если вы решите поместить некоторые из них в корень своего проекта, чтобы избежать использования вышеуказанных метатегов):

  favicon.ico
browserconfig.xml
Контент / Изображения /
    android-chrome-144x144.png
    android-chrome-192x192.png
    android-chrome-36x36.png
    андроид-хром-48x48.PNG
    android-chrome-72x72.png
    android-chrome-96x96.png
    apple-touch-icon.png
    apple-touch-icon-57x57.png
    apple-touch-icon-60x60.png
    apple-touch-icon-72x72.png
    apple-touch-icon-76x76.png
    apple-touch-icon-114x114.png
    apple-touch-icon-120x120.png
    apple-touch-icon-144x144.png
    яблоко-сенсорный-значок-152x152.png
    apple-touch-icon-180x180.png
    apple-touch-icon-precomposed.png (180x180)
    favicon-16x16.png
    favicon-32x32.png
    favicon-96x96.png
    favicon-192x192.PNG
    manifest.json
    mstile-70x70.png
    mstile-144x144.png
    mstile-150x150.png
    mstile-310x150.png
    mstile-310x310.png
    яблоко-сенсорный-запуск-изображение-1536x2008.png
    apple-touch-startup-image-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 + значки / темы.Интересно, что они использовали тот же подход, что и Microsoft, но используют файл JSON вместо XML.

Как изменить значок в адресной строке или Favicon.ico?

«Значок избранного» или значок избранного — это значок закладки, имеющий квадратный дизайн, напоминающий ваш веб-сайт. Эти веб-значки могут быть размером от 16×16 до 64×64. Большинство веб-дизайнеров включают изображение favicon.ico при разработке сайта.

Любая программа рисования позволяет создать значок. Поиск в Google покажет множество инструментов для создания значков.Один из самых популярных сайтов — http://www.favicon.cc/.

Примечание: Для дополнительных доменов поместите файл favicon.ico в каталог для дополнительного домена.

Добавление значка на ваш веб-сайт


Шаг 1. Найдите изображение
  1. Большинство веб-сайтов используют уменьшенную версию своего логотипа или аналогичную.

Главное, чтобы ваш значок оставался простым и четким при таком небольшом размере. Большинство интерфейсов браузера (верхняя панель инструментов, содержащая кнопки браузера) могут отображать 256 цветов, но лучше всего использовать цвета Windows 16.

Шаг 2. Преобразование изображения в значок
  1. Преобразуйте изображение в иконку. Мы рекомендуем использовать DynamicDrive (www.DynamicDrive.com).

Шаг 3. Добавление значка на ваши веб-страницы
  1. Опубликуйте значок в корневом каталоге вашего веб-сайта. Это место, где Internet Explorer будет автоматически искать ваш значок, когда посетитель добавляет ваш сайт в закладки.
  2. Помогите браузеру найти ваш значок, включив в html в тег следующее:
    • .
      Поместите этот тег ближе к закрывающему тегу, потому что более важная информация, такая как ваши метатеги, должна появиться раньше.
  3. Сохраните свою сеть страницу и опубликуйте ее.

Если вы хотите создать разные значки для разных страниц, просто назовите их иначе, чем favicon.ico, но все же сохраняя суффикс .ico. Свяжите их на своих страницах так же, как указано выше, просто меняя расположение href для разных иконок.

Шаг 4. Тестирование Icon
  1. Откройте Internet Explorer (версии 5 или выше) и добавьте свою страницу в закладки.
  2. Определите, выделяется ли ваш значок среди других веб-сайтов, отмеченных закладками, с помощью значков избранного.
  3. При необходимости отредактируйте значок и снова опубликуйте его.
  4. Закройте браузер и снова откройте его, снова добавьте закладку на свою страницу, чтобы проверить новую версию своего значка.
  5. Повторяйте, пока не убедитесь, что ваш значок привлекает внимание.

Общие проблемы

При просмотре страниц в Internet Explorer мой значок.ico не загружается.

Есть несколько решений этой проблемы:
  • Добавьте страницу в избранное. Если у вас уже есть страница в папке избранного, удалите ее и добавьте снова.
  • Убедитесь, что файл значка называется favicon.ico и находится в корневой папке вашего веб-сервера.
  • Убедитесь, что путь к значку в заголовке страницы является абсолютным, а не относительным.
  • Удалите временные файлы Интернета. Если папка с временными файлами достигла своего максимума, значок нельзя использовать.
(любезно предоставлено http://www.rw-designer.com/favicon)

Как добавить значок на свой сайт

Статус этого документа

Проект в разработке; может кардинально измениться в любой момент.

Значок — это графический изображение (значок), связанное с определенной веб-страницей и / или веб- сайт. Многие недавние пользовательские агенты (например, графические браузеры и программы чтения новостей) отображают их как визуальное напоминание о веб-сайте идентичность в адресной строке или во вкладках. Википедия включает статья о favicons [FAVICON-WIKIPEDIA].

Чтобы добавить значок на свой веб-сайт, вам понадобится как изображение, так и для указания того, что изображение будет использоваться в качестве значка. Этот документ объясняет метод, предпочитаемый W3C для указания значок. Существует еще один распространенный метод, который проиллюстрирован ниже. с объяснением того, почему этот метод несовместим с некоторыми принципы веб-архитектуры. Оба метода применимы только к HTML и XHTML, одно из обсуждаемых ограничений ниже.

В этом документе не обсуждается подробно, как создать значок. изображение.Однако формат изображения, который вы выбрали, должен быть 16×16. пикселей или 32×32 пикселя, используя 8-битные или 24-битные цвета. В формат изображения должен быть одним из PNG ( Стандарт W3C), GIF или ICO.

Метод 1 (предпочтительный): использование значения атрибута

rel определяется в профиле

Первый подход для указания значка — использовать rel значение атрибута «icon» и определить, что это значение означает через профиль; профили обсуждаются более подробно ниже.В этом примере HTML 4.01 значок, идентифицированный через URI http://example.com/myicon.png как значок:

  

 profile = "http://www.w3.org/2005/10/profile" >
   
[…]

[…]

XHTML 1.0 выглядит очень похоже:

  

 profile = "http://www.w3.org/2005/10/profile" >
   
[…]

[…]

Метод 2 (не рекомендуется): размещение значка по заранее определенному URI

Второй метод указания значка основан на использовании предопределенный URI для идентификации изображения: «/ favicon», относящийся к корень сервера.Этот метод работает, потому что некоторые браузеры были запрограммирован на поиск значков с использованием этого URI. Такой подход несовместимы с некоторыми принципами веб-архитектуры и в настоящее время обсуждается группой технической архитектуры W3C (TAG) как их сайт проблемы Data-36. Подводя итог проблемы: веб-архитектура разрешает администраторам сайтов управлять своим пространством URI (для данного доменного имени), как они видят поместиться. Соглашения, которые не представляют собой согласия сообщества и которые уменьшить параметры, доступные менеджеру сайта, не масштабируются и могут привести к конфликту (так как нет общеизвестного списка этих предопределенные URI).Одно практическое соображение иллюстрирует проблему: у многих пользователей есть веб-сайты, хотя у них нет собственных доменное имя. Эти пользователи не могут указывать значки, используя второй метод, если они не могут писать в корень сервера. Однако они могут использовать метод один для указания значка, поскольку он более гибкий и не запретить менеджеру сайта использовать один значок в одном месте на сайте.

Есть несколько других хорошо известных посягательств на пространство URI, в том числе «robots.txt «и расположение конфиденциальной информации P3P. политика. Группа технической архитектуры изучает альтернативы которые не вторгаются в пространство URI без лицензии.

Использование профилей для определения терминов, таких как «значок»

Грубо говоря, профиль — это определение набора термины. В идеале профиль включает в себя как машиночитаемую информацию и удобочитаемую информацию. В HTML 4.01 и XHTML 1.0 несколько атрибуты, такие как атрибут rel , не имеют предопределенного набора значения.Вместо этого автор может предоставить значения в соответствии с потребностями и затем используйте профиль, чтобы объяснить, что означают значения. В нашем случае мы рекомендуют авторам использовать значение «icon» и профиль, который объясняет, что «когда мы говорим значок, мы имеем в виду« это значок »».

В методе 1 выше мы используем атрибут rel с СВЯЗЬ элемент и выберите профиль с атрибутом profile на элементе HEAD.

Мы определили профиль, который вы можете свободно использовать для своих сайтов.

Ограничения

Есть несколько ограничений для описанных выше подходов, включая предпочтительный метод (поэтому TAG продолжает работать по вопросу):

  • Подходы работают только в HTML или XHTML
  • Предпочтительный подход связывает значок с HTML-документом, не набор документов (т. е. сайт)
  • Предлагаемый профиль для определения значения «пиктограммы» не является признанный стандарт, что означает, что могут возникнуть проблемы с совместимостью на практике.
  • Нет стандарта (по крайней мере, определено HTML 4.01) для машиночитаемых профилей, которые позволить браузеру знать, что «это означает, что изображение является значком». Таким образом, браузер должен быть запрограммирован заранее, чтобы распознавать этот конкретный значение отн. . Для получения дополнительной информации об использовании профилей в HTML и XHTML см. GRDDL [GRDDL].

Список литературы

FAVICON-WIKIPEDIA
Favicon , Википедия, Доступно на http: // ru.wikipedia.org/wiki/Favicon.
ГРДДЛ
Собирать Ресурсные описания диалектов языков , D. Хазаэль-Массиё, Д. Коннолли, редакторы, материалы, представленные командой W3C, 16 мая 2005 г., http://www.w3.org/TeamSubmission/2005/SUBM-grddl-20050516/. Последняя версия доступно по адресу http://www.w3.org/TeamSubmission/grddl/.
HTML401
HTML 4.01 Спецификация , Д. Рэггетт, А. Ле Хорс, И. Якобс, Редакторы, Рекомендация W3C, 24 декабря 1999 г., http: // www.w3.org/TR/1999/REC-html401-19991224. Последняя версия доступно по адресу http://www.w3.org/TR/html401.
SITEDATA-36
Улучшение метаданных веб-сайтов в robots.txt, w3c / p3p и favicon и т. д. , TAG, Доступно по адресу http://www.w3.org/2001/tag/issues.html#siteData-36.
XHTML1
XHTML ™ 1.0 The Расширяемый язык разметки гипертекста (второе издание) , S. Пембертон, редактор, Рекомендация W3C, 1 августа 2002 г., http: // www.w3.org/TR/2002/REC-xhtml1-20020801. Самый последний версия доступна по адресу http://www.w3.org/TR/xhtml1.

Благодарности

Следующие участники QA Interest Group и сотрудники W3C имеют внесли значительный вклад в содержание этого документа: Доминик Хазаэль-Массье (W3C), Крис Лилли (W3C) и Оливье Теро (W3C).

Как отобразить логотип вашего веб-сайта в адресной строке и в списке избранного

Как отобразить логотип вашего веб-сайта в адресной строке и в списке избранного

Хотите, чтобы ваш веб-сайт выделялся в переполненных списках избранного в браузерах и адресные строки? Как насчет размещения вашего логотипа рядом со ссылками на ваш сайт.

Во-первых, вам нужно создать логотип для своего сайта; очень крошечный логотип, чтобы быть конкретным. Размер логотипа должен быть 16×16 пикселей, и он должен быть сохранен как файл значка Windows (например, logo.ico). Если ваш редактор изображений не поддерживает сохранение файлов в формате значков Windows, вы можете использовать следующий онлайн-инструмент или загрузить редактор значков с условно-бесплатного сайта.

Предварительный просмотр:

Когда у вас есть файл значка с вашим логотипом, вы готовы сделать последний шаг.Следующие методы будут работать в Explorer 5.x и выше без каких-либо негативных последствий для других браузеров.

Метод 1
Это самый простой в реализации метод, и он будет работать независимо от того, какую страницу на вашем сайте пользователи предпочитают добавлять в свой список избранного. Не волнуйтесь, если у вас нет доступа к корню вашего веб-сайта; взгляните на следующий метод.

Если у вас есть доступ к корню вашего веб-сайта, просто сохраните файл значка как «favicon.ico ». Например, если ваш веб-сайт -« www.chami.com », ваш файл значков должен быть доступен по адресу« www.chami.com/favicon.ico ». Веб-браузер будет искать favicon.ico всякий раз, когда вы сайт добавляется в список избранного, и если он находится в корне вашего веб-сайта, рядом со ссылкой на ваш сайт появится значок.

Метод 2
Если у вас нет доступа к корню вашего веб-сайта, вы должны добавить на свою веб-страницу следующий тег, чтобы браузер знал, где искать ваш значок.В отличие от предыдущего, на этот раз вы можете сохранить значок под любым именем, заканчивающимся на «. ico». Мы будем использовать имя «logo.ico» и предположим, что ваш веб-сайт находится в каталоге «~ your_directory».

HREF = «/ ~ your_directory / logo.ico»>

Листинг № 1 : HTML-код. Скачать logo.htm (0,2 КБ) .

ПРИМЕЧАНИЕ: Указанный выше тег следует вставить между тегами и.

Кстати, вы можете указать несколько логотипов для нескольких страниц, используя второй метод. Просто сохраните свои значки, используя уникальные имена, например, logo1.ico, logo2.ico, logo3.ico, и замените «logo.ico» в приведенном выше HTML-коде на имя значка, который вы хотите использовать для любой конкретной страницы. .

Применимые ключевые слова: Internet Explorer , Explorer 5.x , Интернет , World Wide Web

Определите значок для отображения в результатах поиска | Центр поиска Google

Если на вашем сайте есть значок, его можно включить в результаты поиска Google для вашего сайта.

Реализация

Вот как сделать ваш сайт доступным для значка в результатах поиска:

  1. Создайте значок, соответствующий рекомендациям.
  2. Добавьте тег в заголовок вашей домашней страницы со следующими синтаксис:
    Атрибуты
    отн.

    Установите для атрибута rel одну из следующих строк:

    • ярлык
    • значок
    • яблоко-сенсорный значок
    • apple-touch-icon-precomposed
    href

    URL-адрес значка. URL-адрес может быть относительным путем ( /smile.ico ) или абсолютный путь ( https://example.com/smile.ico ). URL должен быть в том же домен в качестве домашней страницы.

  3. Google будет искать и обновлять ваш значок при каждом сканировании вашей домашней страницы. если ты внести изменения в свой значок и сообщить Google об изменениях, вы можете запросить индексацию вашего домашняя страница сайта.Обновления могут появиться в результатах поиска через несколько дней или дольше.

Указания

Вы должны следовать этим правилам, чтобы иметь право на значок значка рядом с результатами поиска. Обратите внимание, что наличие значка в результатах поиска не гарантируется, даже если соблюдаются все правила.

  • Как файл значка, так и домашняя страница должны быть доступны для сканирования Google (т. Е. Они не могут быть заблокированным гуглить).
  • Ваш значок должен быть визуальным представлением бренда вашего веб-сайта, чтобы помочь пользователи быстро идентифицируют ваш сайт, просматривая результаты поиска.
  • Ваш значок должен быть кратным квадрату 48 пикселей, например: 48x48px, 96x96px, 144x144px. и так далее. Файлы SVG, конечно, не имеют определенного размера. Любой действительный Поддерживается формат favicon. Google изменит масштаб изображения до 16×16 пикселей для использования в результаты поиска, поэтому убедитесь, что он хорошо выглядит в этом разрешении. Внимание! : не используйте значок 16x16px.
  • URL-адрес значка должен быть стабильным (не меняйте его часто).
  • Google не будет показывать какие-либо фавиконки, что оно считает нецелесообразным, в том числе порнографии или символы ненависти (например, свастики).

    No related posts.

Автор записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *