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

Содержание

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


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

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

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

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

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


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

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

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


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

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


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

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

 


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

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


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

 

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


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

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

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

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



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

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

    Как добавить иконку сайта в адресную строку браузера?

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

    Отображение иконки в строке браузера

    Чтобы установить подобную «фичу», необходимо нарисовать изображение размером 16х16 пикселов и сохранить его в формате ICO в корне сайта под именем favicon.ico.

    Adobe Photoshop не понимает формат ICO и не сохраняет в нем рисунки, так что для этой цели требуется дополнительный плагин.

    Для работы плагина файл необходимо распаковать и сохранить в папке Plug-Ins\File Formats. По умолчанию программа Photoshop CS под Windows устанавливается в папке c:\Program Files\Adobe\Photoshop CS. Тогда полный путь для файла плагина будет c:\Program Files\Adobe\Photoshop CS\Plug-Ins\File Formats.

    Размещение плагина для сохранения файлов в формате ICO

    После добавления плагина, при сохранении рисунка в списке доступных форматов появляется новый пункт «Windows Icon».

    Тип файла для сохранения иконки

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

    Файл не обязательно должен располагаться в корне сайта, но тогда следует указать браузеру, где он находится. Это делается через тег <link>, как показано ниже.

    <head>
     <link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon">
    </head>

    Атрибут href задает расположение и имя файла.

    Формат рисунка не обязательно должен быть ICO, также допускается использование GIF и PNG. При этом необходимо сменить значение атрибута type на image/gif или image/png, в зависимости от типа изображения.

    <head>
     <link rel="shortcut icon" href="/images/favicon.png" type="image/png">
    </head>

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

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

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

    а также в результатах поиска поисковой системы Яндекс

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

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

    Как подключить иконку к своему сайту?

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

    Напомню, тег <link> имеет атрибуты:

    • href - Путь к файлу.
    • rel - Определяет отношения между текущим документом и файлом, на который делается ссылка.
      • shortcut icon - Определяет, что подключаемый файл является иконкой.
      • stylesheet - Определяет, что подключаемый файл содержит таблицу стилей.
      • application/rss+xml - Файл в формате XML для описания ленты новостей.
    • type - MIME тип данных подключаемого файла.

    И пишется в голове документа между тегами <head> </head> следовательно вся запись вместе приобретает следующий вид:

    <head>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    </head>

    Где favicon.ico название иконки лежащей в корневой папке сайта.

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

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

    Однако всё же лучше связывайте иконку со страницей сайта тегом <link>

    Пример:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Иконка сайта</title>
    <link rel="shortcut icon" href="../graphics/favicon.ico" type="image/x-icon">
    </head>
    <body>
    <h2>Моя любимая страничка!</h2>
    <p>Эта страничка использует индивидуальную иконку в виде сердечка.</p>
    </body>
    </html>

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

    Как самостоятельно изготовить файл favicon.ico?

    Способ первый:

    Найти в Интернете готовую подходящую иконку в коллекциях иконок..

    Способ второй:

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

    Всё просто заходите на данный ресурс, загружаете большое размером изображение (желательно квадратное) только весом не более 300кб.. ну например логотип сайта, жмете кнопку "Создать favicon.ico" на выходе скачиваете уменьшенную копию этого изображения 16х16 (а так же по желанию 32х32 и 48х48) пикселей в формате ico. Достаточно удобный ресурс позволяющий быстро создавать иконки приемлемого качества.

    Ну и третий способ:

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

    Лично я пользуюсь не сильно хитрой программкой - редактором иконок, но пользуюсь ей не так, как задумывали авторы.. Я сначала рисую иконку в привычном мне фотошопе, сохраняю её в формате jpg, потом открываю это изображение с помощью этой нехитрой программки и сохраняю его же уже в формате ico. Короче использую программку в качестве "конвертора", а не графического редактора.. программка называется IcoFX впрочем, как уже сказано выше существует куча других программ, так что не стоит останавливаться именно на этой!! Это я к ней приловчился, а Вы, может быть, найдете, что ни будь более удобное для себя.



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

    Иконка веб сайта в браузере и в поисковике

    Иконка сайта – это специальный значок сайта, который отображается в браузерах пользователей интернета. Данный инструмент получил название favicon.

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

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

    Если же владелец ресурса никогда не задавался вопросом,

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

     


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

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

    Создание favicon для сайта 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-192x192.png, которая объявлена у вас в коде.

    Если же подключить к сайту манифест, то при открытии страницы пользователю может быть предложено сохранить сайт в качестве приложения. В данном случае вы имеет возможность объявить визуально ту же иконку (android-icon-192x192.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 — 70x70 (Рекомендуемый размер: 128x128)
    • Medium — 150x150 (Рекомендуемый размер: 270x270)
    • Wide — 310x150 (Рекомендуемый размер: 558x270)
    • Large — 310x310 (Рекомендуемый размер: 558x558)

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

    mstile-70x70

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

    Подготовка 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. Данный сервис покажет, как отображаются ваши иконки на разных платформах, подскажет где и какие могут быть проблемы.

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

    как создать и добавить иконку сайта • SA1NIKOV.RU

    Автор Сергей Сальников На чтение 13 мин Опубликовано

    В этой статье разберемся что такое иконка сайта – фавикон (favicon) и как ее создать и установить на сайт. Пройдем весь путь от использования готовых вариантов, до разработки своей собственной. Отвечу на вопросы какие форматы поддерживаются и какого размера должна быть иконка. Также затрону вопрос добавления html-кода фавикона под разные платформы.

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

    Favicon – расшифровывается как Favorite Icon (“значок для избранного”). Он был придуман еще в прошлом веке. В марте 1999 года, браузер Internet Explorer 5 стал первым поддерживать эти значки. По сравнению с 99 годом, интернет-технологии ушли далеко вперед, а иконка осталась и используется по сей день. Конечно, за пару десятков лет она претерпевала ряд усовершенствований, о некоторых из них мы сегодня поговорим.

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

    Так выглядит иконка сайта в поисковой выдаче Яндекса

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

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

    В самом начале, иконка имела расширение ICO, но сегодня этим дело не ограничивается. Ее можно встретить в таких форматах как GIF, JPEG, PNG и SVG. Большинство форматов поддерживаются всеми современными интернет-браузерами. Вот небольшая сравнительная таблица, для наглядности:

    БраузерICOPNGGIFJPGSVG
    ChromeДаДаДаДаДа
    FirefoxДаДаДаДаДа
    OperaДаДаДаДаДа
    EdgeДаДаДаНетДа
    IEДаДаДаНетНет
    SafariДаДаДаДаДа

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

    Раньше фавикон можно было делать в BMP-формате, но на сегодняшний день он уже устарел и практически нигде не используется. Наверное, самые распространенные варианты – это ICO, PNG и GIF, так как поддерживают прозрачность. Хотя формат ICO тоже потихонечку устаревает. Как, впрочем, и GIF (по крайней мере для иконок). Рекомендую использовать PNG-формат, как наиболее универсальный и поддерживаемый. Некоторые умельцы делают себе анимированную GIF иконку, но анимация поддерживается только в Firefox, поэтому это практически бессмысленно.

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

    Размер иконки

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

    Рекомендация Яндекса по размеру и формату favicon

    В свою очередь Google рекомендует иконки кратные 48 пикселям – 48х48, 96х96, 144х144. Однако это касается десктопных браузеров. У телефонов плотность пикселей гораздо выше, да и количество иконок там помещается меньше, даже при аналогичном разрешении с монитором. Поэтому слишком маленькая иконка может выглядеть размытой, при масштабировании. Для современных смартфонов на Android рекомендуют 192х192, для iPhone – 180×180.

    Favicon для Android:

    • 36×36 – для экранов с коэффициентом плотности 0.75
    • 48×48 – для экранов с коэффициентом плотности 1
    • 72×72 – для экранов с коэффициентом плотности 1.5
    • 96×96 – для экранов с коэффициентом плотности 2
    • 144×144 – для экранов с коэффициентом плотности 3
    • 192×192 – для экранов с коэффициентом плотности 4

    Favicon для Apple:

    • 57×57 – для iPhone с не ретина дисплеем и iOS версии 6.0 и ниже
    • 60×60 – для iPhone с не ретина дисплеем и iOS версии 7.0
    • 72×72 – для iPad с не ретина дисплеем и iOS версии 6.0 и ниже
    • 76×76 – для iPad с не ретина дисплеем и iOS версии 7.0
    • 114×144 – для iPhone с ретина дисплеем и iOS версии 6.0 и ниже
    • 120×120 – для iPhone с ретина дисплеем и iOS версии 7.0
    • 144×144 – для iPad с ретина дисплеем и iOS версии 6.0 и ниже
    • 152×152 – для iPad с ретина дисплеем и iOS версии 7.0
    • 180×180 – для iPhone 6 Plus c iOS версии 8.0

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

    Для того чтобы создать сам favicon, есть два основных способа. Первый – ручная отрисовка иконки на специализированных онлайн-сервисах или при помощи графических редакторов типа Photoshop. Второй – скачать и использовать уже готовые иконки. Рассмотрим оба варианта по порядку.

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

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

    Скриншот сервиса favicon.by для созания фавиконки

    Как правило, эти сервисы позволяют не только рисовать, но и конвертировать графический файл в стандарт ICO. Вот несколько еще существующих онлайн сервисов:

    • Favicon.cc – англоязычный сервис.
    • Favicon.by – русскоязычный сервис.

    Устарели эти сервисы потому, что ограничены малым разрешением – 16х16 пикселей. А также из-за того, что сохраняют иконку в уходящем потихоньку на покой формате ICO.

    Скачивание готовых фавиконок для сайта

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

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

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

    Отрисовка иконки в фотошопе

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

    Редактирование скаченной иконки сайта в фотошопе

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

    Как сохранить или конвертировать в ICO

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

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

    Как установить favicon на сайт: html-код

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

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

    Добавление иконки сайта в Вордпресс

    Если у вас другая CMS-система, то настройки могут быть в другом месте. Однако, даже если их нет, иконку сайта можно добавить и через html-код, который нужно прописать в секцию <head>. Обычно она тоже выносится в куда-то настройки. В нее вставляются счетчики метрики, гугл аналитики, скрипты онлайн-консультантов и т.д. Туда же добавляется и html-код для фавикона. Если таких настроек нет (такое тоже может быть), то ищите файл шаблона вашей темы, который отвечает за кусок кода в <head>.

    Десктопные браузеры (chrome, firefox, opera)

    Вставка иконки осуществляется через тег <link>. Тег универсальный и используется не только для установки иконок. Выглядит в коде примерно так:

    <head>
        ...
        <link rel="icon" href="/favicon.ico" type="image/x-icon">
        ...
    </head>
    

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

    АртибутОписаниеВозможные значения
    relТип ресурсаicon — учитывается большинством браузеров;
    shortcut icon — учитывается браузером Internet Explorer;
    apple-touch-icon — для браузера Safari и устройств Apple;
    mask-icon — маска для монохромных векторных иконок в Safari и на Touch Bar в MacBook;
    manifest – для устройств на Android.
    hrefАдрес файлаПуть до иконки. Для кириллических доменов нужно использовать Punycode-конвертер.
    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.
    sizesВысота и ширина (не обязательный)any — любой размер;
    ВхШ — заданный размер.

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

    Последовательность атрибутов может быть любая. Например, если необходимо прописать ICO для старых браузеров (типа IE), и 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">
    

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

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

    Браузер Safari и Apple устройства

    Код практически ничем не отличается, за исключением атрибута «rel». В данном случае он должен иметь значение «apple-touch-icon». Размер иконки лучше использовать максимальный 180х180 пикселей, без прозрачного слоя. Но вы можете указать и несколько размеров иконок, как и в примере выше. Углы иконки автоматически будут скруглятся при добавлении на главный экран.

    Получаем вот такой код:

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

    Помимо этого, в Apple поддерживается и иной формат иконок – монохромная векторная иконка, окрашенная в определенный цвет (по маске). Для этого в артибут «rel» прописывают значение «icon-mask» и дополнительно прописывается новый атрибут «color», который и задает нужный цвет. В коде выглядит так:

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

    Иконка при этом должна быть в векторном SVG-формате.

    Устройства на Android

    Тут иконку также лучше использовать большую, например, 192х192 пикселя. Подключение иконки происходит также через тег <link>, однако вместо адреса иконки указывается JSON-файл (спецификация WebApp Manifest), внутри которого уже и прописываются иконки. В атрибуте «rel» присваивают значение «manifest». По итогу, должно получится что-то похожее:

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

    Сам файл должен иметь похожее содержание:

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

    Устройства Windows и браузеры Edge, IE

    Дополнительно можно прописать иконки для плиток в операционной системе. Их поддерживает Windows 8 и 10 версий. Также браузеры от Microsort (IE и Edge) используют этот стандарт. Правда формат PNG поддерживается только начиная с версии IE 11. Для IE 10 версии нужно использовать ICO.

    Иконки в плитках в ОС Windows 10

    Установка такой иконки делается уже не через тег <link>, как было до этого. Вызов происходит следующим образом:

    <meta name="msapplication-TileColor" content="#fff000">
    <meta name="application-name" content="MyApp">
    <meta name="msapplication-TileImage" content="/ms-tile-144x144.png">
    

    В атрибут «name» задается имя переменной, в «content» – значение.

    • msapplication-TileColor — цвет плитки;
    • application-name — имя сайта;
    • msapplication-TileImage — путь к иконке.

    Размеры плиток определенные Microsoft:

    • Маленькая — 70×70 (Рекомендуемый размер: 128×128)
    • Средняя — 150×150 (Рекомендуемый размер: 270×270)
    • Широкая — 310×150 (Рекомендуемый размер: 558×270)
    • Большая — 310×310 (Рекомендуемый размер: 558×558)

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

    Начиная с версии 8.1 можно использовать файл «browserconfig.xml». Для вызова нужно использовать следующий код:

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

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

    <?xml version="1.0" encoding="utf-8"?>
    <browserconfig>
      <msapplication>
        <tile>
          <square70x70logo   src="/ms-tile-128.png"/>
          <square150x150logo src="/ms-tile-270.png"/>
          <wide310x150logo   src="/ms-tile-558x270.png"/>
          <square310x310logo src="/ms-tile-558.png"/>
          <TileColor>#009900</TileColor>
        </tile>
      </msapplication>
    </browserconfig>
    

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

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

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

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

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

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

    Вот где можно увидеть такую иконку:

    • Закладки и вкладки браузера
    • Результаты поиска Яндекс, Google
    • Каталоги и рейтинги, которые загружают favicon сайтов
    • Панель задач и рабочий стол операционной системы

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

    Где взять иконку для сайта?

    По умолчанию все сайты uCoz имеют стандартный favicon. Чтобы получить свою иконку сайта, вы можете сделать следующее:

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

    При создании файла favicon.ico важно знать, что иконка должна быть квадратной. Рекомендованные размеры 16х16, 32х32 и 48х48 пикселей.

    Наряду с расширением .ico, в настоящее время используются иконки формата .png. Разрешение таких изображений может достигать 180x180 пикселей.

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

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

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

    Важно! Чтобы иконка отобразилась сразу, достаточно открыть ее по прямой ссылке http://ваш-сайт.ру/favicon.ico и несколько раз выполнить комбинацию клавиш CTRL+F5. В результате вы в кеше обновите иконку на новую, далее при открытии главной страницы сайта просто обновите ее несколько раз и иконка в вкладке должна обновиться на новую.

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

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

    В Windows 10 есть плитки, иконки к которым могут быть объявлены следующим образом:

    <meta name="msapplication-square70x70logo" content="tile-70x70.png" />
    <meta name="msapplication-square150x150logo" content="tile-150x150.png" />
    <meta name="msapplication-wide310x150logo" content="tile-310x150.png" />
    <meta name="msapplication-square310x310logo" content="tile-310x310.png" />
    

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

    Favicon Generator - Текст в Favicon

    Почему favicon.io?

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

    Начало работы с генератором значков

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

    Делаем фон простым

    Затем выберите форму фона.Есть три простых Доступны формы: квадрат, круг и закругленная. Эти наиболее распространенные формы, используемые для создания значка. Ты можешь видеть примеры этих форм с ProductHunt, IndieHackers и HackerNews.

    Выбор шрифта для фавикона

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

    Пошив цветов

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

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

    Если у вас есть бизнес-сайт, то вам нужен фавикон.

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

    © Баланс 2019

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

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

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

    Почему его вообще называют «фавикон»? По словам одного из первых инженеров Internet Explorer, присутствовавших при его изобретении, «favicon» - это сокращение от «Favorite Icon», и он должен был упростить поиск веб-сайтов в длинных списках закладок (или «Избранное», как они назывались в Internet Explorer).

    Что работает в дизайне фавиконов

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

    Вам также не всегда нужно изображение. Вы также можете использовать буквы в качестве значка. Например, если ваш веб-сайт называется MangoBicycles.com, вы можете использовать «MB» красивым шрифтом в качестве значка. Гораздо лучше иметь значок в виде букв, чем вообще ничего.

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

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

    Как установить Favicon

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

    Где и почему используются значки значков

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

    Фавиконы на вкладках веб-сайта

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

    Favicons отображается в поиске Google для мобильных устройств и в некоторых поисковых системах

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

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

    Фавиконы хороши для брендинга

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

    Итог использования значка веб-сайта для вашего бизнеса

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

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

    Вы можете встретить термин 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.Он с энтузиазмом относится к тому, чтобы оказывать положительное влияние на людей, используя методы разработки, ориентированные на пользователя. Хотя ему нравится программировать и изменять мир, он втайне мечтает стать рок-звездой.

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


    Дизайн Favicon важнее, чем вы думаете. Размер здесь действительно имеет значение, так как хорошо продуманный логотип должен быть узнаваемым в любом размере. Его нужно масштабировать от огромных экранов до значка размером 16 x 16 пикселей, известного как значок.Отличный пример дизайна фавикона - логотип Google. Он идеально подходит для больших экранов с большой буквой G и характерным четырехцветным текстом. И он все еще так же узнаваем, когда его уменьшили до крошечной четырехцветной буквы G, видимой в адресной строке веб-браузера.

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

    В этой статье мы рассмотрим процесс создания идеального значка. Мы включим конкретные советы по созданию значка для устройств Apple, Android, Chrome, Opera и Safari. Плюс удобное руководство по разным размерам и форматам значков, которые вам необходимо знать. Используйте быстрые ссылки (справа), чтобы перейти прямо к нужному разделу.

    Дизайн фавикона: быстрые ссылки

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

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

    Правила оформления Favicon

    01.Сделайте его узнаваемым

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

    02. Используйте свой логотип

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

    03. Держитесь подальше

    Есть также несколько вещей, которых следует избегать. Не используйте значок в качестве маркетингового инструмента - это означает отсутствие ценников, «новых» или «обновленных» баннеров и т. Д. Фактически, вы вообще не хотите помещать текст внутри значка. Текст плохо масштабируется, и есть вероятность, что он все равно будет неразборчивым.Наконец, не используйте фотографию - она ​​будет мутной и неузнаваемой в том размере, в котором она появится.

    04. Создайте две версии

    Разные фоны хорошо подходят для разных контекстов (Изображение предоставлено Майклом Фларупом / Применить пиксели)

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

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

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

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

    Шпаргалка по размеру фавикона

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

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

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

    Это наиболее распространенные размеры значков (Изображение предоставлено: emergeinteractive)

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

    Фавиконы настольного браузера

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

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

    Фавиконы в классическом стиле, отображаемые на панели закладок и в строке URL в Google Chrome (Изображение предоставлено Майклом Фларупом / Apply Pixels)

    Вам нужно будет предоставить этот тип значка трех размеров, все в формате PNG с прозрачный фон .

    Apple

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

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

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

    Этот значок будет отображаться на фоне рабочего стола пользователя (Изображение предоставлено Майклом Фларупом / Apply Pixels)

    Значки Apple должны быть представлены в формате PNG .Вы можете обойтись без значка Apple Touch 180x180 , который автоматически масштабируется для различных размеров iPhone и iPad. В большинстве случаев это сработает.

    Если нет, вы можете предоставить дополнительные размеры для различных устройств Apple:

    • 60x60
    • 76x76
    • 120x120
    • 152x152
    • 180x180
      
    
    
    
      

    Android, Chrome и Opera

    Как создать значок для Android, Chrome и Opera

    Android, Chrome и Opera используют android-chrome-192x192.png и android-chrome- 512x512.png , который рекомендует Google

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

    Значки здесь будут замаскированы в разные формы в соответствии с предпочтениями пользователя (Изображение предоставлено Майклом Фларупом / Применить пиксели)

    Вам необходимо создать значок PNG с сплошным фоном , 192x192 и 512x512 .

    Реализуйте эти значки, добавив на свой сайт файл manifest.json и сделав ссылку на него в тегах:

        

    Вот код для файла manifest.json :

      {" name ":" "," short_name ":" "," icons ": [{" src ":" / android -хром-
    
    192x192.png "," sizes ":" 192x192 "," type ":" image / png "}, {" src ":" / android-
    chrome-512x512.png "," sizes ":" 512x512 "," type ":" image / png "}]," theme_color ":
    "#ffffff", "background_color": "#ffffff", "display": "standalone"}  

    Safari

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

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

    В отличие от всех других значков, этот значок создается из изображения SVG (Изображение предоставлено Майклом Фларупом / Применить пиксели)

    Этот значок должен быть 100% черным файлом SVG с прозрачным фоном . SVG может быть только одним слоем, и safari требует, чтобы для атрибута viewBox SVG было установлено значение « 0 0 16 16» .

        

    Другие типы значков

    Есть некоторые размеры и форматы значков, которые не были включены в эту статью, например, Google TV, Интернет-магазин Chrome и значки Apple Touch до iOS 7. Почему? Потому что они устарели или потому что они редко актуальны для среднего веб-разработчика.

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

    Подробнее:

    Как создавать собственные веб-значки (3 шага)

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

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

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

    Почему вам следует подумать о создании собственных пользовательских значков веб-сайтов

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

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

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

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

    Как создать собственные значки для вашего веб-сайта (за 3 шага)

    Теперь мы собираемся показать вам, как вы можете создавать свои собственные значки с помощью простого онлайн-инструмента. Доступно множество опций, в том числе Fontastic и Icons Flow, но для этого урока мы будем использовать Futuramo. Эта платформа очень проста в использовании и позволяет вам выбирать значки из ее библиотеки и настраивать их с помощью различных инструментов для создания чего-то уникального.

    Шаг № 1: Создайте учетную запись Futuramo Icons

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

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

    Здесь вы можете нажать на кнопку Icons в центре экрана. Откроется новая страница, полная значков, которую мы рассмотрим на следующем шаге.

    Шаг № 2: Выберите веб-значки, которые вы хотите использовать, и настройте их

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

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

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

    Если вы перейдете к разделу Размер , вы можете изменить размер значка с помощью предустановленных значений или ползунка:

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

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

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

    Шаг № 3: Добавьте новые значки на свой веб-сайт

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

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

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

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

    Иконка веб-сайта Заключение

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

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

    1. Создайте бесплатную учетную запись.
    2. Выберите значки веб-сайтов, которые вы хотите использовать, и настройте их.
    3. Добавьте новые значки на свой сайт.

    Добавление значка главного экрана iOS для вашего веб-сайта

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


    Создание и загрузка вашего значка

    Размер изображения для ярлыка должен быть 150x150 пикселей. Это позволит использовать его на всех устройствах iOS - с обычными дисплеями и дисплеями Retina!

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

    • Необходимо сохранить в формате .png
    • Должен быть назван apple-touch-icon

    После того, как вы создали свой значок, вы можете загрузить его в область Content >> Files в вашей учетной записи Create (не в область изображений).

    Для загрузки значка:

    1. Войдите в свою учетную запись
    2. Нажмите «Содержимое» в верхнем меню.
    3. Нажмите «Файлы» в левом меню.
    4. Нажмите кнопку «Добавить файл»
    5. Следуйте инструкциям, чтобы загрузить изображение

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

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

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

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


    После этого отобразится URL-адрес значка.

    Скопируйте и вставьте этот путь к файлу точно так, как он указан в приведенном ниже коде.

    Чтобы затем добавить этот код в свой собственный:

    1. Нажмите «Содержимое» в верхнем меню
    2. Щелкните значок Параметры страницы рядом со страницей, на которую вы хотите добавить значок
    3. Перейдите на вкладку «Мета-информация»
    4. Вставьте код в поле «Custom»
    5. Сохранить изменения и повторить при необходимости
    6. Чтобы изменения вступили в силу, вам необходимо опубликовать свой сайт.

    Тестирование иконки

    Обновление значка после публикации сайта может занять несколько часов.Когда вы будете готовы к тестированию, просто выполните следующие действия на своем устройстве с iOS (например, iPad или iPhone):

    1. На устройстве iOS откройте браузер Safari и перейдите на страницу своего сайта, на которой вы хотите создать ярлык для
    2. .
    3. Щелкните значок общего доступа в браузере


    4. Выберите опцию «Добавить на главный экран»

    5. На странице «Добавить на главную» вы должны увидеть загруженный вами значок слева

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

    Как добавить значок на свой веб-сайт с помощью HTML

    Часть серии: Как создать веб-сайт с помощью HTML

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

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

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

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

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

    Затем добавьте элемент (выделен ниже) в файл index.html прямо под элементом </code>. Теперь ваш код должен быть таким:</p><pre> <code> ... <title> Первый веб-сайт Сэмми ...

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

    Теперь вы должны знать, как добавлять изображения значков на веб-сайты с помощью HTML.

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

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