Как сделать favicon: Как создать фавикон для сайта? Способы создания Favicon

26.10.1972 Facebook Twitter LinkedIn Google+ Разное

Содержание

Создание favicon для сайта 2020 / Хабр

Что такое favicon и для чего он нужен?


Favicon

– это значок (иконка), который отображается во вкладке браузера, закладках, а также в сниппетах результатов поиска.

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

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

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

Раньше в качестве основного формата использовали ICO. Особенность данного формата – мульти-размерность. Данный файл может хранить в себе несколько размеров иконки. На смену ICO пришел формат PNG. ICO все еще поддерживаемый, но большинство современных браузеров выбирают PNG формат иконки, который легче. Некоторые браузеры не могут выбрать правильный значок в файле ICO, что приводит к неправильному использования значка с низким разрешением.

О каких платформах пойдет речь в этой статье?


  • Десктопные браузеры
  • Chrome на Android
  • Иконка закладки в iOS (PWA)
  • macOS
  • Windows


Десктопные браузеры

Начнем, пожалуй, с классического десктопа.

Как было упомянуто ранее, формат ICO сегодня является устаревшим, но это не значит, что про него нужно забыть. Формат ICO может спасти вашу иконку и корректно отображать favicon в некоторых случаях. Например, до 11 версии IE PNG-формат не поддерживается. Поэтому для IE10 и младших версий нужно использовать старый формат ICO. В таком случае желательно использовать следующую комбинацию ICO и PNG форматов:

<link type="image/x-icon" rel="shortcut icon" href="…/favicon.ico">
<link type="image/png" rel="icon" href="… /favicon-16x16. png">
<link type="image/png" rel="icon" href="…/favicon-32x32.png">
<link type="image/png" rel="icon" href="…/favicon-96x96.png">
<link type="image/png" rel="icon" href="…/favicon-120x120.png">

Для создания мульти-размерной иконки ICO можно использовать сервис-конвертер

icoconvert

. При генерации иконки необходимо выбрать следующие размеры: 16х16, 32х32, 48х48 (highest resolution icon).

Иконки PNG имеют следующие размеры: 16х16, 32х32, 96х96, 120х120. Зачем иконка 120х120? Яндекс Справка сообщает, что может воспользоваться иконкой данного размера.

Если обратить внимание на значение rel (тип ресурса), то icon – учитывается большинством браузеров, а shortcut icon – учитывается браузером IE.

Chrome на Android

Android ожидает увидеть значок 192х192 в формате PNG, alpha-канал (прозрачность) приветствуется.

<link type="image/png" rel="icon" href="…/android-icon-192x192.png">

Android Chrome полагается на манифест веб-приложения. Любой сайт может использовать манифест для того, чтобы ссылаться на некоторые значки.

Сам файл манифеста формата json и объявляется следующей строкой:

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

Файл манифеста для Android Chrome можно сгенерировать с помощью сервиса

RealFaviconGenerator

.

{
 "name": "My Application",
 "short_name": "App",
 "description": "Application OK",
 "lang": "ru-Ru",
 "start_url": "/",
 "scope": "/",
 "display": "standalone",
 "theme_color": "#ffffff",
 "background_color": "#ffffff",
 "icons": [
  {
   "src": "\/res\/img\/icons\/android-icon-72x72.png",
   "sizes": "72x72",
   "type": "image\/png",
   "density": "1.5"
  },
  {
   "src": "\/res\/img\/icons\/android-icon -96x96.png",
   "sizes": "96x96",
   "type": "image\/png",
   "density": "2.0"
  },
  {
   "src": "\/res\/img\/icons\/android-icon-144x144.png",
   "sizes": "144x144",
   "type": "image\/png",
   "density": "3.0"
  },
  {
   "src": "\/res\/img\/icons\/android-icon-192x192. png",
   "sizes": "192x192",
   "type": "image\/png",
   "density": "4.0"
  },
  {
   "src": "\/res\/img\/icons\/android-icon-512x512.png",
   "sizes": "512x512",
   "type": "image\/png"
  }
 ]
}

Иконки должны иметь следующие размеры: 72х72, 96х96, 144х144, 192х192, 512х512 в формате PNG, прозрачность приветствуется. Так как иконка может иметь прозрачный фон, то в манифесте можно указать цвет с помощью

background_color

.

Стоит отметить, что на телефоне пользователь имеет возможность сохранить страницу браузера на главный экран. Это будет просто ссылка на страницу вашего сайта, подтянется иконка с названием android-icon-192×192.png, которая объявлена у вас в коде.

Если же подключить к сайту манифест, то при открытии страницы пользователю может быть предложено сохранить сайт в качестве приложения. В данном случае вы имеет возможность объявить визуально ту же иконку (android-icon-192×192.png) или переделать дизайн иконки для приложения под свои нужды и объявить в манифесте с соответствующими размерами.

Иконка закладки в iOS (PWA)

iOS Safari ожидает увидеть

apple touch icon

. Это иконка PNG формата 180х180, без alpha-канала (без прозрачности). Углы иконки будут автоматически скруглены, что упрощает создание

apple touch icon

.

Пользователи iOS также могут добавить сайт на главный экран, и он будет выглядеть как приложение. Такая ссылка отображается в виде значка и называется Web Clip.
Нижеперечисленные размеры иконок предназначены для поддержки различных устройств, например, для iPhone и iPad:

<link rel="apple-touch-icon" href="…/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-144x144.
  png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-180x180.png">

В коде нужно добавить атрибут

rel=«apple-touch-icon»

и указать размер с помощью sizes.

Если на сайте нет значка, размер которого является рекомендованным для устройства, то будет использована сама близкая по размеру иконка большего размера. Основная apple touch icon это иконка размером – 180х180. Остальные устройства могут уменьшать иконку.

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

Следует отметить, что устройства под iOS не единственные, которые ищут

apple touch icon. Некоторые браузеры, вроде Android Chrome, могут использовать apple touch иконки, так как они встречаются чаще других PNG иконок высоких разрешений.

macOS

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

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

<link color="#e52037" rel="mask-icon" href="…/safari-pinned-tab.svg">

В коде нужно добавить атрибут

rel=«mask-icon»

. Сама SVG-иконка должна быть черного цвета. Цвет иконки задается в атрибуте

color=»#e52037″

.

SVG-иконка используется в закрепленной вкладке (pinned tab – no focus) в монохромном виде. При наведении (pinned tab – focus) иконка будет закрашена в цвет, который имеет атрибут «

color». В touch bar также передается цвет атрибута «color».

При создании иконки необходимо убрать все имеющиеся тени, сделать ее плоской и простой. Упростить иконку до одного объекта можно с помощью операций «Union» и «Flatten». Данные операции легко применить в программе Figma.

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

Windows

С Windows нужно немного запариться, чтобы сделать хорошо.

Для IE10 и более младших версий необходимо использовать формат ICO, так как до IE11 формат PNG не поддерживался.

С приходом IE11 и Windows 8.1 появилась возможность закреплять сайты в виде живых плиток. Для маленьких плиток используется по умолчанию favicon, а для больших и широких плиток необходимо задавать изображение конкретного размера. Это можно сделать с помощью добавления тегов метаданных в разметку сайта или создать

browserconfig.xml (файл конфигурации браузера).

Пример добавление тегов метаданных в разметку веб-сайта для больших плиток:

<meta name="msapplication-TileImage" content="…/mstile-144x144.png">
<meta name="msapplication-square70x70logo" content="…/mstile-70x70.png">
<meta name="msapplication-square150x150logo" content="…/mstile-150x150. png">
<meta name="msapplication-wide310x150logo" content="…/mstile-310x310.png">
<meta name="msapplication-square310x310logo" content="…/mstile-310x150.png">

Данной строкой мы указываем цвет фона плитки:

<meta name="msapplication-TileColor" content="#2b5797">

Можно указать имя вашего веб-сайта:

<meta name="application-name" content="My Application">

Что такое

browserconfig

? Это XML-документ, в котором перечислены различные значки, соответствующие пользовательскому интерфейсу Metro UI.

Чтобы подключить файл browserconfig в разметке необходимо добавить следующую строку в head:

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

Сам файл будет выглядеть следующим образом:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
    <msapplication>
        <tile>
            <square70x70logo src="…/mstile-70x70. png"/>
            <square150x150logo src="…/mstile-150x150.png"/>
            <square310x310logo src="…/mstile-310x310.png"/>
            <wide310x150logo src="…/mstile-310x150.png"/>
            <TileColor>#ffc40d</TileColor>
        </tile>
    </msapplication>
</browserconfig>

В

browserconfig

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

Microsoft рекомендует брать больший размер изображений в целях поддержки экранов с высокой плотностью пикселей.

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

  • Small — 70×70 (Рекомендуемый размер: 128×128)
  • Medium — 150×150 (Рекомендуемый размер: 270×270)
  • Wide — 310×150 (Рекомендуемый размер: 558×270)
  • Large — 310×310 (Рекомендуемый размер: 558×558)

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

mstile-70×70

. То же самое нужно проделать с остальными размерами.

Подготовка favicons

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

Например, в моем случае вес всех изображений был 200кб, после сжатия 50кб. Качество изображений практически не изменилось. Вы можете воспользоваться любым удобным сервисом для сжатия картинок. Я использовала iloveimg.

Заключение

Последовательность подключения в разметке веб-сайта:

<link type="image/x-icon" rel="shortcut icon" href="…/favicon.ico">
<link type="image/png" rel="icon" href="… /favicon-16x16.png">
<link type="image/png" rel="icon" href="…/favicon-32x32.png">
<link type="image/png" rel="icon" href="…/favicon-96x96.png">
<link type="image/png" rel="icon" href="…/favicon-120x120.png">
<link type="image/png" rel="icon" href="…/android-icon-192x192.png">

<link rel="apple-touch-icon" href="…/apple-touch-icon-57x57. png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" href="…/apple-touch-icon-180x180.png">

<link color="#e52037" rel="mask-icon" href="…/safari-pinned-tab.svg">

<meta name="msapplication-TileColor" content="#2b5797">
<meta name="msapplication-TileImage" content="…/mstile-144x144.png">
<meta name="msapplication-square70x70logo" content="…/mstile-70x70.png">
<meta name="msapplication-square150x150logo" content="…/mstile-150x150.png">
<meta name="msapplication-wide310x150logo" content="…/mstile-310x310. png">
<meta name="msapplication-square310x310logo" content="…/mstile-310x150.png">
<meta name="application-name" content="My Application">
<meta name="msapplication-config" content="…/browserconfig.xml">

<link rel="manifest" href="…/manifest.json">
<meta name="theme-color" content="#ffffff">

С помощью последней строки кода «

theme-color

» можно закрасить адресную строку и строку уведомлений в любой цвет. В значении content задается цвет.

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

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

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

09. 08.2021

Инструментов, чтобы выделить свой сайт среди миллионов других в поисковой выдаче, не так-то много. Favicon ― это один из таких инструментов. 

Favicon сайта ― что это

Что такое favicon? Favicon (favorites icon ― иконка для избранного) ― это иконка сайта, которая отображается:

  • на вкладках перед названием сайта

  • в закладках пользователя

  • слева от названия сайта в поисковой выдаче:

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

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

Яндекс уже около 10 лет отображает фавиконы в поисковой выдаче. А вот Google долгое время не торопился внедрять эту фичу в свой поисковик, поэтому пользователям пришлось ждать аж до 2019 года. Пока Google экспериментирует с фавиконами в поисковой выдаче: ищет им подходящее место, проверяет их нужность. Последний крупный эксперимент в отношении фавиконов был в январе 2020 года. О технических работах разработчики писали в официальном Twitter компании.

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

Для чего нужен favicon

Как использовать favicon? На что он может повлиять?

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

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

  3. Удобный поиск сайта в закладках. Как мы говорили ранее, изначально фавикон создавался именно для того, чтобы нужный сайт было легче найти в избранном. До сих пор эта функция осталась, и иконки значительно облегчают поиск ресурсов. То же самое работает и с иконками во вкладках. Современные ПК очень производительные, поэтому они могут постоянно держать открытыми несколько десятков вкладок. В таких случаях иконка для сайта ― единственный способ найти то, что нужно.

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

Технические требования к изображению

Раньше для favicon использовали формат ICO. Сейчас браузеры поддерживают такие форматы, как SVG (чаще всего рекомендуют именно его), ICO, GIF, JPEG, PNG, BMP. 

Рекомендованный размер картинки в каждой поисковой системе разный. Яндекс говорит, что фавикон должен быть 120 × 120, 32 × 32 и 16 x 16 пикселей. В официальном справочном материале Яндекс рекомендует использовать изображения размером 120 × 120 пикселей (для растровых форматов) или изображение в формате SVG. Именно эти параметры позволят отобразить логотип сайта чётко и заметно на сервисах Яндекса.

В Google рекомендуемый размер значка должен быть кратным 48 пикселям, например, 48 x 48, 96 x 96, 144 x 144. Специалисты Google просят не использовать иконки 16 x 16, так как они слишком маленькие.

Как создать favicon

В целом favicon можно сделать в любом графическом редакторе, в котором вы привыкли работать. Для этой задачи подойдёт даже Paint. Важно только соблюсти необходимые размеры и конвертировать в один из форматов, о которых мы говорили ранее.

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

Как сделать favicon для сайта:

  1. Конвертировать уже готовое изображение. Если у вас уже есть готовая иконка или картинка, можно просто конвертировать её в нужный формат. Для этого подойдёт сервис pr-cy.ru, be1.ru.

  2. Нарисовать иконку самостоятельно. Есть сервисы, у которых очень ограниченный функционал, но с их помощью можно сделать простое начертание. Такие возможности дают сайты katvin.com, favicon.by, favicon. cc, xiconeditor.com. 
    Для примера сделаем иконку в виде радостного смайлика в сервисе favicon.by.
     

  3. Использовать готовые иконки. Необязательно рисовать иконку с нуля. Можно взять уже готовые иконки, которые выложены в библиотеки сайтов в свободном доступе. Взять готовые фавиконы можно на faviconka.ru и findicons.com.

Советы по созданию favicon

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

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

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

Favicon: как добавить на сайт

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

Самый универсальный способ ― добавить значок сайта через код. С него и начнём.

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

  1. Загрузите файл с иконкой в корневой каталог сайта.

  2. Добавьте в HTML-код главной страницы сайта в элемент head ссылку на размещённый файл.

<head>

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

     <link rel="shortcut icon" href="https://example.com/favicon.ico" type="image/x-icon">

</head>

Атрибуты:

rel: 

  • icon — учитывается большинством браузеров,

  • shortcut icon — учитывается браузером Internet Explorer.

type: 

  • image/svg+xml — для формата SVG,

  • image/x-icon или image/vnd.microsoft.icon — для формата ICO,

  • image/gif — для формата GIF,

  • image/jpeg — для формата JPEG,

  • image/png — для формата PNG,

  • image/bmp — для формата BMP.

Совет. Если сайт должен быть доступен по нескольким доменам, лучше указывать в коде не полный путь, а относительный. Например, не https://example.com/favicon.ico, а просто /favicon.ico.

Обратите внимание! Если у вас кириллический домен в атрибуте href используйте Punycode. Например, для адреса https://новыйсайт.рф/favicon.ico нужно указать https://xn--80advbqgxk0f.xn--p1ai/favicon.ico или просто использовать относительный путь /favicon.ico.

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

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

Чтобы добавить иконку можно, например, использовать плагин RealFaviconGenerator. 

  1. Перейдите в админку WordPress.

  2. Перейдите в Плагин ― Добавить новый.

  3. Найдите в поиске плагин RealFaviconGenerator установите и активируйте его.

  4. Перейдите во Внешний вид ― Фавикон

  5. Загрузите иконку. Нажмите Генерировать favicon. Плагин перенесёт вас на сайт RealFaviconGenerator.

  6. На веб-сайте найдите и нажмите кнопку Создайте свои значки Favicons и HTML-код.

  7. Плагин вернёт вас на ваш сайт. Вы получите уведомление о том, что ваш favicon настроен.

Не сложнее добавить favicon и через обычные настройки WordPress.

  1. В админке WordPress перейдите во Внешний вид ― Настроить.

  2. Выберите Общие настройки ― Свойства сайта.

  3. В разделе Иконка сайта нажмите Выберите иконку сайта 

  4. Загрузите фавикон.

  5. Чтобы сохранить изменения, нажмите кнопку Опубликовать:

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

В лучшем случае, поисковые системы начинают индексировать фавиконку через 1-2 недели после её настройки. А может и через несколько месяцев. К сожалению, здесь все зависит от решения системы. 

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

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

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

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

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

Создание Favicon для сайта позволит улучшить внешний вид ресурса в выдаче и вывести любой бренд за пределы окна браузера.

Что такое фавикон и какие его функции

Favicon — компактное изображение в виде значка или иконки, выполняющее роль мини-логотипа сайта. В переводе с англ. FAVorites ICON обозначает “значок для избранного”.

Его основная задача — визуально выделить сайт в закладках, сделать веб-приложение узнаваемым, повлиять на поведенческие метрики пользователей, помочь в продвижении. Сегодня эту пиктограмму можно увидеть везде: в сниппетах результатов поиска, в адресной строке, на страницах поисковой выдачи Яндекс и Google рядом с url сайта, на пустом начальном экране десктопных и мобильных браузерах, в вкладках браузера, других элементах интерфейса.

Создание фавикона для сайта дает возможность решать следующие задачи:

  1. Повышает узнаваемость. Человеческая природа такова, что визуальная память более развита, поэтому потребители быстро реагируют и запоминают яркую графику, нежели тексты. Не удивительно, что в большинстве случаев, пользователи кликнут на знакомую пиктограмму, в особенности если Favicon будет совмещен с логотипом компании или бренда;
  2. Повышает отображение сайта в поисковой выдачи. Пиктограмма формирует заметное в визуальном плане описание, повышая кликабельность сниппета. В картинке можно передать призыв к действию или иную инфографику. Благодаря этому свойству можно эффектно выделить свой ресурс на фоне конкурентной среды;
  3. Облегчает задачу поиска нужного ресурса и легко ориентироваться в браузерных закладках.

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

Формат и стили фавикона

Традиционным форматом фавикона было принято считать формат ICO, который характеризовался мульти-размерностью. Его файл имел способность хранить в себе несколько вариантов размеров иконки и традиционно помещался в корень сайта, где его ищет Internet Explorer.

На сегодняшний день эту технологию считают устаревшей, преимущество стали отдавать форматам Svg и Png с разрешением ICO, они хорошо отображаются и мало весят. Первый используется в Safari MacOS, второй — в остальных операционных системах.

Стандартными размерами считаются 16х16, 32х32, 60х60 и 120х120 пикселей, при этом важно, чтобы показатели ширины и длины иконки были равными. При соблюдении технических параметров фавиконов, иконки сайтов будут правильно и хорошо отображаться на любых устройствах и именно с той картинкой, которую вы задумали.

Сам размер картинки нужно подбирать в зависимости от типа и операционки устройства.

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

Требования к фавиконке

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

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

Существует много онлайн-сервисов для создания иконок сайтов в нужных размерах и форматах.

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

  1. Со сплошной заливкой, который применяется в сетчатых закладках и контекстных меню, где устройство или браузер для достижения единообразного контекста использует маску к фону;
  2. С прозрачным фоном, которыми пользуются крупные популярные сайты мира. Такая иконка оптимизированная для размещения рядом с url-адресом или именем самого сайта.

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

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

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

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

Особенности фавиконов для разных платформ

Фавикон для сайта — это не просто файл Favicon.ico, который расположен в середине ресурса. В настоящее время, когда присутствует так много платформ и устройств, рекомендовано генерировать большое число изображений, необходимых для настольных браузеров, устройств Android, iPhone/ iPad, совместимых с Windows, Mac, iOS и т.д.

Устройства iOS используют сенсорный значок Apple с высоким разрешением для иллюстрации закладок и ярлыков на главном экране. IPhone первого поколения требуют изображения 57х57, а вот новый iPad с наличием Retina-дисплея ищет изображения размером от 114х114 до 180х180.

Для Android Google рекомендует выбирать фавиконы размером 192х192 пикселей, изображения которых сохранены в формате .png.

Для iOS Safari приходится формировать миниатюрное изображение под названием apple touch icon. Это фавикон хорошего качества и с высоким разрешением в формате .png, его размерные параметры составляют 180х180. Пользователи iOS смогут добавить сайт на главный экран посредством использования функции Web Clip. В данном случае иконки будут выглядеть, как приложение.

Как уже писали выше, в Safari Mac OS дела обстоят иначе. Чтобы добавить иконку, в данном случае нужно использовать формат .svg, при этом иконку следует делать плоской, простой, без наличия тени. Только тогда она будет правильно воспроизводиться при закреплении вкладки в браузере Safari.

По-прежнему для десктопного браузера можно встретить устаревший формат . ico. Он присутствует в браузерах IE 10 и младших версий, а так как .png в них не поддерживается, то чтобы иконки корректно отображались на сайте, в коде нужно прописать сочетание из .ico и .png форматов. Допустимыми размерами для десктопа являются фавиконки таких размеров: 16х16, 32х32, 48х48. Есть и другой вариант — можно применить формат .svg, в котором нет конкретного размера. Помогла ли вам статья?

348 раз уже помогла

Комментарии: (0) Написать комментарий

Как Сделать Фавикон — Что Можно И Чего Нельзя Делать

Эта крохотная деталь выделит ваш бизнес в глазах клиентов. Не стоит забывать о скромном фавиконе, когда вы создаёте свой бренд.

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

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

Итак, что такое фавикон?

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

Слово «фавикон» — это сокращённая версия «избранного значка», но у него есть и другие названия:

  • Значок ярлыка
  • Значок сайта
  • Значок закладки

Однако все они означают одно и то же.

Появившись на свет ещё в 1999 году, фавиконы были представлены пользователям Интернета с запуском Internet Explorer 5.

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

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

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

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

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

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

Теперь, когда вы знаете, что такое фавикон, вы, вероятно, захотите разместить его на своём сайте.

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

Если вы хотите узнать, как сделать фавикон, — то в этом нет ничего сложного.

Существуют разные варианты. Вы хотите создать фавикон самостоятельно, или чтобы генератор фавиконов сделал всю работу за вас?

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

1. Создайте изображение

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

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

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

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

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

Убедитесь, что вы не нарушаете эти негласные правила фавиконов:

  • Никаких фото. Ни одна фотография не будет достаточно чёткой в том размере, который поместится на вкладке браузера.
  • Никаких слов. Конечно, вы можете использовать одну, две или даже три буквы в своем фавиконе, особенно если это часть вашего логотипа. Но отдельные слова? Забудьте об этом.
  • Никаких маркетинговых уловок. Хотя фавикон отлично подходит для брендинга и дополняет общую картинку, он не является местом для рекламных инструментов, таких как «новые» или «распродажные» баннеры.
Используйте правильный размер

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

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

Используйте правильный формат

Хотя раньше фавиконы приходилось сохранять как .ico файлы, теперь .png формат тоже принимается. Вы также можете использовать такие инструменты, как например, faviconer.com, для преобразования файлов в формат .ico.

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

Используйте правильный стиль

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

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

2. Загрузите изображение на свой сайт

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

Просто переименуйте файл изображения .png или .ico в «favicon» и загрузите файл в корневой каталог своего сайта.

Если ваш фавикон в формате .png, вам, скорее всего, потребуется загрузить несколько файлов, соответствующих всем требованиям к размеру.

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

3. Добавьте базовый HTML-код

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

Тем не менее, стоит добавить базовый код, чтобы значок был виден в любом браузере.

Вы можете создать HTML-код «link rel= shortcut icon», открыв файл header.php и набрав его ниже или после тега:

<link rel=“shortcut icon” type=“image/ico” href=”/favicon.ico>

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

4. Сделайте фавикон универсальным

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

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

Значки Apple Touch представляют собой сайты, которые были сохранены на главном экране телефона или планшета Apple.

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

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

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

Наконец, стоит добавить на свой сайт отдельный HTML-код для значков Apple Touch. Кодировка будет выглядеть примерно так:

<link rel=”apple-touch-icon” sizes=180×180” href=”/apple-touch-icon-180×180.png>

Как сделать фавикон еще проще

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

И, вероятно, вам любопытно, как второй вариант может быть еще проще — в конце концов, и это было довольно просто.

Войдите в конструктор сайтов.

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

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

Итак, давайте рассмотрим шаги по созданию и загрузке фавикона на ваш сайт с помощью инструмента-генератора, на примере Zyro.

1. Выберите шаблон

Вы можете выбрать один из предустановленных шаблонов Zyro или загрузить собственное изображение.

2. Настройте до идеала

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

3. Сохраните и действуйте

Готово — пора загрузить фавикон в виде файла . png или .ico и опубликовать его на своём сайте.

Когда придёт время загрузки созданного вами фавикона на ваш сайт Zyro, вам не придётся писать код или конвертировать. Нужно всего несколько кликов.

Просто зайдите в редактор Zyro. Если у вас несколько веб-сайтов, выберите тот, на который хотите загрузить фавикон.

Выберите Общие настройки в выпадающем меню настроек, найдите значок Фавикон и разверните доступные вам параметры.

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

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

Если вас это устраивает, нажмите Сохранить изменения, и ваш фавикон будет загружен.

Теперь вы знаете как сделать фавикон!

Фавикон (favicon)

Фавикон — это небольшая картинка, которая отображается в сниппете в результатах поиска Яндекса, рядом с адресом сайта в адресной строке браузера, около названия сайта в Избранном или в Закладках браузера.

Пример отображения фавикон в результатах поиска (рис.1):


Рисунок 1.

Заметка

Требования к фавиконке
Размер: 120 × 120 пикселей (рекомендуемый), 16 × 16, 32 × 32.
Формат: ICO (рекомендуемый), GIF, JPEG, PNG, BMP.

Внимание

Формат SVG загрузить можно, написав в техническую поддержку по почте [email protected]. К сообщению необходимо прикрепить изображение в формате svg. Но, обратите внимание, что многие почтовые сервисы, например, такие как Gmail.com, Mail.ru и Yandex.ru не поддерживают формат .svg, поэтому в сообщениях, отправленных на почту клиенту, не будет отображаться логотип.

Подробнее о требованиях Яндекса можете ознакомится по ссылке.

 

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

Перейдите в пункт меню «Настройки — Общие настройки» (рис.2), в открывшейся странице вкладка «О магазине» и в строке «Favicon в адресной строке браузера» нажмите «Добавить изображение», либо «Добавить изображение по ссылке» (рис. 3).


Рисунок 2.


Рисунок 3.

Таким образом вы установите favicon на сайт, если нужно удалить, то нажмите «Удалить изображение», если нужно изменить, то сначала удаляете и загружаете новую картинку.

Внимание

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

Favicon на сайте отображается на вкладке сайта в строке браузера (рис.4).


Рисунок 4.

Внимание

Для отображения в результатах поиска Яндекс загружает фавиконку с HTTPS-версии сайта, если она доступна. Если нет — фавиконка не отображается (рис.5).
Подробнее про HTTPS и SSL здесь.


Рисунок 5.


Как создать favicon самостоятельно

Если вы решили создать фавикон самостоятельно, то можно использовать онлайн сервисы, их достаточно много, покажем на примере: https://pr-cy. ru/favicon/

Загрузите картинку и нажмите «Создать Favicon» (рис.6).


Рисунок 6.

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


Рисунок 7.

Рассмотрим другой сервис для создания favicon — https://www.favicon.cc/

Нажмите «Import Image» и загрузите картинку с которой вы хотите сделать favicon, либо создайте самостоятельно путем рисования по клеткам (рис.8).


Рисунок 8.

Ниже в разделе «Preview» показано как выглядит фавикон и если все подошло, то скачайте нажав на кнопку «Download Favicon» (рис.9).


Рисунок 9.

Все готово. Мы рассмотрели как создать favicon и загрузить его на сайт.

Тэги: favicon, favic, фавиконку на сайте, Как установить фавиконку, в поисковике фавикон, как создать фавикон, иконка сайта, как изменить иконку сайта

Создать Favicon

Генератор Favicon — это бесплатный онлайн сервис, который поваляет создавать иконки и значки (файл favicon. ico) для вашего сайта. Данный инструмент позволяет создавать Favicon всех популярных размеров, таких как: 16х16, 32х32, 48х48, 64х64, 128х128. Выберите размер и изображение (JPG, GIF, PNG), которое вы хотите конвертировать в формат ICO с вашего компьютера и нажмите Создать.

Создать фавикон

Для создания favicon необходимо:
  1. Выберите размер вашего фавикона
  2. Выберите файл и нажмите Создать Favicon
  3. Сохраните полученный Favicon на свой компьютер

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

  1. После создания Favicon через наш инструмент, скачайте его на ваш компьютер.
  2. Загрузите фавикон в корневую директорию вашего сайта, чтобы он был доступен по адресу https://yoursite.com/favicon.ico
  3. Скопируйте код ниже и вставьте в ваш HTML внутри тегов HEAD
    • rel — тип ресурса: icon или icon shortcut
    • href — адрес файла
    • type — тип передаваемых данных. Зависит от формата файла.
      • image/x-icon — для формата ICO;
      • image/gif — для формата GIF;
      • image/jpeg — для формата JPEG;
      • image/png — для формата PNG;
      • image/bmp — для формата BMP.

Примечание. Если в HTML-коде страницы ссылка на фавиконку прописана несколько раз, робот выберет иконку на свое усмотрение. Например, указаны 2 разные иконки, чтобы соответствовать разным поисковым системам.

Требования Яндекса к фавиконке

Примечание: Для отображения в результатах поиска Яндекс загружает фавиконку с HTTPS-версии сайта, если она доступна. Если нет — фавиконка не отображается.
  • Размер: 16×16, 32×32, 120×120 пикселей.
  • Формат: ICO (рекомендуемый), GIF, JPEG, PNG, BMP.

Требования Google к фавиконке

  • Размер: значок сайта должен быть квадратным и иметь размеры, кратные 48 пикселям, например: 16×16, 48×48, 96×96, 144×144 пикселей
  • Формат: ICO (рекомендуемый), GIF, JPEG, PNG, BMP.
  • Убедитесь, что значок сайта хорошо выглядит при разрешении 16×16 пикселей, так как для показа в результатах поиска масштаб значка будет изменен. Учтите, что добавлять значок размером 16 x 16 пикселей не следует.
  • Значок сайта должен служить графическим представлением вашего бренда. Это поможет пользователям быстро узнать ваш сайт при ознакомлении с результатами поиска.

Отображение фавиконки

Если робот загрузил favicon, она появится в результатах поиска в течение двух недель. Примечание. Если робот не может получить доступ к вашей фавиконке, он скачает изображение, например, из тега apple-touch-icon, и использует его для отображения фавиконки в результатах поиска и рекламных кампаниях. Если во время обхода сайт недоступен для робота, может скачаться фавиконка хостинга со страницы-заглушки сайта. Поэтому в поиске вместо вашей фавиконки отобразится произвольная иконка.

Как сделать Favicon. Онлайн генераторы.

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

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

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

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

Давайте рассмотрим несколько таких сервисов.

Генераторы Favicon

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

2. FV Erstellen – простой и достаточно удобный онлайн генератор иконок от немецких умельцев. На мой субъективный взгляд, он имеет много общего с немецкими автомобилями и немецким проном, в том плане, что получается качественно, но придется поеб*ться!

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

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

5. Genfavicon – это самизнаетекто, при помощи которого, можно создать самизнаетечто в 3 простых шага:

  1. Загружаете понравившееся вам изображение (но не более 4мб) на сервер.
  2. Выбираете необходимый размер будущей иконки
  3. Ву-аля, получаете иконку

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

Галереи Favicon

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

1. Fineicons – не особо большая галерея, так-как сервис больше ориентирован на продажу иконок по смешным ценам, но поглазеть все равно есть на что.

2. MpP Favicon Gallery – огромная галерея иконок на любой вкус и цвет. Здесь реально есть чем поживиться и зарядиться вдохновением на не один десяток иконок.

В заключении

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

Автор: ТОха

Как создать значок Favicon (.ICO) в Photoshop

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

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

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

Как должен выглядеть фавикон?

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

Характеристики значка Favicon (файл .ICO)

Фавикон:

  • Квадратный рисунок
  • 16 x 16 пикселей (хотя вы можете начать с 64 x 64, чтобы дать вашему дизайну больше свободы)
  • Заканчивается расширением .ico .

Фавикон изначально был представлен в более ранней версии Internet Explorer и поддерживал только формат .ico. Сегодня большинство современных браузеров поддерживают другие графические форматы фавикона, помимо .ico (PNG, GIF (включая анимированные GIF-файлы)), но .ico чаще всего используется во всех браузерах и, следовательно, является стандартом, который вы должны использовать для своего веб-сайта.

Создайте свой файл Favicon (.

ICO) в Photoshop

Создайте новый файл в Photoshop. Хотя вы хотите получить квадрат 16×16 пикселей, вы можете начать с 32×32 или 64×64, чтобы у вас было больше места для работы. Импортируйте квадратную версию вашего логотипа или значка для представления вашего бренда в Photoshop. Затем скопируйте и вставьте его в новый файл.Используйте инструмент преобразования (удерживая клавишу Shift, чтобы сохранить пропорции), чтобы изменить размер и убедиться, что измененный размер 16 × 16 по-прежнему выглядит хорошо. Когда вы закончите, перейдите к «Сохранить для Интернета» и сохраните в формате .png с разрешением 72 DPI (точек на дюйм).

Скрытый файл в .ICO с помощью Converter Tool

Зайдите на ICO Converter — бесплатный веб-сайт, который преобразует ваш файл .png в .ico. Нажмите «Обзор» и импортируйте созданный файл .png. Выберите размер и разрядность и сохраните на свой компьютер.

Добавьте значок Favicon на свою веб-страницу

После того, как вы получите свою фавиконку. ico сохранен и готов к работе, вы можете добавить его на свой веб-сайт следующим образом. В заголовок каждой веб-страницы вам нужно добавить следующий код (замените example.com/favicon.ico каталогом, в который вы загрузили свой значок):

.

Мы не рекомендуем вам использовать относительный путь (href=»favicon.ico»), поскольку это может привести к потере путей при перемещении вашего веб-сайта, а также к краже ссылок.Вместо этого используйте абсолютный путь (включая доменное имя), как в примере выше. Вы должны иметь возможность скопировать и вставить этот URL-адрес в свой веб-браузер и увидеть значок значка.

Загрузите Favicon на свой веб-сервер

После того, как вы добавите URL-адрес файла favicon на свою веб-страницу, вам нужно убедиться, что favicon.ico действительно находится там, где вы его указали (в приведенном выше примере, в корне вашего документа (корневая папка вашего веб-сайт — например, /public_html или /www на серверах Linux)).

См. Favicon в действии!

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

Photoshop по-прежнему лучший?

Adobe Photoshop по-прежнему является стандартным программным обеспечением для редактирования фотографий, но является ли он лучшим? Наши эксперты углубляются и узнают в нашем обзоре Photoshop.Узнайте, на что способна последняя версия Photoshop, а также чем она отличается от конкурентов!

Удалось ли вам создать и отобразить свой новый значок?

HTML Favicon: практическое руководство

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

Вы заметили, что все или 99% вкладок вашего браузера имеют собственный отличительный логотип сбоку? Что ж, это была самая крутая вещь (еще в 1999 году), когда Internet Explorer впервые ее поддержал.

Это маленькое изображение или иконка favicon, обозначающая любимую иконку. Фавиконки не обязательны, но они распространены на большинстве веб-сайтов. Они также используются для ярлыков на нескольких устройствах. Таким образом, все веб-сайты и веб-приложения должны использовать фавиконы, чтобы выделиться.

Что такое значок HTML Favicon?

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

Фавикон добавляется в тег веб-страницы. Тег — это место, куда помещается вся так называемая «мета» информация. Метаинформация — это сведения о самой веб-странице, например заголовок страницы.

Favicon HTML: традиционный способ добавления Favicon

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

Сначала вы должны убедиться, что ваше изображение является либо файлом ICO, либо сохранить его в формате PNG (для сохранения прозрачности). Размер файла должен быть не менее 16×16. Затем конвертируйте изображение в формат ICO.

Почему мы переходим на ICO? Мы делаем это, потому что браузеры имеют много разрешений, а фавиконы используются в качестве ярлыков.Файл ICO будет содержать множество изображений PNG для поддержки различных разрешений и ярлыков. Но у ICO есть свои недостатки, о которых мы поговорим чуть позже.

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

Найдите свой матч для буткемпа

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

Начните свою карьеру сегодня

Вы можете использовать один из множества онлайн-инструментов для преобразования ICO из изображения PNG.

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

.
 <ссылка rel="icon" href="/favicon.ico" type="image/x-icon">

Обновите и проверьте всплывающую иконку на вкладке! Ветер.

Местоположение нашего изображения — /favicon.ico. Имеется в виду файл favicon. ico в корневой папке нашего сайта.Корневая папка — это основная папка, обычно та, в которой находится файл index.html.

Примечание . Если вы получаете сообщение об ошибке «favicon.ico Not Found», убедитесь, что значок называется favicon.ico . Затем убедитесь, что ваша иконка находится в основной папке вашего сайта. Наконец, убедитесь, что ваш index.html размещен в файле, который вы запрашиваете на своей веб-странице.

Favicon HTML:

Более совместимый способ добавления Favicon

Вы могли заметить, что фавикон работает не во всех системах.Это связано с тем, что формат ICO уже не так надежен . Чтобы исправить это, HTML5 представил атрибут размеров , чтобы мы могли напрямую полагаться на файлы PNG. Сегодня нам не обязательно сжимать PNG в ICO!

Мы можем сохранить наше PNG-изображение в трех размерах, чтобы оно соответствовало favicon.ico (16×16), панели задач (32×32) и ярлыкам (96×96). Тогда наш тег HTML можно изменить как:

Найдите свой тренировочный лагерь