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


95

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



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

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

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

Ответы:


100

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

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

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


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

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

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

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

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

42

Если у вас уже есть изображение логотипа, которое вы хотите преобразовать в значок, вы можете преобразовать его с помощью 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, и они оказались, безусловно, лучшими.


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

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

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

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

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

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

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


3

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


3

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

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


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

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

2

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

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


1

А если вы используете 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/


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

1

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.