Значок сайта: Как сделать иконку сайта на вкладке

23.11.2020 alexxlab

Содержание

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

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

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

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

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

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

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

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

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

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

Сделать 🖼 Favicon для сайта

Как пользоваться сервисом для создания favicon?

Нажмите «Выбрать изображение с компьютера» и загрузите картинку в форматах jpg, jpeg, png или gif. Подберите квадратное изображение без мелких деталей.
Нажмите «Создать Favicon»;
Сервис покажет пример того, как будет выглядеть ваш favicon. Если результат вас устраивает, скачайте готовый файл. Вы получите файл favicon.ico для сайта, то есть файл с расширением *.ico, его и надо будет использовать в дальнейшем.

Как установить отдельные фавиконы для мобильных устройств

Для разной аудитории сайта нужна поддержка основных браузеров и платформ — Windows Firefox, iOS Safari, Internet Explorer, Android Chrome и других. Для мобильных устройств часто прописывают отдельные иконки с другими размерами. Для этого указывают тип устройства в rel, к примеру, «apple-touch-icon», и атрибут sizes с размером.

Достаточный пакет

Будет достаточно одного файла favicon.ico с размерами 48×48.

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

Как установить favicon на сайт

Сохраните картинку в корневой каталог сайта с именем favicon.ico, чтобы получился адрес вида https://sitename.ru/favicon.ico. Это путь к изображению. Он понадобится, если вы захотите использовать разные фавиконы для разделов сайта, чтобы пользователи лучше ориентировались в разделах ресурса. Если вы используете один favicon для всего сайта, путь к нему указывать не нужно.
Добавьте ссылку на размещенный файл в HTML-код главной:
```
<link rel="icon" href="https://sitename.ru/favicon.ico" type="image/x-icon">
```

Зачем делать favicon?

Никакой функции для SEO он не несет, но его использование позволяет повысить узнаваемость сайта, и, как следствие, показателя CTR.

Узнаваемость сайта

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

Информативность

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

Запоминаемость бренда

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

Иконка для сайта — Создать свой сайт бесплатно

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

Favicon (сокр. от англ. FAVorite ICON — «значок для избранного») — значок веб-сайта или веб-страницы. Отображается браузером во вкладке перед названием страницы, а также в качестве картинки рядом с закладкой, во вкладках и в других элементах интерфейса.

Традиционно использовались изображения размера 16×16 пикселей формата ICO, помещённые в корневой каталог сайта под именем favicon.ico, — тогда Microsoft Internet Explorer использовал их для закладок. До версии 7.0 MSIE использовал значки только для закладок, и поэтому администраторы серверов могли узнать, сколько пользователей создало закладку на их сайт.

Многие современные браузеры не требуют явного указания на favicon.ico в коде страницы. В случае отсутствия такого указания браузер пытается загрузить favicon.ico из корня сайта.

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

Поддерживаемые форматы иконки сайта: ICO, PNG, GIF, Анимированный GIF, JPEG, но если вы хотите, чтобы ваш фавикон отображался во всех браузерах выбирайте ICO.

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

Делаем favicon онлайн

Перейти https://www.favicon.by

Нарисовать в сетке нужную фигуру цветом подходящим к дизайну сайта

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

Осталось скачать иконку нажав кнопку СКАЧАТЬ ФАВИКОНКУ

Logaster — конструктор фирменного стиля: лого, фавикон, визитка, конверт, бланк, русские шрифты.

Как установить фавикон на сайт на хостинге

Копируем наш файл favicon.ico в корневую папку сайта (там, где лежит главная страница сайта) и всё.

Как установить фавикон на сайт Wix

Только на премиум тарифе. В Редакторе сайта слева нажмите Настройки > Фавикон > кликните Изменить. Выберите изображение из Мои фавиконы или нажмите Загрузить фото > кликните Выбрать фавикон > нажмите Готово. Фавикон может быть загружен в следующих форматах: .JPG и .PNG. размером 16 на16 пикселей.

Чтобы изменить фавикон в новом редакторе wix:

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

Как установить фавикон на blogger / blogspot

Дизайн.

Изменить

сохранить

Как изменить иконку (favicon) для сайта?

В инструкции рассмотрены следующие вопросы:

Зачем нужен 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">

В 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" />

Как изменить иконку (favicon) для сайта?

Что такое фавикон (favicon) для сайта и зачем он нужен

Favicon – это пиктограмма (иконка) сайта, которая отображается в левой части перед названием страницы. Фавикон можно видеть в сниппетах поисковой выдачи Яндекса и Гугла, в закладках и во вкладках браузера. Нужен ли этот значок сайту, как он влияет на поведенческие метрики посетителей, помогает ли в продвижении? На все вопросы постараемся ответить в этой статье.

Что такое фавикон и зачем он нужен?

Название Favicon произошло от соединения двух английских слов: favorite – избранный и icon – значок. Фавиконка для сайта ассоциируется в сознании пользователей с определенным ресурсом в сети. В конкурентной среде эта небольшая пиктограмма помогает решать важные задачи:

Улучшает отображение сайта в поисковой выдаче. Фавикон делает описание более заметным в визуальном плане, что положительно сказывается на кликабельности сниппета. Эффективно используя фавикон для сайта, можно выгодно выделить свой ресурс на фоне конкурентов. Например, придать картинке свойства СТА (call to action) – призыв к действию, изобразив стрелку, телефонную трубку или другую побуждающую инфографику.

Повышает узнаваемость. У человека в эпоху клипового мышления развита визуальная память. Он не запоминает текст или названия, но очень хорошо откликается на яркую графику. Бренды, раскрученные сайты узнаются, в том числе, по фавикону. В 80% случаев пользователь в поиске кликнет на знакомую пиктограмму, даже если сниппет размещается на низкой позиции в выдаче ПС. Для продвижения компании часто используют маркетинговый прием: совмещают favicon для сайта с логотипом бренда. Это даёт двойной эффект – раскручивает ресурс в онлайн и повышает узнаваемость бренда в офлайне.

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

Если не использовать favicon, то браузер покажет пустой квадратик напротив названия, сниппета вашего сайта. В 90% случаев страдает кликабельность, а соответственно снижается трафик и позиции в выдаче. Если для создания страниц использовались конструкторы, браузер выведет фавикон используемого сервиса. Хорошо это или плохо? Вы рекламируете услуги другого ресурса «забесплатно». Также вы повышаете количество отказов при переходах с поиска или РСЯ – пользователь, кликнув на известную пиктограмму, попадает на «не тот ресурс» и быстро уходит. Поэтому ставьте свою картинку, тем более сделать это не сложно.

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

Пиктограмма для ресурса – это изображение в формате GIF, JPEG, PNG или SVG с разрешением ICO. Favicon для сайта размещается в корневом каталоге. Стандартные размеры – 16Х16, 32Х32, 60Х60 или 120Х120 пикселей. Для корректного отображения длина и ширина иконки должны быть равными. Если используете фавикон из картинки, подбирайте квадратные изображения.

Пиктограмма должна отвечать следующим критериям:

Демонстрировать четкие ассоциации с тематикой сайта, деятельностью компании. Фавикон для сайта должен показывать отличие, вызывать желание кликнуть по нему. Создавая иконку, относитесь к ней, как к логотипу бренда – это поможет эффективно визуализировать концепцию.
Простота, понятность. Не перегружайте фавикон дизайном или сложными формами. Небольшие размеры картинки не дадут рассмотреть всех деталей. Сделайте иконку лаконичной, внятно читаемой при беглом просмотре.
Оригинальность. Не используйте типовые пиктограммы. Оптимальный вариант – закажите favicon дизайнерам или фрилансерам. Трудно переоценить значение узнаваемости и дифференциации бренда для успешного продвижения бизнеса онлайн.

Как разместить favicon на сайте?

В 90% случаев картинка устанавливается с помощью плагинов или встроенных опций, которые используются в CMS. Ручной вариант предполагает размещение иконки в корневой папке сайта. В код между тегами на главной прописывается следующее значение:

< link rel="icon" href="http://путь до фавиконки" type=" image/формат картинки" >

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

rel=»apple-touch-icon»

Как Яндекс работает с фавиконами?

Иконка не сразу появится в результат выдачи ПС. Новая фавиконка проходит индексацию Яндекса 2-3 недели после того, как поисковые роботы найдут ссылки на картинку в коде. Роботы скачивают пиктограмму в свою лабораторию, проверяют и через 10-14 дней добавляется в общую базу иконок.

Для быстрой индексации важно прописать ссылку на фавикон в коде главной страницы сайта. Также проверьте ответ Яндекса – сервер должен вернуть значение 200 ОК. Внимательно проверьте, нет ли запрета индексации в robots.txt.

Сервисы для создания пиктограмм

Для самостоятельного создания иконки сайта используйте:

favicon.ru – можно нарисовать картинку самим, использовать готовые решения, преобразовать файл в нужный формат. Есть платные услуги дизайнеров.
pr-cy.ru – в специальном разделе сервиса можно обработать картинку под иконку сайта, задать нужный размер и формат.
favicon.cc – хороший инструментарий для самостоятельного моделирования пиктограмм, есть платные услуги.

Резюме

Мы узнали, что такое фавикон. Рассмотрели его назначение, критерии эффективности и особенности индексации Яндексом. Иконку для сайта необходимо использовать как в эстетических, так и в практических целях.

HTML: Фавикон (favicon) — создание, добавление, польза

Что такое фавикон

Фавикон (favicon — это сокращение от Favorite icon, в переводе с анг. означает любимый значок) — иконка, также известная как ярлык, значок веб-сайта или значок закладки. Фавикон является обычным графическим изображением (картинкой), связанным с конкретной веб-страницей или веб-сайтом. Браузеры, которые поддерживают добавление фавикона, обычно отображают его в адресной строке и во вкладках рядом с названием страницы, некоторые браузеры используют его как значок для ярлыка, сохраненного на рабочем столе. Поисковая система Яндекс, придала фавикону большое значение и отображает его вместе с результатами поиска.

Создание

Для создания фавикона можно использовать практически любой графический редактор, однако формат изображения, которое вы выбрали должен быть 16×16, 32×32 или 64×64 пикселя, с использованием 8-битного или 24-битного цвета. Изображение должно иметь расширение PNG (стандарт W3C), GIF или ICO.

При создании изображения следует обращать внимание на следующие нюансы:

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

В качестве примера программы, позволяющей создавать иконки, можно привести Favicon Create (скачать) – это самая простая программка. Чтобы сделать иконку понадобится всего лишь обычная картинка в формате *.jpg, или *.bmp, которую можно сделать в любом графическом редакторе, даже в том же пейнте. Загружаем картинку в программу, затем выбираем размер, глубину цвета и нажимаем кнопку старт. Все готово.

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

Для добавления фавикона на веб-страницу в начало HTML-документа потребуется вписать всего одну строку с тегом <link>, в котором нужно указать атрибут rel, указывающий браузеру что мы добавляем иконку, атрибут href, содержащий адрес нашего изображения, и атрибут type, показывающий какой формат изображения мы используем:


<html>
  <head>

    <link rel="icon" href="путь_к_иконке/favicon.ico" type="image/x-icon">

  </head>
  <body>
  </body>
</html>

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

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

	Google Chrome	Internet Explorer	Firefox	Opera	Safari
<link rel=»shortcut icon» href=»httр://mysite.ru/myicon.ico»>	Да	Да	Да	Да	Да
<link rel=»icon» href=»httр://mysite.ru/image.ico»>	Да	Да (с IE 11)	Да	Да	Да
<link rel=»icon» type=»image/vnd.microsoft.icon» href=»httр://mysite.ru/image.ico»>	Да	Да (с IE 9)	Да	Да	Да
<link rel=»icon» type=»image/png» href=»httр://mysite.ru/image.png»>	Да	Да (с IE 11)	Да	Да	Да
<link rel=»icon» type=»image/gif» href=»httр://mysite.ru/image.gif»>	Да	Да (с IE 11)	Да	Да	Да
<link rel=»icon» type=»image/x-icon» href=»httр://mysite.ru/image.ico»>	Да	Да (с IE 9)	Да	Да	Да

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

иконок сайта — Поддержка — WordPress.com

Значок сайта (или «Блаватар») — это уникальный значок для вашего сайта. Он отображается на сайте WordPress.com, на вкладке браузера вашего посетителя, в таких виджетах, как Blogs I Follow, а также в виде закладки или значка приложения на главном экране при сохранении в браузере или на телефоне.

Изображение должно быть квадратным, иметь ширину и высоту не менее 512 пикселей.

Вот несколько примеров:

Значок сайта на вкладке браузера рабочего стола

Значок сайта на ярлыке мобильного устройства

Блоги, которые я отслеживаю, отображение виджета

Добавить или изменить значок сайта

Вы можете загрузить собственный значок сайта, перейдя в Мой сайт → Настройки и на вкладке Общие нажмите кнопку Изменить :

Будет показана ваша медиабиблиотека.Вы можете выбрать существующее изображение или загрузить новое. Помните рекомендуемый минимальный размер 512 пикселей в ширину и в высоту. Выбрав изображение, нажмите Продолжить .

Далее, поскольку значок сайта должен быть квадратным, вам будет предложено при желании обрезать изображение по своему вкусу. Используйте угловые маркеры, чтобы изменить размер ограничивающей рамки, или измените положение рамки, перетащив ее. Когда закончите, нажмите Готово .

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

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

↑ Содержание ↑

Удалить значок сайта

Вы можете удалить собственный значок сайта, перейдя в Мой сайт → Настройки и на вкладке Общие нажмите кнопку Удалить :

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

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

Значок, который является сокращением от «избранного значка», также может называться значком сайта. Если вы сейчас посмотрите на страницу своего браузера, то, скорее всего, будет отображаться несколько значков. Однако вы, возможно, никогда сознательно не замечали значки, знайте, что это такое и что они делают.Итак, что такое фавикон и зачем он нужен вашему сайту WordPress?

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

Что такое Favicon / Site Icon?

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

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

Важность использования Favicon

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

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

Как видите, преимущества использования значка огромны.Итак, давайте теперь узнаем, как вы можете создать значок и добавить его на свой веб-сайт WordPress…

Создание значка Favicon

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

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

Создание или редактирование изображения Favicon

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

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

Использование Canva

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

Когда вы будете довольны изображением, которое собираетесь использовать в качестве значка, его необходимо сохранить в формате gif, png или jpeg.Теперь вы готовы загрузить свой значок на свой сайт WordPress…

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

Раньше добавление значка сайта лучше всего доверить веб-разработчикам и тем, кто обладает глубокими знаниями в области программирования. Однако, к счастью, после выпуска WordPress 4.3 добавление значка стало чрезвычайно простым и понятным.

Откройте панель управления WordPress и в меню выберите Внешний вид> Настроить . Это откроет живой настройщик WordPress с предварительным просмотром домашней страницы вашего сайта.

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

В разделе Site Icon вы можете добавить, изменить или удалить свой значок. Щелкните Выберите изображение .

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

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

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

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

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

Конечно, есть несколько других способов добавить значок на ваш сайт WordPress. Давайте посмотрим на несколько вариантов…

Favicon от RealFaviconGenerator

Многие люди предпочитают использовать плагины для добавления функциональности на свой сайт, вместо того, чтобы полагаться на тему.Favicon от RealFaviconGenerator — это плагин WordPress, который является отличным вариантом, если вы хотите добавить значок на свой сайт.

Установите плагин на свой веб-сайт WordPress, а затем просто наведите указатель мыши и щелкните, чтобы загрузить изображение и добавить его в качестве значка. Затем RealFaviconGenerator сгенерирует все значки, необходимые для различных браузеров и устройств. Это простой плагин, который можно бесплатно загрузить и использовать.

Загрузка с помощью параметров вашей темы Страница

Многие из новых тем содержат множество функций и возможностей, что позволяет пользователям быстро и легко создавать новые веб-сайты WordPress.Некоторые из этих тем теперь имеют возможность добавления значка для вас. Проверьте страницу параметров вашей темы, чтобы узнать, предлагает ли она эту функцию. Например, тема Total WordPress включает параметры для вашего Favicon (и различных размеров устройств) на встроенной панели темы.

Использование кода

Если вы предпочитаете кодировать свой веб-сайт, вы можете загрузить изображение своего значка в корневой каталог своего сайта. Затем необходимо добавить код в файл header.php.Дополнительные сведения об этом процессе, а также сведения о размере изображения и типе файла, в котором его необходимо сохранить, см. В документации поддержки WordPress.

Последние мысли

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

Ваш фавикон уже запущен? Пожалуйста, поделитесь своими впечатлениями в комментариях ниже…

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

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

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

Значок — это графический изображение (значок), связанное с определенной веб-страницей и / или веб- сайт. Многие недавние пользовательские агенты (например, графические браузеры и программы чтения новостей) отображают их как визуальное напоминание о веб-сайте идентичность в адресной строке или во вкладках.Википедия включает статья о 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" >
  <ссылка rel = "icon"
      type = "изображение / png"
      href = "http://example.com/myicon.png"> 
[…]

[…]

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

  

 profile = "http://www.w3.org/2005/10/profile" >
  <ссылка rel = "icon"
      type = "изображение / png"
      href = "/ где-то / myicon.png" /> 
[…]

[…]

Метод 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.
GRDDL: Собирать Ресурсные описания диалектов языков , 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.
СИТЕДАТА-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 июня, 2020

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

3мин чтения

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

Чрезвычайно быстрый, безопасный и удобный веб-хостинг для ваших успешных онлайн-проектов! И 30-дневная гарантия возврата денег!

Начало работы

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

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

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

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

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

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

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

Подготовьте квадратное изображение в формате .png или .ico для логотипа вашего веб-сайта.
Если у вас уже есть файл .png, , используйте его. Однако преобразуйте изображение в формат .ico с помощью ConvertICo.com, если вам когда-нибудь понадобится.
Переименуйте изображение .png или .ico в favicon .
Большинство браузеров автоматически обнаруживают файл favicon.png и favicon.ico , расположенный в каталоге вашего веб-сайта, как значок вашего веб-сайта. Так что кодировать не нужно.
Получите доступ к папке public_html , зайдя в свою hPanel, затем File Manager -> Go To File Manager .
Загрузите файл favicon.png или .ico в папку public_html . Перезагрузите свой сайт, и вы увидите значок.

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

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

Когда у вас будет квадратное изображение в качестве логотипа, перейдите в Диспетчер файлов -> Перейти в Диспетчер файлов -> public_html .
Загрузите изображение в папку public_html .
Вы можете сохранить исходное имя изображения или переименовать его в favicon . Рекомендуется переименовать значок, чтобы отличать его от других изображений.
Перейдите в папку wp-content -> themes . Затем войдите в папку с темой, которую вы используете в данный момент.
Откройте файл header.php и вставьте следующий синтаксис непосредственно перед концом тега :
```
  
```
Измените части / jpg и /favicon.jpg в соответствии с форматом и названием изображения, которое вы собираетесь использовать.
После сохранения изменений изображение должно отображаться как значок вашего веб-сайта.

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

Заключение

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

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

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

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

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

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

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

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

Мой манифест.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.

Все, что вам нужно знать о новом API значков сайта WordPress

С выпуском версии 4.3 WordPress представил значки сайтов, которые позволяют пользователям определять значок, представляющий их веб-сайт. Как часто бывает, с этой новой концепцией связан API.

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

Что такое значок сайта?

Хорошие новости: если вы какое-то время работали в Интернете, то, вероятно, уже знаете, что такое значок сайта. Фактически, это просто название, которое WordPress дал хорошо известному всем значку: favicon.

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

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

Таким образом, определяя значок сайта, вы определяете значок своего веб-сайта. Хорошая новость заключается в том, что вам, как пользователю или разработчику темы, не нужно ничего делать, чтобы активировать эту функцию. Фактически, отображение значка сайта активировано по умолчанию в WordPress 4.3: вызов нужной функции выполняется, когда происходит действие wp_head , и каждая тема должна вызывать это действие.

Это означает одно: если вы хотите попробовать то, что мы делаем в этой статье, вы можете сделать это, не меняя текущую тему. Единственное, что вы должны сделать перед тем, как следовать этому руководству, — это обновить вашу установку WordPress до версии 4.3 (см. Нашу статью об обновлении вашей установки WordPress, если вы еще этого не сделали.

Как определить значок сайта

Определить новый значок сайта можно с помощью настройщика темы. У вас есть два способа получить доступ к этому настройщику:

При использовании меню администрирования средство настройки находится в меню «Внешний вид» со второй записью «Настроить»
Нажав кнопку «Настроить» на панели администрирования, которая появляется вверху каждой страницы вашего веб-сайта после входа в систему (эта кнопка впервые появилась в WordPress 4.3)

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

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

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

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

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

Затем, когда вы выбрали квадрат, который хотите использовать, нажмите кнопку «Обрезать изображение» в правом нижнем углу окна и дождитесь волшебства!

WordPress автоматически изменит размер вашего изображения до необходимых размеров (например, WordPress создаст квадрат шириной 512 пикселей, даже если ваше изображение меньше 512 пикселей).

Чтобы сохранить только что внесенное изменение, нажмите кнопку «Сохранить и опубликовать» в верхней части Настройщика темы. Теперь вы должны видеть свой новый значок на каждой странице своего веб-сайта.

Вы можете удалить и изменить значок сайта на любом этапе с помощью настройщика тем.

Получение текущего значка сайта

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

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

API функций значков сайта WordPress

На данный момент WordPress предоставляет четыре функции в общедоступном API Site Icon. Мы рассмотрим каждый из них.

Как узнать, установлен ли значок сайта

Первая функция, которую мы увидим, — это has_site_icon () .Как следует из названия, эта функция позволяет увидеть, установлен ли значок сайта. Таким образом вы можете указать своим пользователям установить значок сайта.

Эта функция возвращает логическое значение: истина, , если установлен значок сайта, ложь, в противном случае.

  if (has_site_icon ()) {
    
}
еще {
    
}

Получение URL-адресов значков сайта

WordPress предоставляет две функции, которые позволяют нам получить текущие URL-адреса значков сайта: get_site_icon_url () и site_icon_url () .Как мы уже говорили выше, WordPress генерирует несколько файлов разного размера для значка сайта. Вот почему в названии этой части нет ошибки: есть несколько URL-адресов, которые мы можем получить.

Начнем с get_site_icon_url () . Его можно использовать без параметра: тогда он вернет текущий значок сайта размером 512 пикселей.

  если (has_site_icon ())
    echo '';

Но мы также можем передать этой функции три параметра.Все они необязательны.

Первый параметр — это идентификатор блога, для которого вы хотите получить значок сайта; это полезно, когда включен режим Multisite. По умолчанию для этого параметра установлено значение null , и извлекается текущий сайт. В большинстве случаев это именно то поведение, которое нам нужно, поэтому вы можете продолжать передавать null в качестве первого параметра.

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

Например, следующее изображение не будет отображать изображение шириной 200 пикселей, а вместо этого будет отображать версию шириной 270 пикселей (со сгенерированными по умолчанию размерами).

  если (has_site_icon ())
echo '';

Наконец, третий параметр — это URL-адрес изображения, которое вы хотите увидеть, если значок сайта не найден.Это хороший способ определить резервный URL без необходимости самостоятельно проверять, является ли возвращаемый URL пустым или нет.

Вторая функция, которую мы можем процитировать, когда говорим о получении значка сайта, — это site_icon_url () . Он повторяет URL-адрес текущего значка сайта, полученного с помощью get_site_icon_url () . Его можно использовать таким же образом.

Повторение мета-тегов

Последняя функция, которую мы рассмотрим, — это функция, используемая WordPress во время действия wp_head : она напрямую отображает все мета-теги , необходимые для указания браузеру (или ОС на смартфоне) доступных размеров для значок.Это функция wp_site_icon () , и она не принимает никаких параметров.

 
wp_site_icon ();

Определение размеров значков вашего собственного сайта

По умолчанию WordPress генерирует несколько размеров при кадрировании значка сайта. Он использует четыре разных размера для создания мета-тегов :

Изображение шириной 32 пикселя для классического значка (в браузере)
Изображение шириной 180 пикселей для использования в качестве значка приложения в iOS
Изображение шириной 192 пикселя для использования в качестве значка приложения Android или Chrome
Изображение шириной 270 пикселей для использования в качестве плитки в Windows.

Четыре соответствующих метатега все генерируются в функции wp_site_icon () , но что, если вы хотите добавить свои собственные размеры?

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

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

  function add_my_site_icon_sizes ($ sizes) {
    $ sizes [] = 64;

    вернуть размеры $;
}
add_filter ('site_icon_image_sizes', 'add_my_site_icon_sizes');

Без их использования добавлять новые размеры бесполезно. Вот почему мы находим второй фильтр: site_icon_meta_tags , вызываемый, когда WordPress генерирует мета-теги , соответствующие значку сайта (в wp_site_icon () ).

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

  function add_my_site_icon_meta_tags ($ tags) {
    $ tags [] = sprintf ('', esc_url (get_site_icon_url (null, 64)));

    вернуть теги $;
}
add_filter ('site_icon_meta_tags', 'add_my_site_icon_meta_tags');

Заключение

Благодаря четырем функциям и двум фильтрам API значков сайта WordPress не так обширен, как некоторые другие API-интерфейсы, но вы можете видеть, что охватывается ряд опций, от создания собственных размеров значков до их отображения.

При этом вы не должны использовать этот API для отображения каких-либо изображений, кроме значка; Это не та цель, для которой он был создан, и поскольку wp_site_icon () вызывается по умолчанию, могут наблюдаться некоторые побочные эффекты.

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

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

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

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

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

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

Шаг 1. Найдите изображение

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

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

Шаг 2. Преобразование изображения в значок

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

Шаг 3. Добавление значка на ваши веб-страницы

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

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

Шаг 4. Тестирование Icon

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

Распространенные проблемы

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

Добавьте страницу в избранное.