Создание значка [закрыто]

Question 1

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

Хотите улучшить этот вопрос? Обновите вопрос, чтобы он соответствовал теме Stack Overflow.

Закрыт 3 года назад .

Уточните этот вопрос

Как я могу создать фавикон для своего сайта?

Question 2

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

Я разозлился и создал свой собственный генератор значков, который создает все эти файлы и правильный заголовок HTML для каждого из них: faviconit.com

Надеюсь, тебе понравится.

Question 3

Если у вас уже есть изображение логотипа, которое вы хотите преобразовать в значок, вы можете преобразовать его с помощью http://www.favicomatic.com/ . Он создает четкие значки, и мне не пришлось редактировать их после создания. Он будет генерировать значки размером 16x16 и 32x32 и цитировать их: «Каждый чертов размер, сэр!». Сайт также поддерживает / сохраняет прозрачность, присутствующую в некоторых png. Кроме того, их сайт выглядит круто и им легко пользоваться.

Например, вот логотип stackoverflow: введите описание изображения здесь

Вот некоторые из созданных значков:

введите описание изображения здесь

Они также генерируют необходимый html:

<link rel="apple-touch-icon-precomposed" sizes="57x57" href="apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="favicon-128.png" sizes="128x128" />
<meta name="application-name" content="&nbsp;"/>
<meta name="msapplication-TileColor" content="#FFFFFF" />
<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-310x150.png" />
<meta name="msapplication-square310x310logo" content="mstile-310x310.png" />

Я посмотрел на первые 20 или около того результатов Google, и они оказались, безусловно, лучшими.

Question 4

GIMP - хорошая программа для этого. Просто сохраните изображение как PNG, затем добавьте

 <link rel="SHORTCUT ICON" HREF="/favicon.png">

в <HEAD>разделе вашей страницы.

Question 5

Вы создаете файл значка размером 16x16, 32x32 или 64x64. Назовите его favicon.ico и поместите в корень общей папки вашего веб-сайта.

Существуют веб-сайты, которые конвертируют другие графические форматы в .ico за вас. т.е. http://tools.dynamicdrive.com/favicon/

Question 6

Один из лучших онлайн-инструментов favicon - FaviconGenerator.com . Быстрый, современный дизайн, без лишних хлопот.

Question 7

Если вы хотите создавать файлы .ico, вы также можете использовать GIMP для создания значков. Современные браузеры могут использовать обычные файлы изображений, но изначально я думаю, что это были просто файлы .ico. Это редактор изображений с открытым исходным кодом, похожий на Photoshop. Создайте и отредактируйте изображение нужного размера (скажем, 32 x 32), сведите к одному слою (если вы не хотите, чтобы в одном файле было несколько значков) и сохраните как .ico. Он отформатирует его правильно, а затем используйте Стефано, <link rel="SHORTCUT ICON" HREF="/favicon.ico">чтобы использовать его на своей веб-странице.

Question 8

Я использую программу Paint.net с открытым исходным кодом вместе с плагином Icon .

Затем вы можете создать и сохранить изображение в формате .ico со всеми различными размерами, встроенными в файл .ico.

Question 9

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

Поддерживаемые платформы Десять лет назад вы хотели поддерживать только настольные браузеры, и решение было создать классическую favicon.icoкартинку. В настоящее время вы хотите поддерживать iOS (и iOS Safari) и Android (и Android Chrome). Возможно, Windows 10 (и Edge), а также новая сенсорная панель Mac Book Pro (macOS Safari). Вы больше не можете просто использовать одно изображение, подходящее для всех.
Дизайн Как только вы поддерживаете несколько платформ, вы сталкиваетесь с множеством рекомендаций по дизайну. Например, Google использует прозрачные значки для своих собственных приложений на Android, а значки iOS вообще не могут быть прозрачными. Вы не можете просто использовать подход «единый дизайн для всех».
Сгенерированные значки и HTML-код. В течение двух или трех лет целью было создание как можно большего количества значков, чтобы охватить все случаи. Боюсь, что я сам создал эту тенденцию: - / Проблема в том, что вы получаете 20 с чем-то строк или HTML, что слишком много. Чтобы получить удовлетворительное техническое решение, вам необходимо сбалансировать количество сгенерированных иконок / HTML и поддерживаемых платформ.

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

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

Question 10

А если вы используете asp.net, попробуйте добавить значок на свою страницу следующим образом:

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

но вы можете найти дополнительную информацию здесь: http://doctype.com/

Question 11

Я делаю свои значки 16 x 16 или 32 x 32 с помощью Photoshop. Затем я сохраняю его как gif и использую IrfanView для преобразования gif в ico.

Answer 1 · 2016-12-22 01: 47: 31Z

95

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

Хотите улучшить этот вопрос? Обновите вопрос, чтобы он соответствовал теме Stack Overflow.

Закрыт 3 года назад .

Уточните этот вопрос

Как я могу создать фавикон для своего сайта?

html favicon Ry-
источник

1

Возможный дубликат Как добавить значок вкладки браузера (фавикон) для веб-сайта?

Michał Perłakowski

@Gothdo Это не дубликат! Тот, на который вы указываете, ЕСТЬ! Этот на полтора года предшествовал этому!

Дов Миллер

5

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

Kyll

@DovMiller Лучший вопрос с лучшими ответами - это тот, который должен оставаться открытым.

mbomb007

Answer 2

1

Возможный дубликат Как добавить значок вкладки браузера (фавикон) для веб-сайта?

Michał Perłakowski

Answer 3

@Gothdo Это не дубликат! Тот, на который вы указываете, ЕСТЬ! Этот на полтора года предшествовал этому!

Дов Миллер

Answer 4

5

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

Kyll

Answer 5

@DovMiller Лучший вопрос с лучшими ответами - это тот, который должен оставаться открытым.

mbomb007

Answer 6

100

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

Я разозлился и создал свой собственный генератор значков, который создает все эти файлы и правильный заголовок HTML для каждого из них: faviconit.com

Надеюсь, тебе понравится.

Эдуардо Руссо
источник

14

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

Крис Ливдал

1

Спасибо, Крис! Рад помочь!

Эдуардо Руссо

3

@EduardoRusso, это просто круто - спасибо!

davnicwil

4

Хорошая работа. Работает как положено.

Дилшан

1

Работает лучше, чем ожидалось! Маленькая ошибка (?): При расширенном использовании путь и версия не включаются в browserconfig.xml. Тем не менее, он все еще нравится. : D

mrjink 04

Answer 7

14

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

Крис Ливдал

Answer 8

1

Спасибо, Крис! Рад помочь!

Эдуардо Руссо

Answer 9

3

@EduardoRusso, это просто круто - спасибо!

davnicwil

Answer 10

4

Хорошая работа. Работает как положено.

Дилшан

Answer 11

1

Работает лучше, чем ожидалось! Маленькая ошибка (?): При расширенном использовании путь и версия не включаются в browserconfig.xml. Тем не менее, он все еще нравится. : D

mrjink 04

Answer 12

Если у вас уже есть изображение логотипа, которое вы хотите преобразовать в значок, вы можете преобразовать его с помощью http://www.favicomatic.com/ . Он создает четкие значки, и мне не пришлось редактировать их после создания. Он будет генерировать значки размером 16x16 и 32x32 и цитировать их: «Каждый чертов размер, сэр!». Сайт также поддерживает / сохраняет прозрачность, присутствующую в некоторых png. Кроме того, их сайт выглядит круто и им легко пользоваться.

Например, вот логотип stackoverflow: введите описание изображения здесь

Вот некоторые из созданных значков:

введите описание изображения здесь

Они также генерируют необходимый html:

<link rel="apple-touch-icon-precomposed" sizes="57x57" href="apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="favicon-128.png" sizes="128x128" />
<meta name="application-name" content="&nbsp;"/>
<meta name="msapplication-TileColor" content="#FFFFFF" />
<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-310x150.png" />
<meta name="msapplication-square310x310logo" content="mstile-310x310.png" />

Я посмотрел на первые 20 или около того результатов Google, и они оказались, безусловно, лучшими.

Answer 13

1

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

Джаред Менард

Answer 14

3

Я не знаю. Ваш ответ сделал это пятиминутной работой для меня. Спасибо.

Andyb

Answer 15

1

некоторые люди просто хотят проголосовать против без причины. У SO должна быть политика против этого. Между прочим, действительно ли нам нужно много разных размеров, или нам достаточно 16x16 и 32x32, поскольку веб-сайт генерирует

batmaci

Answer 16

Я лично не знаю, что здесь лучше всего. На моем сайте я думаю, что мы просто используем один. Они могут быть полезны для прогрессивных веб-приложений Chrome в сочетании с manifest.json.

Джаред Менард

Answer 17

Я нашел этот ресурс на favicomatic.com , он называется «Шпаргалка по Favicon» github.com/audreyr/favicon-cheat-sheet

Джаред Менард,

Answer 18

20

GIMP - хорошая программа для этого. Просто сохраните изображение как PNG, затем добавьте

 <link rel="SHORTCUT ICON" HREF="/favicon.png">

в <HEAD>разделе вашей страницы.

Стефано Борини
источник

7

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

4

Жалко, что старые MSIE (которые все еще довольно популярны) не принимают PNG вместо «правильного» файла в формате ICO.

Már Örlygsson

Для закрепления веб-сайтов на панели задач Windows также требуется ico.

Necriis

Answer 19

7

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

Answer 20

4

Жалко, что старые MSIE (которые все еще довольно популярны) не принимают PNG вместо «правильного» файла в формате ICO.

Már Örlygsson

Answer 21

Для закрепления веб-сайтов на панели задач Windows также требуется ico.

Necriis

Answer 22

8

Вы создаете файл значка размером 16x16, 32x32 или 64x64. Назовите его favicon.ico и поместите в корень общей папки вашего веб-сайта.

Существуют веб-сайты, которые конвертируют другие графические форматы в .ico за вас. т.е. http://tools.dynamicdrive.com/favicon/

Джим
источник

4

Также: вы можете сохранить свой файл значка где угодно, если вы добавите <link rel="shortcut icon" href="link/to/fav.ico" />в <head>блок своих страниц.

Már Örlygsson

1

tools.dynamicdrive.com/favicon также позволит вам объединить несколько размеров в одно фавико, и это здорово

hdorio

Answer 23

4

Также: вы можете сохранить свой файл значка где угодно, если вы добавите <link rel="shortcut icon" href="link/to/fav.ico" />в <head>блок своих страниц.

Már Örlygsson

Answer 24

1

tools.dynamicdrive.com/favicon также позволит вам объединить несколько размеров в одно фавико, и это здорово

hdorio

Answer 25

5

Один из лучших онлайн-инструментов favicon - FaviconGenerator.com . Быстрый, современный дизайн, без лишних хлопот.

Стучит X
источник

1

FaviconGenerator.com также предоставляет доступ к своему API из node / grunt / gulp.

Мэтт

Answer 26

1

FaviconGenerator.com также предоставляет доступ к своему API из node / grunt / gulp.

Мэтт

Answer 27

Если вы хотите создавать файлы .ico, вы также можете использовать GIMP для создания значков. Современные браузеры могут использовать обычные файлы изображений, но изначально я думаю, что это были просто файлы .ico. Это редактор изображений с открытым исходным кодом, похожий на Photoshop. Создайте и отредактируйте изображение нужного размера (скажем, 32 x 32), сведите к одному слою (если вы не хотите, чтобы в одном файле было несколько значков) и сохраните как .ico. Он отформатирует его правильно, а затем используйте Стефано, <link rel="SHORTCUT ICON" HREF="/favicon.ico">чтобы использовать его на своей веб-странице.

Answer 28

3

Я использую программу Paint.net с открытым исходным кодом вместе с плагином Icon .

Затем вы можете создать и сохранить изображение в формате .ico со всеми различными размерами, встроенными в файл .ico.

Мэтью Лок
источник

Хм, paint.net.amihotornot.com.au в качестве хоста для плагина Icon? Это законно?

RonaldB

@RonaldB да, это дом этого плагина. Странный домен, не так ли?

Мэтью Лок

Answer 29

Хм, paint.net.amihotornot.com.au в качестве хоста для плагина Icon? Это законно?

RonaldB

Answer 30

@RonaldB да, это дом этого плагина. Странный домен, не так ли?

Мэтью Лок

Answer 31

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

Поддерживаемые платформы Десять лет назад вы хотели поддерживать только настольные браузеры, и решение было создать классическую favicon.icoкартинку. В настоящее время вы хотите поддерживать iOS (и iOS Safari) и Android (и Android Chrome). Возможно, Windows 10 (и Edge), а также новая сенсорная панель Mac Book Pro (macOS Safari). Вы больше не можете просто использовать одно изображение, подходящее для всех.
Дизайн Как только вы поддерживаете несколько платформ, вы сталкиваетесь с множеством рекомендаций по дизайну. Например, Google использует прозрачные значки для своих собственных приложений на Android, а значки iOS вообще не могут быть прозрачными. Вы не можете просто использовать подход «единый дизайн для всех».
Сгенерированные значки и HTML-код. В течение двух или трех лет целью было создание как можно большего количества значков, чтобы охватить все случаи. Боюсь, что я сам создал эту тенденцию: - / Проблема в том, что вы получаете 20 с чем-то строк или HTML, что слишком много. Чтобы получить удовлетворительное техническое решение, вам необходимо сбалансировать количество сгенерированных иконок / HTML и поддерживаемых платформ.

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

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

Answer 32

А если вы используете asp.net, попробуйте добавить значок на свою страницу следующим образом:

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

но вы можете найти дополнительную информацию здесь: http://doctype.com/

Answer 33

1

Отметим, что doctype.com закрылся 15 февраля 2013 г. Подробнее об этом .

Krease

Answer 34

Я делаю свои значки 16 x 16 или 32 x 32 с помощью Photoshop. Затем я сохраняю его как gif и использую IrfanView для преобразования gif в ico.

Создание значка [закрыто]

Ответы: