Нарисовать фавикон: Нарисовать Favicon онлайн — katvin.com

Разное 

Содержание

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

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 для сайта

Что такое Favicon?

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

Думаю, каждый из вас замечал favicon, посещая любимые сайты. Выглядит это следующим образом (в браузере Google Chrome):

И для сравнения, отображение иконки в браузере Internet Explorer:

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

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

Рисуем Favicon с помощью веб-сервиса

Самый простой способ сделать фавикон – воспользоваться сервисом www.favicon.cc. Выглядит он так:

Чтобы нарисовать иконку, нужно просто выбрать нужный цвет, прозрачность и нарисовать нужные контуры. При создании иконки сразу есть возможность предпросмотра:

Создаем Favicon из готового изображения

Для того, чтобы конвертировать готовую иконку в формате .png (который, кстати, тоже может использоваться для задания favicon), можно воспользоваться другим веб-сервисом: favicon.ru.

Устанавливаем Favicon на сайт

Когда иконка будет готова, вы сможете ее скачать в формате . ico. Чтобы добавить favicon на сайт, поместите файл favicon.ico в корневой каталог сайта и добавьте между тегами <head></head> строчку:

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

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

Также рекомендуется добавлять строку:

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

(для Internet Explorer).

Размер фавикона может быть 16×16, 32×32.

Полезное замечание

Файл иконки может иметь не только расширение .ico, но и .png, причем рекомендуется использовать последний вариант. Это связано с тем, что устройства с высоким разрешением дисплея (например, iPhone, iPad, iPod) по умолчанию имеют размер иконки 57×57. Для этого лучше делать второй вариант иконки (в более высоком разрешении) и прописывать дополнительно строку:

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

Но стоит отметить, что в таком случае иконка будет скруглена по углам и на нее будет наложен блик (это делается автоматически самим устройством). Для того, чтобы этого избежать, вместо apple-touch-icon нужно написать apple-touch-icon-precomposed.

последних фавиконов — Faviconer

  • Создать новый фавикон
  • Загрузить — Импортировать изображение
  • Последние файлы Favicon .ICO
  • О Faviconer

Просмотр 1-11 из 225452 FAVICONS

Создан: Апрель 4, 2023

Автор: Lebari Okoro

Страна: Нигерия, NG

Размер файла:

911119111111111111111111111111111111111110091111111111111111111111112 ЦВЕТА.111111111111112 ЦЕЛЕЙСКОЙ

Popular Tags0013

photographyvideosTVUnited KingdomflashfashioniPhonedevelopmentnoticiasshopmp3ITIndustryreal estatewebsite hostingfilmMoviescssCanadanatureEntertainmentphotosUKsearch engine optimizationwordpressinternet marketingGameMobilephotoHostdvdinformationlinuxweb hostreviewsadvertisingcomputerBookstrainingdomainGratismediaappleecommercemagazinePortalwindowsfoodChatIndialogodirectoryweb hosting provideruniversityKidsfootballAutohtmlwebsitesservicesdigitalconsultingsearchonline marketingArchitecturelondonbrandingturismoPortfolioGermanyPCaccommodationaustraliaMagentoOnline Gamesopen-sourcebuy3DsiteFranceandroidpoliticsnetworkdesignerarticlessocialfitnessiPadsocial mediaHomepageBlogsgreenWeb DesignerschoolmysqlrestaurantMealillustrationbeautyservicecompanyMultimediaMagyar TelekomweatherberlinguidefreelanceJobresearchlogo designWeb ToolsNGO sFacebookpicturesdatingGamingBlueForexaudionewspapercollegeAsiaManagementfree gameswebsite developmentblackgraphicagencycaremailJavaCclothingDownloadsrockmacFinancerestaurantsVarienphotoshopjavascriptweb design companykeywordsmovieinternationalhumorhardwaresecuritycars

  • Дата создания: 28 марта 2023 г.

    Автор: Fran Davies

    Страна: Chatham, United Kingdom, GB

  • Дата создания: 25 марта 2023 г.

    Автор: Suzy Saythong

    Страна: Brampton, Canada, CA

  • Дата создания: 25 марта 2023 г.

    Автор: Suzy Saythong

    Страна: Brampton, Canada, CA

  • Дата создания: 24 марта 2023 г.

    Автор: Suzy Saythong

    Страна: Brampton, Canada, CA

  • Дата создания: 3 февраля 2023 г.

    Автор: lutinetgazelle

    Страна: Баньоле, Франция, FR

  • Дата создания: 30 января 2023 г.

    Автор: Вукота Стошич

    Страна: Белград, Сербия, RS

  • Дата создания: 18 января 2023 г.

    Автор: Troy Reiner

    Страна: Уичито, США, США

  • Дата создания: 10 января 2023 г.

    Автор: Abba john2

    Страна: Нигерия, NG

  • Дата создания: 7 января 2023 г.

    Автор: Jeff Jenkins

    Страна: США, US

  • Дата создания: 30 декабря 2022 г.

    Автор: Edwin Charon

    Страна: Филиппины, PH

Вершина В соответствии

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

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

(Изображение предоставлено Майклом Фларупом)


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

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

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

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

— Правила дизайна фавикона
— Шпаргалка по размерам фавикона
— Фавиконы браузера для ПК
— Фавиконы Apple Touch
— Android, Chrome и Opera
— Закрепленная вкладка Safari

  • Ищем другой вид значка ? См. наш путеводитель по лучшим бесплатным наборам иконок (откроется в новой вкладке)

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

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

Правила дизайна фавикона

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

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

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

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

03. Соблюдайте ясность

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

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

Разные фоны хорошо подходят для разных контекстов (Изображение предоставлено: Michael Flarup / Apply Pixels)

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

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

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

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

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

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

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

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

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

(открывается в новой вкладке)

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

Фавиконка браузера для настольных ПК

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

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

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

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

  • 16×16
  • 32×32
  • 48×48

Apple

Как создать Apple Touch Favicons

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

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

Этот значок будет отображаться на фоне домашнего экрана пользователя (Изображение предоставлено Michael Flarup/Apply Pixels) Вы можете обойтись без иконки Apple Touch 180×180 , которая будет автоматически масштабироваться для различных размеров iPhone и iPad. Это будет работать нормально в большинстве случаев.

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

  • 60×60
  • 76×76
  • 120×120
  • 152×152
  • 180×180

Android, Chrome и Opera

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

Android, Chrome и Opera используют android-chrome-192×192. png и android-chrome-512×512.png , которые Google рекомендует (откроется в новой вкладке).

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

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

Вам нужно создать PNG фавикон со сплошным фоном , 192×192 и 512×512 .

Внедрите эти значки, добавив файл manifest.json на свой сайт и связав его с тегами:

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

 { "имя": "", "short_name": "", "icons": [ { "src": "/android-chrome-
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

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

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

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

  svg">

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

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

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

Подробнее:

  • Лучшие тенденции дизайна на 2020 год (открывается в новой вкладке)
  • 15 профессиональных шрифтов для дизайнеров  (открывается в новой вкладке)
  • 27 лучших наборов бесплатных иконок (открывается в новой вкладке)

Спасибо, что прочитали 5 статей в этом месяце* Присоединяйтесь сейчас, чтобы получить неограниченный доступ

Наслаждайтесь первым месяцем всего за 1 фунт стерлингов / 1 доллар США / 1 евро

У вас уже есть аккаунт? Войдите здесь

*Читайте 5 бесплатных статей в месяц без подписки

Присоединяйтесь сейчас, чтобы получить неограниченный доступ

Попробуйте первый месяц всего за 1 фунт стерлингов / 1 доллар США / 1 евро

У вас уже есть аккаунт? Войдите здесь

Зарегистрируйтесь ниже, чтобы получать последние новости от Creative Bloq, а также эксклюзивные специальные предложения прямо на ваш почтовый ящик!

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

No related posts.

Автор записи

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

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