Favicon как установить: Как установить фавикон (favicon) на сайт

• С фавиконом сайт запоминается лучше

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

• Упрощает поиск нужного сайта

В закладках и истории проще искать нужный сайт не по тексту заголовка, а по опознавательной картинке — знакомому фавикону.

• Избавляет от ошибки в лог-файлах

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

К примеру, такую:

Failed to load resource: net::ERR_EMPTY_RESPONSE (20:00:55:963 | error, network) at <a href="http://localhost:8383/favicon.ico">http://localhost:8383/favicon.ico</a>

Какую картинку выбрать для фавикона

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

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

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

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

Как создать favicon для сайта

Есть три самых распространенных способа:

1. Специальный плагин для Photoshop
   Позволяет работать этому популярному редактору изображений с форматом ico.
2. Специальные программы для изготовления фавиконов
   Они специально «заточены» для изготовления иконок для сайта.
3. Онлайн генератор favicon
   Самый простой и доступный способ — загрузить картинку в генератор, который сделает иконку для сайта из любого изображения. Иконка получится красивее, если изображение-донор кадрировать до квадрата.

Загрузите квадратную картинку в генератор от PR-CY, он создаст архив с файлом ICO, в котором будет несколько вариантов фавикона, в том числе ретина иконки.

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

1. Создайте картинку для фавикона с именем favicon.ico.
   
2. Готовый файл нужно сохранить в корневом каталоге сайта. 
3. Если вы захотите использовать разные фавиконы для разделов сайта, скопируйте путь к изображению  https://sitename.ru/favicon.ico. Если вы используете один favicon для всего сайта, путь к нему указывать не нужно.
4. Добавьте ссылку на размещенный файл в HTML-код главной:

...
<link rel="icon" href="https://sitename.ru/favicon.ico" type="image/x-icon">
...

Атрибут «rel» указывает на тип ресурса. Большинство браузеров распознают «icon», для Internet Explorer нужен «shortcut icon».

...
<link rel="shortcut icon" href="<img="" src="https://sitename.ru/favicon.png">" type="image/x-icon">
...

От формата файла зависит тип передаваемых данных. Для ICO это «image/x-icon» или «image/vnd.microsoft.icon», для PNG — «image/png» и аналогично для других форматов.

Для мобильных устройств часто прописывают отдельные фавиконы, указывая, к примеру, rel=»apple-touch-icon». 

Фавиконка не появится сразу после установки кода, нужно дождаться, пока поисковик ее проиндексирует.

Как установить разные favicon для отдельных страниц

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

Как установить разные фавиконки разделам сайта:

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

<link rel="icon" href="http://ваш-сайт. ru/путь_к_иконке/favicon_blog.ico" type="image/ico">

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

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

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

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

Стандартно для фавикона делают файл favicon.ico — это контейнер для нескольких файлов. Будет достаточно favicon.ico с файлами в размерах 16×16, 32×32 и 48×48.

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

<link rel="icon" type="image/ico" href="/icons/favicon.ico">
<link rel="icon" type="image/ico" href="/icons/favicon.ico">
<link rel="shortcut icon" href="/icons/favicon.ico">

Дополнительно можно добавить файлы для мобильных устройств.

Android

Обычно используют файл .png размером 180×180, можно использовать прозрачность. Указать фавикон и его расположение для Android можно через спецификацию Web App Manifest. В ней описан простой JSON-файл, в котором веб-мастеры указывают иконки, размеры и форматы для сайта или приложения.

Манифест указывают с помощью:

<link rel="manifest" href="/manifest.json">

Пример кода:

{
    "name": "%title%",
    "icons": [
        {
            "src": "\/android-chrome-36x36. png",
            "sizes": "36x36",
            "type": "image\/png",
            "density": "0.75"
        },
        {
            "src": "\/android-chrome-48x48.png",
            "sizes": "48x48",
            "type": "image\/png",
            "density": "1.0"
        },
        {
            "src": "\/android-chrome-72x72.png",
            "sizes": "72x72",
            "type": "image\/png",
            "density": "1.5"
        },
        {
            "src": "\/android-chrome-96x96.png",
            "sizes": "96x96",
            "type": "image\/png",
            "density": "2.0"
        },
        {
            "src": "\/android-chrome-144x144.png",
            "sizes": "144x144",
            "type": "image\/png",
            "density": "3.0"
        },
        {
            "src": "\/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image\/png",
            "density": "4. 0"
        }
    ]
}

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

Цвет файла и фона для иконки можно указать с помощью метаданных в HTML, к примеру:

<meta name="msapplication-TileColor" content="#da532c">

<meta name="msapplication-config" content="/icons/browserconfig.xml">

Apple

Для iOS иногда используют размер 57×57, но рекомендуют лучше делать иконку PNG размером 180×180. В документации Safari такие называются Web Clips, в них не должно быть прозрачности, углы автоматически округлятся при добавлении на главный экран. Это значок высокого расширения, он будет отображаться и в других браузерах. 

В rel нужно указать “apple-touch-icon.png”.

Пример кода:

<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">

Apple поддерживает и другой формат иконок. Для закрепленных вкладок в Safari и кнопок на Touch Bar в MacBook есть возможность указать монохромную векторную маску и цвет, который ее заполнит при наведении.

Настраивают с помощью link rel=»mask-icon».

Пример кода:

<link rel="mask-icon" href="mask.svg" color="red">
<link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#5bbad5">

Edge и IE 12

Цвет файла и фона для иконки можно указать с помощью метаданных в HTML.

Пример кода:

<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/icons/browserconfig.xml">

У Microsoft есть «Browser configuration schema reference» — XML-документ, в котором перечислены различные значки, соответствующие интерфейсу. Файлы конфигурации браузера позволяют задавать настройки с помощью внешних XML-файлов.

Пример кода:

<browserconfig>
<msapplication>
<tile>
<square70x70logo src="/mstile-70x70. png">
<square150x150logo src="/mstile-150x150.png">
<square310x310logo src="/mstile-310x310.png">
<wide310x150logo src="/mstile-310x150.png">
<tilecolor>#da532c</tilecolor>
</wide310x150logo></square310x310logo></square150x150logo></square70x70logo></tile>
</msapplication>
</browserconfig>

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

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

Вы здесь: Главная — HTML — HTML Основы — Установка Favicon на сайт

Favicon — это небольшая картинка размером 16×16 (или 32×32) пикселя, которая находится в браузере слева от адресной строки. Почему-то не так много людей добавляют favicon на свои сайты. На мой взгляд, они многое теряют. Например, в Yandex отображаются иконки сайтов, и люди переходят по таким сайтам гораздо чаще, чем по тем, на которых нет favicon. Также, на мой взгляд, это немного повышает авторитетность сайта. В общем, в этой статье мы установим favicon на сайт.

Для начала как найти favicon. Во-первых, Вы можете создать самостоятельно. Очень хороший сервис favicon.cc. На нём Вы прямо в онлайне создадите себе favicon. Также Вы можете воспользоваться уже готовыми коллекциями и выбрать себе подходящий. Самый простой способ — это воспользоваться поиском и запросом: «коллекция favicon«. Думаю, что уже первый сайт покажет Вам тысячи различных favicon, и Вам останется его только выбрать.

Теперь второй шаг — установка favicon на сайт. Для этого добавьте внутри тега <head> следующую строку:

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

После обновления страницы, Вы увидите Ваш favicon рядом с адресом Вашего сайта.

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

Вот и всё, что хотелось рассказать об установке favicon на сайт.

Если Вы хотите узнать больше по HTML, то посмотрите мой бесплатный курс с примером создания сайта на HTML: http://srs.myrusakov.ru/html

• Создано 05.12.2010 10:17:20
• Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov. ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

   Она выглядит вот так:

2. Текстовая ссылка:
   <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

   Она выглядит вот так: Как создать свой сайт

3. BB-код ссылки для форумов (например, можете поставить её в подписи):
   [URL=»https://myrusakov. ru»]Как создать свой сайт[/URL]

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

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

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

Чтобы поставить фавиконку, ее сначала нужно где-то взять. Можно скачать просто из Интернета. Существует много сайтов на которых вы можете найти подходящую картинку. Также можно сделать иконку самому с помощью Adobe Photoshop или генераторов фавикон.

Например, с помощью сайта favicon.ru.

Заходим на сайт. Здесь мы видим, что можно создать фавиконку 3-мя способами:

1. Заказать favicon у профессионалов
2. Сделать favicon из изображения
3. Нарисовать иконку

Давайте разберем каждый пункт.

Как сделать favicon из изображения

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

2. Выбираем нужное изображение, которое сохранено на вашем компьютере и нажимаем «Открыть».

3. Я выбрала вот такую белочку:) Зеленый квадрат, который вы видите на изображении, можно перемещать, менять размер. Когда вы всё настроете, то нажимаете «Далее».

4.  Вот что мы получили в итоге. Не пугайтесь того, что у вас получилось) Иконка всего лишь 16х16 и будет выглядеть хорошо. Результат вы видите ниже. Если вас всё устраивает, то нажимаем «Скачать Favicon» и готово!

2. Можно самим нарисовать фавиконку. Можно выбрать цвет и использовать разные инструменты. После того, как вы создадите favicon для сайта жмите «Скачать favicon».

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

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

Разместить favicon можно несколькими способами, которые мы сейчас рассмотрим.

Вставляем фавикон с помощью настроек темы WordPress

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

1. Находим вкладку «Внешний вид», затем «Настроить».

2. Появляются настройки темы. Здесь находим то, что связано с Favicon. В вашем шаблоне может быть всё по-другому.

3. Выбираем нужное изображение.

4. Нажимаем «Сохранить и опубликовать».

5. Смотрим результат.

Установка иконки через корневой каталог

1. Заходим в панель управления и в «Диспетчер файлов».

2. Если у вас один сайт, то иконку нужно поместить в public_html, если у вас несколько сайтов, которые разбросаны по папкам, то сначала открываем папку с нужным сайтом и туда помещаем favicon.

3. Затем нажимаем «Загрузить».

4. Готово! Наша favicon установлена!

Установка с помощью плагина favicon для WordPress

Для того, чтобы использовать этот метод, вам нужно скачать плагин Favicons для WordPress (щелкните по ссылке). После этого вам нужно его установить.

1. Иконкой можно сделать граватар.
2. Если вы хотите использовать свой значок, то нужно указать путь к файлу.
3. Можно использовать иконки из набора значков.

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

Как установить фавикон на WordPress сайт и правильно подключить

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

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

Это маленькая картинка, которая видна слева во вкладке браузера на открытой странице сайта. Также отображается в поисковой выдаче Яндекс. Размер изображения рекомендуется создавать небольшой – от 120 до 512 пикселей. Если меньше, то может нечетко выглядеть, будет менее заметным среди сохраненных избранных закладок.

Какой лучше формат иконки сделать

Это могут быть типы файлов: SVG, PNG, ICO, GIF, JPEG, BMP. Чаще всего используют первые три. А вообще алгоритм такой – четче иконка и меньший размер файла.

Как создать фавиконку бесплатно

Можете скачать уже готовую (с бесплатных ресурсов типа freepik.com, iconsdb.com и других, которые отлично ищутся в интернете) или создать свою с помощью сервиса favicon.io. Последний позволит сгенерировать Favicon из загруженного фото, текста или смайлика Emoji, скачать в форматах ICO/PNG и в разных размерах.

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

Разберем 2 варианта.

С помощью Настройщика темы

Обычно в любом WP-шаблоне пользователь сможет задать фавиконку для своего сайта – в админ-разделе Внешний вид > Настроить > Свойства сайта.

В других темах расположение опции добавления фавикона может отличаться. Например, для Astra нужно в Кастомайзере перейти в секцию Шапка > Айдентика сайта.

Прописать код вручную

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

Также в Яндекс.Вебмастере может возникнуть ошибка “Робот не смог загрузить или обработать файл с изображением, которое может отображаться во вкладке браузера и возле названия сайта в поиске“.

Добавить информацию о фавиконе и его формате можно несколькими способами. Например, в плагинах Clearfy Pro, Code Snippets или через файл functions.php.

Какой вариант вы бы не выбрали, в HTML-раздел <head> ВордПресс-сайта нужно добавить код

<link rel="icon" href="URL-ссылка на картинку фавиконки" type="image/jpeg">

Значение атрибута type зависит от типа картинки:

• .ico – “image/x-icon”,
• .jpeg – “image/jpeg”,
• .png – “image/png”,
• .bmp – “image/bmp”,
• .gif – “image/gif”.

Фавиконку на хостинг можете загрузить с помощью встроенных средств CMS – через админ-меню Медиафайлы > Добавить новый.

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

Если Вам понравилась статья — поделитесь с друзьями

Как установить favicon на WordPress — пошаговая инструкция

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

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

Как создать favicon

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

ВИДЕО ПО ТЕМЕ:

Прочитать статью — хорошо, а прочитать статью

Смотрите наши видео, как создать интернет-магазин на WordPress с нуля

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

Установка favicon на WordPress может осуществляться несколькими методами. Рассмотрим каждый из них.

Метод 1. С помощью панели управления WordPress

Если у вас версия Wordpress 4.3 и выше, вы можете добавить favicon непосредственно в администраторской панели управления: выполните вход в панель управления WordPress и перейдите в меню Внешний вид >> Настроить.

Вы попадете в меню Настройки текущей темы вашего сайта. Теперь перейдите в меню Свойства сайта.

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

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

После этого не забудьте нажать на кнопку Сохранить и опубликовать.

Теперь вы можете открыть ваш сайт и увидеть добавленный favicon.

Метод 2. С помощью плагина All In One Favicon

Для начала нужно установить сам плагин. Перейдите в меню Плагины >> Добавить Новый и установите All In One Favicon.

После установки плагина, перейдите в меню Настройки >> All in one Favicon.

Загрузите изображение в строках ICO Frontend и ICO Backend, а затем сохраните настройки.

Теперь обновите страницу вашего сайта и вы увидите добавленный favicon.

85 % пользователей не будут покупать через веб-сайт, если они не уверены, что их данные передаются безопасно.
Защитите свой сайт с SSL-сертификатом и не теряйте клиентов!

Метод 3. С помощью изменения header.php файла

Выполните вход в контрольную панель вашего хостинга. Рассмотрим этот пример на cPanel.

Перейдите в меню cPanel >> Диспетчер файлов.

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

После этого favicon должен отобразиться автоматически.

Однако в некоторых случаях вам необходимо будет внести ручные изменения. Всё зависит от особенностей вашей WordPress-темы.

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

Перейдите в меню Внешний вид >> Редактор.

Выберите для редактирования Заголовок Темы (файл header.php).

Отредактируйте или добавьте следующие строки в код, как это показано на скриншоте:

<link rel="icon" href="http://www.yourdomain.com/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="http://www.yourdomain.com/favicon.ico" type="image/x-icon" />

Не забудьте поменять “yourdomain.com” на ваш домен.

Теперь нажмите на Сохранить файл и перезагрузите страницу.

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

Делайте блог на хостинге с предустановленным WordPress!
Наша теплая поддержка на связи 24/7

Читайте также:

Как настроить фавикон?

С появлением телефонов (i | android | windows) все изменилось, и получение правильного и полного решения, работающего на любом устройстве, действительно занимает много времени.

Вы можете заглянуть на https://realfavicongenerator.net/favicon_compatibility или http://caniuse.com/#search=favicon, чтобы получить представление о том, как лучше всего получить что-то, что работает на любом устройстве.

Вам стоит взглянуть на http://realfavicongenerator.net/ чтобы автоматизировать большую часть этой работы, и, возможно, на https: // github.com / audreyr / favicon-cheat-sheet, чтобы понять, как это работает (даже если последний ресурс давно не обновлялся).

Одно полное решение требует добавления в заголовок следующего содержания (конечно, с соответствующими изображениями и файлами):

В июне 2016 года RealFaviconGenerator заявил, что следующие 5 строк кода поддерживают столько же устройств, сколько предыдущие 18 строк:

Как создать и установить favicon.ico (Linux, GNU, Windows, Unix)

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

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

Favicon — это сокращение от «Значок избранного» («Значок избранного» для вас Американцы;). Название получено из списка закладок для Microsoft. Internet Explorer, который называется «Избранное» / «Список избранного». Когда вы добавляете сайт в список избранного / избранного, Internet Explorer (версия 5 и выше) спрашивает сервер, есть ли у него файл позвонил favicon.ico . Если присутствует, этот файл будет использоваться для отображения значка. рядом с текстом закладки.

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

Как создать фавикон

Чтобы создать favicon.ico , просто создайте файл .PNG размером 16×16 и преобразуйте его. в ресурс значков с png2ico.Если хотите, можете добавить больше изображений в тот же ресурс значков для предоставления альтернативных разрешений. Самый браузеры используют только изображение 16×16, но в другом контексте (например, когда вы перетаскиваете URL-адрес из адресной строки на рабочий стол) может отображаться значок большего размера. Если ресурс значка содержит только изображение 16×16, оно будет масштабировано до подходящего размера, поэтому технически нет необходимости добавлять альтернативу резолюции. Однако это может повысить качество отображаемого значка.

Имейте в виду, что для пользователя с медленным модемом значок .ico может увеличиться время загрузки страницы на несколько секунд, если оно слишком велико, поэтому не переусердствовать над этим. Добавление альтернативы 32×32 должно быть достаточно, чтобы изображение будет хорошо смотреться даже в контексте с более крупными значками. Добавление еще большего количества и больших альтернатив — ненужное раздувание. Постарайтесь, чтобы количество цветов было меньше 16 и создайте значок из 16 цветов, используя переключатель --colors 16 png2ico (или даже создать значок ч / б с переключателем --colors 2 ). Это приведет к меньшему файл, который загружается быстрее.

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

Установка вашего Favicon

Чтобы добавить новый значок favicon.ico на веб-страницу поместите его на сервер в тот же каталог, что и веб-страница, для (например, www.example.com/foo/favicon.ico для www.example.com/foo/index.html ). Это первое место браузер будет искать. Если он не находит там значка, он проверяет каталог верхнего уровня сервера ( www.example.com/favicon.ico для сервера www.example.com ), поэтому, поместив его туда, вы можете получить значок по умолчанию для всех страниц в вашем домене.В зависимости от браузер и конфигурация, favicon.ico не всегда отображается, даже если он находится в одном из указанных выше мест, если веб-страница явно не заявляет о своем присутствии. Заявить, что на вашей веб-странице есть значок, вы добавляете следующие 2 строки в раздел вашей страницы:

Авторские права (c) 2000-2010, Матиас Бенкманн

[проверить эту страницу]

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

Что за значок и как его получить?

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

У нас красная буква «е».

Поскольку я использую Google Chrome, значки отображаются как на вкладке браузера, так и на панели закладок.

Почему значки значков так важны?

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

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

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

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

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

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

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

Первое, что вам нужно сделать, это то, какой у вас будет значок. Поскольку у вас мало места для работы, использование всего вашего логотипа или названия компании может быть не лучшим вариантом. Если бы мы использовали весь наш логотип, он был бы нечитаемым и, следовательно, бесполезным. Мы решили использовать красную букву «e», потому что это узнаваемая и простая часть нашего логотипа.

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

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

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

Теперь, когда ваш значок имеет квадратную форму, вам нужно изменить его размер. Если вы пользователь WordPress , установите размер изображения 512 на 512 пикселей и сохраните его как PNG. Если вы собираетесь добавить значок в код своего веб-сайта, измените размер изображения до 16 на 16 пикселей и сохраните его как favicon.ico.

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

WordPress упростил добавление значков на ваш сайт.Сначала войдите в панель администратора WordPress. В пункте меню «Внешний вид» выберите «Настроить».

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

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

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

Добавление значка с кодом

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

Загрузите значок на свой сервер и запишите URL-адрес его местоположения. Например: http://www.mywebsite.com/images/favicon.ico

Добавьте следующий код в теги прямо над или под тегом