Содержание

Как Добавить Favicon для Сайта

Sait

access_time

9 декабря, 2020

hourglass_empty

2мин. чтения

Введение

Большинство сайтов имеют свои особенные логотипы и в большинстве случаев они используются, как favicons (иконки). Если вы не знаете, что такое favicon, вот визуальный пример одной их таких:Иметь свою favicon на сайте гораздо лучше, чем стандартную иконку пустого документа в браузере, к тому же, ваш сайт будет выглядеть гораздо профессиональней. В этом руководстве вы узнаете несколько способов, как добавить favicon на ваш сайт.

Обратите внимание, что в Hostinger действуют скидки на все тарифы хостинга. Воспользуйтесь предложением и разместите сайт до 90% дешевле!

К предложению

Что вам понадобится

Перед тем, как вы начнете это руководство, вам понадобится следующее:

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

Вариант 1 — Позволить браузеру автоматически добавить favicon (нет необходимости в изменении кода сайта)

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

  1. Во-первых, чтобы изображение нормально отображалось в браузере, оно должно быть квадратной формы в любом из представленных форматов (jpg, bmp, gif, png). Конечно, возможно использование не квадратного изображения, но выглядеть оно будет не так аккуратно.
  2. Этот вариант добавления favicon требует конвертации вашего изображения в формат .ico. В Интернете можно найти множество онлайн инструментов для этого, мы воспользуемся одним из самых популярных — convertico.com.
  3. После открытия сайта convertico.com, вы увидите кнопку для выбора и загрузки вашего изображения:

  1. Нажмите кнопку и выберите нужный вам файл. Сразу после выбора, ваше изображение будет автоматически конвертировано и станет доступно для загрузки в правой части сайта:

  1. Скачайте ваше изображение нажав на белую стрелку и сохраните ваш файл . ico на компьютере.
  2. Теперь переименуйте файл в favicon.ico, чтобы браузер мог распознать данный файл.
  3. Последним этапом станет загрузка изображения в каталог вашего сайта. Для загрузки вы можете использовать Файловый менеджер или FTP клиент. В хостингах на базе Linux, это обычно каталог public_html. Однако он может отличаться у различных хостингов, или в связи с вашими собственными настройками. В таком случае лучше проконсультироваться у поставщик услуг хостинга.

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


ВАЖНО! Если вы не видите новый favicon, очистите кэш вашего браузера и перезапустите его.

Вариант 2 — Использовать обычную картинку и указать ее в коде сайта

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

  1. Во-первых, чтобы изображение нормально отображалось в браузере, оно должно быть квадратной формы в любом из представленных форматов (jpg, bmp, gif, png). Конечно, возможно использование не квадратного изображения, но выглядеть оно будет не так аккуратно.
  2. Загрузите изображение в каталог вашего сайта. Для загрузки вы можете использовать Файловый менеджер или FTP-клиент. В хостингах на базе Linux, это обычно каталог public_html. Однако он может отличаться у различных хостингов или в связи с вашими собственными настройками. В таком случае лучше проконсультироваться у поставщик услуг хостинга.
  3. Теперь вам необходимо определить изображение, которое будет использоваться в качестве favicon в коде вашего сайта. Добавьте эту строку между тегами <head></head> в код вашего сайта:
<link rel="shortcut icon" type="image/png" href="/favicon. png"/>

ВАЖНО! Измените png на формат вашего изображения в type=»image/png»  и favicon.png на имя вашего изображения.


HTML код будет выглядеть примерно так:

Теперь ваше изображение должно отображаться в качестве favicon для вашего сайта.


ВАЖНО! Если вы не видите новый favicon, очистите кэш вашего браузера и перезапустите его.

Заключение

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

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

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

Что такое Фавикон и зачем нужна иконка сайту

Иконка для сайта или Фавикон – это значок сайта, который можно разглядеть в строчке браузера рядом с URL и в закладках. Фавиконы также отображаются в выдаче Яндекса рядом с ссылками, чего кстати нет в Гугле (ай-ай). Иконкой для сайта является файл favicon.ico, который браузер пытается загрузить из корневого каталога сайта при переходе. По размеру обычно 16х16 пикселей и имеет .ico расширение.

Чтобы понять одну из главных причин использования фавиконов, давайте проведем маленький эксперимент. Наберите в Яндексе «фавикон» и в выдаче вы увидите, что у всех сайтов, стоящих в первых строках есть иконки. Разберемся, как это связано. Как мы знаем, в топ выдачи попадают только кто Яшке отстегнул бабосов самые авторитетные сайты, а значит, иконка сайта является показателем качества вашего ресурса. Также пробегая глазами по выдаче, ссылки без фавиконов теряются на фоне имеющих оные.

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

Рассмотрим несколько способов создания иконки для сайта.

Создание иконки для сайта с помощью Photoshop

У меня установлен Photoshop CS5. И как оказалось, он не поддерживает сохранение файла в формате .ico, который нам нужен. Однако существует выход из этого положения, а точнее специальный плагин ICO. Скачать который вы можете вот на этом сайте.

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

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

Но вернемся к созданию фавикона.

Онлайн-сервисы для создания иконок для сайта

Этот способ попроще и подходит для тех, кто с Photoshop на «ВЫ», или не имеет установленной лицензионной (нет пиратству!) копии данной программы у себя на компьютере. Так вот, представляю вашему вниманию пару онлайн-сервисов по созданию иконок для сайтов.

Favicon.ru — для создания иконки необходимо загрузить уже готовую картинку любого размера со своего компьютера (1) или указать ссылку на изображение в интернете (2).

Далее следуя простым инструкциям (3) создаем фавикон и сохраняем его у себя на жестком диске.

Favicon.cc — Возможности этого онлайн-сервиса входит как загрузка уже готового изображения (2) с преобразованием его в иконку, так и создание фавикона с нуля (1) и (3).

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

Готовые галереи фавикон

Уж если вам не подошли вышеописанные способы, то можно скачать уже готовый фавикон из галереи. Но в этом случае никто не даст гарантии, что эта иконка будет установлена только на вашем сайте. А уж если хотите просмотреть пару галерей, то вот: The Favicon Gallery, ICONJ.

Установка иконки на сайт

Для того чтобы установить фавикон, его достаточно загрузить в корневой каталог сайта под именем favicon.ico и, в принципе, икнока уже будет отображаться. Но веб-мастера рекомендуют прописать следующий код в header.php внутри тэга <head> </head>.

<link rel=»icon» href=»название_сайта/favicon.ico» type=»image/x-icon»>

<link rel=»shortcut icon» href=»название_сайта/favicon.ico» type=»image/x-icon»>

Вот так все достаточно просто создать и установить иконку Favicon на сайт.

Загрузка…

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

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

Что такое favicon

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

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

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

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 ChromeInternet ExplorerFirefoxOperaSafari
<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)ДаДаДа

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

Favicon WordPress — 4 способа установить фавикон на сайт

Что такое favicon, почему плохо, если он отсутствует?
Фавикон – небольшая тематическая картинка – придаст вашему сайту индивидуальность и выделит его в браузере среди других веб-страниц. Установить фавикон для сайта на WordPress можно несколькими способами.
Фавикон (от английского словосочетания favorite icon) – это маленькая квадратная картинка, которая визуально представляет ваш сайт и отображается в ярлыках страниц в браузере, в закладках на страницу, и в адресной строке рядом с именем сайта. Правильно подобранный фавикон соответствует логотипу сайта или тематике информации, которая на нем содержится. При взгляде на фавикон пользователь должен безошибочно определять ваш сайт среди остальных, даже не видя его названия. Наш фавикон в закладке браузера выглядит так:
В качестве формата файла для фавикона в современных браузерах используются ico, png или gif. Некоторые браузеры поддерживают загрузку иконки в формате jpg, а Opera и Firefox могут отображать анимированный gif. Картинка фавикона бывает разных габаритов, обычно применяются размеры 16×16, 32×32, 48×48, 64×64, 128×128 или 512×512 пикселей. Для сайтов, предназначенных для просмотра на мобильных устройствах, размер иконки может отличаться.
Как сделать фавикон для сайта онлайн?
Если на вашем сайте отсутствует фавиконка, картинку для фавикона можно подобрать в интернете или нарисовать самостоятельно в специальном онлайн-сервисе для генерации иконок.
Например, favicon.ru предлагает выбрать цвет, создать картинку на квадратном поле и сохранить ее на свой компьютер.
В поле предпросмотра отображается, как будет выглядеть фавикон для вашего сайта на ярлыке страницы браузера.
Поставить favicon средствами ВордПресс
Обычно фавикон можно установить, регулируя настройки сайта в админ-панели WordPress.
  1. В меню «Внешний вид» войдите в пункт «Настроить» и выберите «Свойства сайта».
  2. В предложенном списке действий можно настроить отображение иконки сайта. Нажмите кнопку «Выбрать изображение» и загрузите файл с нужной картинкой.
  3. Чтобы применить настройку к сайту, нажмите кнопку «Сохранить и опубликовать». Убедитесь, что на ярлыке страницы в браузере появился фавикон.
Вставить фавикон используя возможности WordPress шаблона
В некоторых темах WordPress заложена дополнительная возможность по установке иконки сайта.
  1. Войдите в меню «Внешний вид» и выберите пункт «Настроить».
  2. Дальнейший путь к настройкам зависит от используемого шаблона. Как правило, фавикон устанавливается в общих настройках темы. Найдите соответствующую команду и загрузите файл с картинкой.
  3. Не забудьте подтвердить изменения нажатием кнопки «Сохранить и опубликовать».
Добавить в файл header.php
Если не удалось установить фавикон встроенными средствами WordPress, использование иконки для сайта можно напрямую прописать в файле заголовка header.php. Для внесения изменений в этот файл используйте редактор кода, например, встроенный редактор WordPress.
  1. С помощью файлового менеджера подключитесь к серверу хостинга и скопируйте в корневую директорию вашего сайта подготовленный файл с именем favicon.
  2. В админке WordPress зайдите в меню «Внешний вид» (1) и выберите пункт «Редактор» (2).
  3. В списке шаблонов откройте файл заголовка header.php (3).
  4. После открывающего тегавставьте строку (4), в которой проверьте формат загруженного файла с иконкой (png или другой), при необходимости замените на свой вариант.
  5. Нажмите кнопку «Обновить файл» (5), чтобы применить иконку к сайту.
Установка favicon используя плагин Favicon by RealFaviconGenerator
Для подключения фавикона в WordPress разработаны специальные плагины, позволяющие автоматически загрузить иконку на сайт.
В меню «Плагины» выберите пункт «Добавить новый». Найдите, установите и активируйте плагин Favicon by RealFaviconGenerator. Затем зайдите в меню «Внешний вид» (1), после установки плагина в нем появится пункт Favicon (2) для загрузки иконки. Нажмите кнопку «Выберите из библиотеки мультимедиа» (3) и укажите расположение файла с иконкой на вашем компьютере. Нажмите кнопку «Генерировать favicon» (4).
Из админки WordPress вас перебросит на официальный сайт плагина, где вы сможете настроить способ отображения иконки (5) для нового или работающего сайта, указать алгоритм сжатия и масштабирования картинки.
Внесите изменения при необходимости и нажмите кнопку генерации фавикона (6). После этого вы снова вернетесь в админ-панель, а плагин автоматически установит выбранный фавикон.
Почему лучше установить без использования плагина?
Для сохранения фавикона в качестве иконки сайта плагин должен оставаться активным. При его деактивации фавикон отображаться не будет.
Обратите внимание, большое количество плагинов замедляет скорость загрузки сайта, поэтому такие разовые операции, как установка фавикона, лучше выполнять без использования дополнительных плагинов – т.е. поставить фавикон первыми тремя способами.
iPipe – надёжный хостинг-провайдер с опытом работы более 15 лет.
Мы предлагаем:
Как заменить фавикон на сайте

 Здесь вы узнаете как и где можно заменить фавикон сайта.



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


  


 Подготовка фавикона:



 1. Для замены фавикона вам нужно подготовить изображение размером 16рх х 16рх в формате ico. 

  Для конвертация изображения в нужный формат вы можете использовать один из бесплатных сайтов, например https://www.favicongenerator.com/



 2. Подготовленный файл назовите / переименуйте в favicon.ico



 Замена фавикона:



 Зайдите на сайт с правами администратора.


  



 На панели управления «Эрмитаж» включите режим правки.


 
  



 Откройте вкладку Администрирование > Контент > Структура сайта >  Файлы и папки 


 


   



 В корневой директории найдите файл favicon.ico и удалите его.


  



 Теперь загрузите свой. Для этого нажмите на кнопку «Загрузить файл«


  



 В открывшемся окне нажмите «Загрузить файл» > укажите путь к нужному изображению > нажмите «Сохранить«


 



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


 Для разных браузеров время обновления иконки может занимать разное время. В Google Chrome можете просто нажать Ctrl+F5.


Создаем favicon для сайта | Вебмастеру
Сегодня вопрос о том, как сделать favicon для сайта является одним из самых популярных среди начинающих блоггеров и владельцев сайтов. Фавикон – очень важный элемент любого дизайна. Он представляет собой небольшое квадратное изображение с размерами 16х16 пикселей, которое  используется для закладок в различных Интернет-браузерах. Таким образом, несмотря на свои маленькие размеры, он выполняет очень важную роль.
В настоящее время созданы специальные онлайн сервисы, позволяющие быстро создать фавикон для сайта или блога. Поэтому сделать его достаточно просто. К тому же есть возможность просто скачать уже готовую мини-иконку ico для сайта, которую в дальнейшем необходимо загрузить на свой ресурс. Следует отметить, что совершенно неважно какой движок и хостинг вы используйте, ведь установить favicon можно везде.
Кроме того фавикон используется в качестве логотипа для торговой компании.
Таким образом, вы можете выделиться из общей серой массы. Ваши посетители всегда узнают ваш сайт, взглянул лишь на одно изображение favicon. Мини-картинка используется также поисковыми системами. Они высвечивают их слева от результата выдачи. Это позволяет сайтам и блогам лучше выглядеть на фоне всех существующих проектов.
Выглядит фавикон в поисковой выдаче так:
Online сервисы и готовые коллекции favicon
Узнав, что такое favicon для сайта и зачем он нужен, необходимо понять то, как же его можно сделать?
Можно воспользоваться несколькими способами:
  • скачать уже готовое мини-изображение из специальной галереи;
  • создать самостоятельно при помощи генератора фавикон;
  • сделать иконку из готового изображения при помощи favicon generator’а.
Скачать уже готовое мини-изображение из специальной галереи можно на следующих сайтах: thefavicongallery.com; iconj.com; favicon.co.uk или favicon-generator.org. На данных ресурсах представлено огромное количество различных иконок, поэтому каждый сможет найти ту, которая подойдет ему больше всего.
Если вы не смогли найти ничего подходящего, что маловероятно, то можно сделать favicon на сайт с нуля самостоятельно. Следует отметить, что созданные вами изображения смотрятся на проекте значительно лучше. Для этой цели созданы специальные Favicon Generators, которые позволяют нам создавать красивые мини-картинки в режиме реального времени.
«favicon.cc» является одним из самых популярных и простых сервисов, который позволяет быстро справиться с поставленной задачей. С его помощью у вас есть возможность нарисовать самостоятельно каждый пиксель вашей будущей фавиконки. Всего их насчитывается 256.
После перехода на сервис у вас откроется рабочее окно, где вы и будете экспериментировать:

Зеленым цветом на скриншоте, который расположен выше, показывается ваша рабочая область. Это место предназначено для создания самой иконки для блога или сайта. Ниже показывается аналогичное изображение в уменьшенном масштабе, указывающая действительные размеры будущей фавиконки.
После создания изображения его необходимо скачать, активировав специальную кнопку.
Принцип работы основан на том, что вам требуется самостоятельно закрасить каждый пиксель (квадратик) своим цветом. Выбирать цвет можно при помощи палитры, которая располагается слева от рабочей области.
Работа данного сервиса настолько упрощена, что каждый сможет справиться с поставленной задачей.
На данном ресурсе вы можете создавать множество различных favicon в режиме реального времени.
Это один из многих онлайн-генераторов, который находится в свободном доступе. Существует также множество других. Вот некоторые из них: amichurin.appspot.com; favicon-generator.org/editor. Принцип их работы аналогичен приведенному примеру.
Установка favicon на сайт
Создав мини-иконку, остается только ответить на вопрос о том, как установить favicon на сайт?
Прежде всего, нужно проверить формат изображения. Он должен быть только «.ico».
Для этого достаточно вставить ваш файл в «корень» сайта или блога. Как правило, папка называется «DOCUMENT ROOT». После выполнения этих действий пауки и браузеры самостоятельно определят новую информацию о том, что появился новый файл favicon.ico.
Этот способ является самым простым, поэтому его очень часто используют для установки мини-изображения на свой ресурс.
 Руководство для новичков по добавлению значка на свой веб-сайт 
 Вы можете встретить термин 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  в папке с используемой в данный момент темой.
 Было ли это руководство полезным? Оставьте комментарий ниже!
 Линас начинал как агент по работе с клиентами, а сейчас является полнофункциональным PHP-разработчиком в Hostinger.Он страстно желает оказывать положительное влияние на людей, используя методы разработки, ориентированные на пользователя. Хотя ему нравится программировать и изменять мир, он втайне мечтает стать рок-звездой.
 Что такое изображение значка и как добавить его на свой веб-сайт 
 Публикуя свой недавно созданный веб-сайт, слишком многие люди упускают из виду небольшой последний штрих, который может иметь большое значение — значок значка. Эти крошечные дополнения к вашему сайту производят впечатление, которое намного превышает их фактический размер, поэтому не стоит недооценивать их силу и важность.Вот все, что вам нужно знать о значках и способах их создания:
 Что такое значок значка 
 Значок — это небольшой значок размером 16×16 пикселей, используемый в веб-браузерах для представления веб-сайта или веб-страницы. Сокращенно от «избранного значка», значки чаще всего отображаются на вкладках в верхней части веб-браузера, но они также находятся на панели закладок вашего браузера, в истории и т. Д. В некоторых случаях, например в Google Chrome, они даже появляются на главной странице вашего браузера. Другими словами, значок служит значком вашего веб-сайта или визуальным знаком, с помощью которого можно идентифицировать ваш веб-сайт в Интернете.
 Почему значки значков имеют значение 
 Несмотря на свои крошечные размеры, значки значков имеют большое значение для любого веб-сайта, улучшая его пользовательский опыт, брендинг и профессионализм:
  Опыт пользователя:  Значки значков служат запоминающимися визуальными подсказками для вашего веб-сайта, улучшая его  пользовательский опыт . Они помогают пользователям легко находить вкладку вашего веб-сайта в браузере и в различных приложениях, таких как панель закладок, что упрощает возвращение на сайт снова и снова.
  Брендинг:  Для создания действительно сплоченного бренда важно не упускать из виду даже мельчайшие детали. Фавиконы способствуют бренду и видимости вашего веб-сайта, расширяя ваш стиль и язык за пределами веб-сайта и в веб-браузере.
  Профессионализм:  Фавиконы добавляют легитимности и профессионализма вашему сайту, делая его четким и продуманным.
 Как создать фавикон 
 Для создания фавикона вы можете рассмотреть вопрос о найме профессионального дизайнера (если вы уже работаете с ним, вы можете включить фавикон в свое соглашение).Вы также можете создать значок самостоятельно, используя любую дизайнерскую программу по вашему выбору или несколько онлайн-инструментов. Одним из таких рекомендуемых инструментов является Wix  Logo Maker , который позволяет создавать профессиональные и персонализированные значки, наилучшим образом отражающие ваш стиль и потребности.
  Размер:  Оптимальный размер для создания значка — 16×16 пикселей, т.е. размер, в котором они обычно отображаются. Однако иногда они могут отображаться и в более крупных размерах (например, 32×32 пикселя).
  Файл:  Предпочтительным форматом файла   для значка является JPEG или PNG.
  Прозрачность:  Если у вашего дизайна прозрачный фон, обязательно сохраните файл в формате PNG с включенной настройкой прозрачности.
 Советы по созданию значка 
 Создание чего-то такого крошечного может показаться прогулкой в ​​парке. Однако тот факт, что значки веб-сайтов такие маленькие, означает, что вы должны быть очень точными, поскольку здесь нет места для ошибки.Вот несколько советов по созданию значка, который лучше всего подходит вашему бренду и веб-сайту:
  Простота:  Небольшой размер значков требует, чтобы ваш дизайн был точным. Не вдавайтесь в детали, такие как маленькие линии, текстуры или тени. Вместо этого стремитесь к яркому, четкому и простому значку, который легко узнаваем.
 Художник и иллюстратор  Веб-сайт Wix Адама Дж. Курца  — отличный пример простого дизайна значка с его отчетливой желтой звездой.Другой пример — это значок дизайнера ювелирных изделий и пользователя Wix  Иларии Бонарди , состоящий из трех простых точек.
  Фирменный стиль:  Фавикон должен отражать дух вашего веб-сайта и бренда, сохраняя тот же визуальный язык и цветовую схему, что и остальная часть вашего веб-сайта.
 Для модного бренда  Простите веб-сайт Wix , значок X в форме X является продолжением того же смелого черно-белого визуального языка, что и их одежда и логотип.Точно так же в значке eBay цвета бренда сочетаются с маленьким значком сумки для покупок, что идеально передает дух сайта.
  Почти нет текста:  Если вы хотите включить типографику (текст) в свой значок, например название вашего бренда, ограничьтесь одним-тремя символами. Инициалы или аббревиатуры часто бывают хорошими решениями для сокращения текста.
 Веб-сайт некоммерческой организации Wix  Arte  использует начальную букву A из своего логотипа в качестве значка с добавленным неоново-зеленым фоном для привлечения внимания.В качестве альтернативы, значок, украшающий веб-сайт Wix  Red Fern  из Бруклина, не имеет текста вообще. Вместо этого он использует только значок в виде листа, что обеспечивает максимальную читаемость.
  Использование логотипа:  Хотя некоторые логотипы могут выглядеть лучше всего даже в размере значка значка, большинство из них едва читаются в уменьшенном виде. Если вы хотите использовать свой логотип в качестве значка, вероятно, потребуется внести некоторые изменения. Пропуск строки тега или использование только одного инициала — вот некоторые из способов заставить логотипы работать в небольших размерах.
 Обратите внимание на то, что значок Google немного отличается от его логотипа, но при этом отражает те же дизайнерские ценности. На значке отображается только знакомая буква G, при этом все четыре фирменных цвета плавно объединены в одну букву. Другой подход был использован иллюстратором и пользователем Wix  Шарлоттой Мей , которая использует инициалы своего нарисованного от руки логотипа в качестве своего значка.
  Цвет:  Имейте в виду, что значок будет отображаться на фоне разного цвета, в зависимости от контекста и используемого браузера.Поэтому обязательно протестируйте свой значок на сером, белом и черном фоне, прежде чем завершать дизайн.
 Как добавить значок на свой сайт Wix 
 Сайты Wix автоматически включают стандартный значок по умолчанию, но вы можете настроить его, перейдя на премиум-план и подключив свой сайт к домену  .
 Вы можете легко изменить свой значок на своем сайте Wix:
  1.  На панели управления вашего сайта перейдите в Настройки.
  2.  Нажмите «Управление» рядом с «Favicon».
  3.  Нажмите «Загрузить изображение» и выберите существующее изображение или нажмите «Загрузить медиа», чтобы загрузить изображение со своего компьютера.
  4.  Щелкните «Добавить на страницу». Теперь вы увидите предварительный просмотр того, как будет выглядеть ваш значок на вкладке браузера.
  5.  Нажмите «Сохранить» и тада! Теперь у вашего веб-сайта есть значок. Он появится на вкладке вашего сайта, как только вы нажмете кнопку «Опубликовать».
  Автор: Эден Спивак 
 Эксперт по дизайну и писатель
 html — Добавить значок на веб-сайт 
 html — Добавить значок на веб-сайт — 2 ответа
  Присоединяйтесь к Stack Overflow , чтобы учиться, делиться знаниями и строить свою карьеру.
 Спросил 
 Просмотрено
 321k раз
  На этот вопрос уже есть ответы :
 Закрыт 8 лет назад.
  Возможный дубликат:  
 Изображение заголовка HTML
 Подскажите, пожалуйста, как сделать так, чтобы значки отображались на вкладках браузера в PHP?
 Я хочу, чтобы мой значок отображался на вкладках при доступе к моему сайту.
 Создан 09 авг.
 Osgosg
 1,11722 золотых знака77 серебряных знаков66 бронзовых знаков
 0
 Просто поместите файл с именем  favicon.ico  в корневом каталоге.
 Если вы хотите узнать больше, начните читать: